XAML - การดีบัก

หากคุณคุ้นเคยกับการดีบักในภาษาขั้นตอนใด ๆ (เช่น C #, C / C ++ เป็นต้น) และคุณรู้จักการใช้งาน breakและคาดว่าจะมีการดีบักแบบเดียวกันใน XAML คุณจะประหลาดใจเมื่อทราบว่ายังไม่สามารถดีบักโค้ด XAML ได้เหมือนกับวิธีที่คุณใช้ในการดีบักโค้ดภาษาขั้นตอนอื่น ๆ การดีบักแอป XAML หมายถึงการพยายามค้นหาข้อผิดพลาด

  • ในการผูกข้อมูลข้อมูลของคุณจะไม่ปรากฏบนหน้าจอและคุณไม่รู้ว่าทำไม

  • หรือปัญหาเกี่ยวข้องกับรูปแบบที่ซับซ้อน

  • หรือปัญหาการจัดตำแหน่งหรือปัญหาสีระยะขอบภาพซ้อนทับ ฯลฯ ด้วยเทมเพลตที่ครอบคลุมบางอย่างเช่นกล่องรายการและกล่องคำสั่งผสม

การดีบักใน XAML เป็นสิ่งที่คุณทำโดยทั่วไปเพื่อตรวจสอบว่าการผูกของคุณใช้งานได้หรือไม่และหากไม่ได้ผลให้ตรวจสอบสิ่งที่ผิดพลาด น่าเสียดายที่การตั้งค่าเบรกพอยต์ในการเชื่อม XAML เป็นไปไม่ได้ยกเว้นใน Silverlight แต่เราสามารถใช้หน้าต่างผลลัพธ์เพื่อตรวจสอบข้อผิดพลาดในการผูกข้อมูล มาดูโค้ด XAML ต่อไปนี้เพื่อค้นหาข้อผิดพลาดในการผูกข้อมูล

<Window x:Class = "DataBindingOneWay.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0">
            <TextBlock Text = "Name: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width = "100" Text = "{Binding FirstName}"/>
         </StackPanel>
			
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0">
            <TextBlock Text = "Title: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width="100" Text = "{Binding Title}" />
         </StackPanel>
      </StackPanel>
   </Grid>
	
</Window>

คุณสมบัติข้อความของบล็อกข้อความทั้งสองถูกตั้งค่าเป็น“ ชื่อ” และ“ ชื่อเรื่อง” แบบคงที่ในขณะที่คุณสมบัติข้อความอีกสองบล็อกของบล็อกข้อความจะเชื่อมโยงกับ“ FirstName” และ“ ชื่อเรื่อง” แต่ตัวแปรคลาสนั้นจงใจนำมาใช้เป็น Name และ Title ในคลาส Employee ซึ่งเป็นชื่อตัวแปรที่ไม่ถูกต้อง ตอนนี้ให้เราพยายามทำความเข้าใจว่าเราจะพบข้อผิดพลาดประเภทนี้ได้ที่ไหนเมื่อไม่แสดงผลลัพธ์ที่ต้องการ

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks;

namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }
		
      public static Employee GetEmployee() {
         var emp = new Employee() {
            Name = "Ali Ahmed", 
            Title = "Developer"
         };
         return emp; 
      }
   }
}

นี่คือการนำคลาส MainWindow ไปใช้ในรหัส C # -

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace DataBindingOneWay {
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() {
         InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      }
   }
}

ลองเรียกใช้แอปพลิเคชันนี้และคุณจะเห็นได้ทันทีในหน้าต่างหลักของเราว่าเราผูกชื่อของวัตถุพนักงานนั้นสำเร็จแล้ว แต่ชื่อไม่ถูกผูกไว้

หากต้องการตรวจสอบว่าเกิดอะไรขึ้นกับชื่อลองดูที่หน้าต่างผลลัพธ์ที่สร้างบันทึกจำนวนมาก

วิธีที่ง่ายที่สุดในการค้นหาข้อผิดพลาดคือเพียงแค่ค้นหาข้อผิดพลาดและคุณจะพบข้อผิดพลาดที่กล่าวถึงด้านล่างซึ่งระบุว่า"ข้อผิดพลาดเส้นทาง BindingExpression:ไม่พบคุณสมบัติ'FirstName'ใน'object' '' Employe"

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName'
   property not found on 'object' ''Employee' (HashCode = 11611730)'.
BindingExpression:Path = FirstName; 
DataItem = 'Employee' (HashCode = 11611730); target element is 'TextBlock' (Name = ''); 
target property is 'Text' (type 'String')

ซึ่งระบุชัดเจนว่า FirstName ไม่ใช่สมาชิกของคลาส Employee ดังนั้นจึงช่วยแก้ไขปัญหาประเภทนี้ในใบสมัครของคุณ

เมื่อคุณเปลี่ยนไฟล์ FirstName ถึง Name อีกครั้งคุณจะเห็นผลลัพธ์ที่ต้องการ

เครื่องมือดีบัก UI สำหรับ XAML

เครื่องมือดีบัก UI สำหรับ XAML นำมาใช้กับ Visual Studio 2015 เพื่อตรวจสอบโค้ด XAML ที่รันไทม์ ด้วยความช่วยเหลือของเครื่องมือเหล่านี้โค้ด XAML จะถูกนำเสนอในรูปแบบของโครงสร้างภาพของแอปพลิเคชัน WPF ที่กำลังทำงานอยู่และคุณสมบัติขององค์ประกอบ UI ที่แตกต่างกันในแผนภูมิ ในการเปิดใช้งานเครื่องมือนี้ให้ทำตามขั้นตอนด้านล่าง

  • Step 1 - ไปที่เมนู Tools แล้วเลือก Options จากเมนู Tools

  • Step 2 - คุณจะเห็นกล่องโต้ตอบต่อไปนี้

  • Step 3 - ไปที่ตัวเลือกทั่วไปภายใต้รายการดีบักทางด้านซ้าย

  • Step 4 - ตรวจสอบตัวเลือกที่ไฮไลต์เช่น "เปิดใช้งานเครื่องมือดีบัก UI สำหรับ XAML"

  • Step 5 - กดปุ่ม OK

ตอนนี้เรียกใช้แอปพลิเคชัน XAML หรือใช้รหัส XAML ต่อไปนี้ -

<Window x:Class = "XAMLTestBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <StackPanel>
      <ComboBox Name = "comboBox" Margin = "50" Width = "100">
         <ComboBoxItem Content = "Green"/>
         <ComboBoxItem Content = "Yellow" IsSelected = "True"/>
         <ComboBoxItem Content = "Orange" />
      </ComboBox>
		
      <TextBox Name = "textBox" Margin = "50" Width = "100" 
         Height = "23" VerticalAlignment = "Top" Text = "{
         Binding ElementName = comboBox, Path = SelectedItem.Content, 
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" 
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}"> 
      </TextBox>
   </StackPanel>
	
</Window>

เมื่อแอปพลิเคชันทำงานแอปพลิเคชันจะแสดง Live Visual Tree ซึ่งองค์ประกอบทั้งหมดจะแสดงในแผนภูมิ

Live Visual Tree นี้แสดงโครงสร้างเค้าโครงที่สมบูรณ์เพื่อทำความเข้าใจว่าองค์ประกอบ UI ถูกวางไว้ที่ใด แต่ตัวเลือกนี้ใช้ได้เฉพาะใน Visual Studio 2015 เท่านั้นหากคุณใช้ Visual Studio เวอร์ชันเก่ากว่าคุณจะไม่สามารถใช้เครื่องมือนี้ได้ อย่างไรก็ตามมีเครื่องมืออื่นที่สามารถรวมเข้ากับ Visual Studio เช่น XAML Spy for Visual Studio คุณสามารถดาวน์โหลดได้จากhttp://xamlspy.com/download. เราขอแนะนำให้คุณดาวน์โหลดเครื่องมือนี้หากคุณใช้ Visual Studio เวอร์ชันเก่ากว่า