HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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>

两个文本块的文本属性静态设置为"Name"和"Title"，而其他两个文本块的文本属性绑定到"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; 
      }
   }
}

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

让我们运行此应用程序，您可以立即在 MainWindow 中看到我们已成功绑定到该 Employee 对象的 Title，但未绑定名称。

Employee Details

要检查名称发生了什么，让我们查看生成大量日志的输出窗口。

查找错误的最简单方法是搜索错误，您将找到下面提到的错误，它显示 "BindingExpression 路径错误：在 'object' ''Employe' 上未找到 'FirstName' 属性"

System.Windows.Data 错误：40：BindingExpression 路径错误：在 'object' ''Employee' (HashCode = 11611730) 上未找到 'FirstName' 属性。
BindingExpression:Path = FirstName;
DataItem = 'Employee' (HashCode = 11611730); 目标元素为 'TextBlock' (Name = '');
目标属性为 'Text' (类型 'String')

这清楚地表明 FirstName 不是 Employee 类的成员，因此它有助于修复应用程序中的此类问题。

当您再次将 FirstName 更改为 Name 时，您将看到所需的输出。

XAML 的 UI 调试工具

Visual Studio 2015 引入了 XAML 的 UI 调试工具，用于在运行时检查 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，我们建议您下载此工具。

❮ 上一节 下一节 ❯