XAML - 除錯

如果您熟悉任何過程語言（例如 C#、C/C++ 等）中的除錯，並且瞭解break 的用法，並且期望在 XAML 中進行相同型別的除錯，那麼您會驚訝地發現，目前還無法像除錯其他過程語言程式碼那樣除錯 XAML 程式碼。除錯 XAML 應用程式意味著嘗試查詢錯誤；

在資料繫結中，您的資料沒有顯示在螢幕上，您不知道為什麼
或者問題與複雜的佈局有關。
或者對齊問題或邊距顏色、疊加層等問題，以及一些擴充套件模板，例如 ListBox 和組合框。

XAML 中的除錯通常用於檢查繫結是否有效，如果無效，則檢查問題所在。不幸的是，除了 Silverlight 之外，無法在 XAML 繫結中設定斷點，但我們可以使用輸出視窗來檢查資料繫結錯誤。讓我們看一下下面的 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>

兩個文字塊的 Text 屬性靜態設定為“Name”和“Title”，而其他兩個文字塊的 Text 屬性繫結到“FirstName”和“Title”。但是，類變數在 Employee 類中故意取為 Name 和 Title，這些是錯誤的變數名。現在讓我們嘗試瞭解在未顯示所需輸出時可以在哪裡找到這種型別的錯誤。

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; 
      }
   }
}

以下是 C# 程式碼中 MainWindow 類的實現：

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(); 
      }
   }
}

讓我們執行此應用程式，您會立即在我們的 MainWindow 中看到我們已成功繫結到該 Employee 物件的 Title，但名稱未繫結。

要檢查名稱發生了什麼，讓我們看一下輸出視窗，其中生成了大量日誌。

查詢錯誤最簡單的方法是搜尋錯誤，您會找到以下提到的錯誤，該錯誤顯示“BindingExpression path error: '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後，您將看到所需的輸出。

XAML 的 UI 除錯工具

XAML 的 UI 除錯工具在 Visual Studio 2015 中引入，用於在執行時檢查 XAML 程式碼。藉助這些工具，XAML 程式碼以正在執行的 WPF 應用程式的視覺化樹的形式呈現，以及樹中不同的 UI 元素屬性。要啟用此工具，請按照以下步驟操作。

步驟 1 - 轉到“工具”選單，然後從“工具”選單中選擇“選項”。
步驟 2 - 您將看到以下對話方塊。

步驟 3 - 轉到左側“除錯”項下的“常規選項”。
步驟 4 - 選中突出顯示的選項，即“為 XAML 啟用 UI 除錯工具”。
步驟 5 - 按“確定”按鈕。

現在執行任何 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>

應用程式執行時，它將顯示即時視覺化樹，其中所有元素都以樹的形式顯示。

此即時視覺化樹顯示完整的佈局結構，以便了解 UI 元素的放置位置。但是此選項僅在 Visual Studio 2015 中可用。如果您使用的是舊版本的 Visual Studio，則無法使用此工具；但是，還有另一個工具可以與 Visual Studio 整合，例如 XAML Spy for Visual Studio。您可以從http://xamlspy.com/download下載它。如果您使用的是舊版本的 Visual Studio，我們建議您下載此工具。

列印頁面