在 Silverlight 5 Beta 中调试 XAML 中的数据绑定

引言

微软在昨天的MIX11大会上发布了Silverlight 5 Beta。它具有一套很棒的新功能。其中，最受欢迎的功能是XAML中的数据绑定调试。在本文中，我将逐步向您介绍Visual Studio中Silverlight 5 XAML页面的完整调试功能。

阅读完整的文章，了解更多信息并掌握调试功能，并附有简单的代码演练。最后，请不要犹豫留下您的反馈。欢迎提问。我会尽力回答您的问题。

先决条件

在开始讨论其余主题之前，您需要设置您的开发环境。您需要安装Visual Studio 2010 SP1和适用于Visual Studio 2010的Silverlight 5 Beta工具。之后，您需要创建一个新的Silverlight项目。

请查阅以下帖子，它们将回答您的所有疑问并帮助您设置先决条件

1. 在您的开发环境中安装Silverlight 5 Beta。您可以将其与现有的Silverlight版本并排安装。
2. 刚接触 Silverlight 5？这篇博文将帮助您创建您的第一个 Silverlight 5 项目。

一旦您的开发环境设置正确，请跳转到下一步开始讨论主要主题。别忘了在文章末尾提出您的问题。

创建简单的用户界面

我们首先需要创建应用程序的用户界面。只需一个`TextBlock`即可使其足够简单。为其`Text`属性分配一个`string`（如下所示）

既然我们可以调试 XAML，那么我们也可以设置断点，对吧？尝试在 Grid 级别设置一个断点。 不起作用！！！嗯，我们只能调试数据，不能调试 Grid 或面板。所以，尝试在 TextBlock 上设置断点。 啊，那也不起作用！！！那么，这到底是什么功能？

别担心。Silverlight 5 的特点是“在 XAML 中调试数据绑定”。文章标题也这么说了。我们硬编码了 TextBlock 的文本值。因此，那里没有数据绑定。我们怎么能认为这会起作用呢？哦！！！智能 IDE。

将控件绑定到数据并设置断点

让我们修改`Text`属性并在此处设置一个绑定。我们将把“`Message`”绑定到`Text`属性。现在尝试在此处设置一个断点。很酷，它为`TextBlock`控件插入了断点。

请查看上面的截图。您会看到我们是如何创建绑定并为绑定设置断点的。由于我们没有设置`DataContext`，因此它会显示错误。每个绑定都需要一个`DataContext`来引用相应的属性。

我们将在Main Page XAML文件中创建一个简单的依赖属性。因此，我们将在`UserControl`中添加一个`x:Name`。现在我们将把`ElementName`设置为绑定。请看下面的截图

如果使用MVVM，我们需要在视图中创建`ViewModel`实例，然后将`DataContext`设置为`ViewModel`的`static`资源。完成此部分后，您的绑定将正常工作。

现在我们需要在MainPage.xaml.cs文件中创建一个名为“`Message`”的依赖属性。我们将创建一个`string`属性。这是它的代码

完成这部分后，我们的代码实现就准备好了。现在是时候让我们看到实际的演示了。

调试数据绑定

让我们构建并运行我们的示例应用程序。通常，如果您按照上面提到的步骤正确操作，它不应该出现任何构建错误。如果出现任何错误，请修复它们。运行应用程序后，您将看到XAML断点被命中，应用程序在断点处停止。

如果您打开“局部变量”面板和/或“调用堆栈”面板，您将注意到完整的数据和源堆栈。

只需展开绑定状态，然后展开最终源。您将在那里看到我们绑定到`TextBlock`的依赖属性。属性的值将显示“`null`”，因为我们没有为其设置任何值。

现在打开你的代码隐藏文件，并在页面加载或构造函数中为属性设置一个值。现在再次运行应用程序。它将再次命中断点，如果你在局部变量面板中展开Binding State，你会注意到这次属性已经赋值。如果你遇到任何绑定错误，你可以在`BindingState`内部的`Error`属性中找到它。

这里是截图，它将为您提供一个更好的理解

您还能够在XAML调试时查找和设置任何UI控件的任何值。

OneWay 和 TwoWay 调试的区别

在我们的例子中，我们有一个`TextBlock`。`TextBlock`总是使用`OneWay`数据绑定。现在我们将探讨`TwoWay`数据绑定并检查它们之间的差异。要使用`TwoWay`绑定，我们可以使用`TextBox`控件。只需将现有的`TextBlock`替换为`TextBox`。此外，将`Mode`设置为`TwoWay`，如下所示

再次运行您的应用程序，它将在XAML断点处中断。如下面的屏幕截图所示，您将能够看到`BindingState`的值为“`UpdatingTarget`”。这意味着绑定已设置为更新目标控件。

按 F5 继续。这将打开浏览器窗口，显示应用程序，其中包含一个带有`TextBox`的用户界面。`TextBox`控件也设置了文本。更改文本并按 Tab 键取消焦点。

由于我们使用了`TwoWay`模式，它将触发事件以用输入值更新源，并再次在XAML断点处停止。

这次如果您检查`BindingState`，您会注意到它的值是“`UpdatingSource`”。这意味着，它现在正在更新源以反映由于`TwoWay`绑定而产生的新更改。

What Next?

现在您可以执行在代码编辑器中进行调试和断点操作的所有操作。您可以在 XAML 中设置条件断点、命中计数、过滤器、标签。此外，您还可以将调试信息（Visual Studio 2010 的一部分）导出到 XML 文件。

希望这些信息能帮助您调试XAML数据绑定。安装Silverlight 5 Beta并开始探索这些功能。一如既往，请在文章末尾留下反馈。您的反馈总是很重要。

非常感谢您阅读本文。我将很快发布后续章节。在此之前，祝您学习愉快。

历史

• 2011年4月17日：初始发布