WPF中的Data Binding调试指南

大家平时做WPF开发，相信用Visual studio的小伙伴比较多。XAML里面曾经在某些特殊版本的Visual Studio中是可以加断点进行调试的，不过目前多数版本都不支持在XAML加断点来调试。

那如果自己需要绑定的 Property 没生效，该怎么去检测或Debug排查问题呢？下面大白给出几种自己用过的方法，本人的开发环境是 Win10专业版x64 + Visual Studio 2019专业版v16.2.2，以下方法都亲测有效。


方法1: 修改注册表 + 修改config文件

在注册表中增加一个选项，

具体做法是，在目录HKEY_CURRENT_USER\Software\Microsoft中创建文件夹Tracing, 然后在其里面创建子文件夹WPF，然后新建一个DWORD(32位)值ManagedTracing，将其值设置为1.

1592713525851

也可以将下面的文件另存为 trace.reg，然后双击进行设置。

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Tracing\WPF]
"ManagedTracing"=dword:00000001

接下来，需要在你的Project的能影响 .exe.config生成的那个 .config文件下加入折叠区域的内容:

1592713910975

由于我这边相关的config文件就是App.config，所以只需在App.config中加入该内容。

图中折叠的部分如下:

  <system.diagnostics>
    <sources>
      <source name="System.Windows.Data" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>   
      </source>
      
       <!--<source name="System.Windows.Data" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingXmlListener" />
        </listeners>      
      </source>-->

      <source name="System.Windows.DependencyProperty" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>

      <source name="System.Windows.Freezable" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>

      <source name="System.Windows.RoutedEvent" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>

      <source name="System.Windows.Media.Animation" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>

      <source name="System.Windows.NameScope" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>

      <source name="System.Windows.ResourceDictionary" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>

      <source name="System.Windows.Markup" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>

      <source name="System.Windows.Documents" switchName="BindingSwitch" >
        <listeners>
          <add name="BindingTextListener" />
        </listeners>
      </source>
      
    </sources>
      
    <switches>
      <add name="BindingSwitch" value="All" />
      <!--add name="BindingSwitch" value="Off" -->
      <!--add name="BindingSwitch" value="Verbose" -->
      <!--add name="BindingSwitch" value="Warning" -->
      <!--add name="BindingSwitch" value="Activity" -->
    </switches>
    <sharedListeners>
      <!-- This listener sends output to a file named BindingTrace.log (text) -->
      <add name="BindingTextListener" type="System.Diagnostics.TextWriterTraceListener" initializeData="BindingTrace.log" />

      <!-- This listener sends output to the console -->
      <add name="console" type="System.Diagnostics.ConsoleTraceListener" initializeData="false"/>

      <!-- This listener sends output to an Xml file named BindingTrace.xml -->
      <add name="BindingXmlListener" type="System.Diagnostics.XmlWriterTraceListener" traceOutputOptions="None" initializeData="BindingTrace.xml" />
    </sharedListeners>

    <trace autoflush="true" indentsize="4"></trace>
  </system.diagnostics>

设置好后，你build这个wpf项目后，当启动Debug时，在其相应的debug目录下会多出一个 BindingTrace.log文件，比如, 我这边的内容上这样的：

1592714137479

我配置监听器(listener)时，将debug的信息设置成了.log格式，与.txt格式相比其优势是: 当用vs code打开时，自带高亮，看起来比较爽。

      <!-- This listener sends output to a file named BindingTrace.log (text) -->
      <add name="BindingTextListener" type="System.Diagnostics.TextWriterTraceListener" initializeData="BindingTrace.log" />

当然也有小伙伴希望将Trace信息导出为xml，也可以的，只需将加入内容开头部分的:

  <source>
    <listeners>
      <add name="BindingTextListener" />
    </listeners>   
  </source>
  
   <!--<source name="System.Windows.Data" switchName="BindingSwitch" >
    <listeners>
      <add name="BindingXmlListener" />
    </listeners>
      </source>  -->

改为:

  <!-- <source>
    <listeners>
      <add name="BindingTextListener" />
    </listeners>   
  </source> -->
  
   <source name="System.Windows.Data" switchName="BindingSwitch" >
    <listeners>
      <add name="BindingXmlListener" />
    </listeners>
   </source>

即可。

那么，此时在其相应的debug目录下会多出一个 BindingTrace.xml文件，我这边的内容上这样的：

1592714724096

参考:

https://systemscenter.ru/scsm_authoringtool.en/html/b24efd85-0ced-48ea-8ecc-d816c789bae2.htm

https://www.cnblogs.com/furenjun/archive/2011/08/01/2123983.html

WPF Tutorial | Debug DataBinding Issues
https://www.wpftutorial.net/DebugDataBinding.html

old-wpf-blog/45-DebuggingDataBinding at master · bstollnitz/old-wpf-blog
https://github.com/bstollnitz/old-wpf-blog/tree/master/45-DebuggingDataBinding

方法2: 在XAML中设置TraceLevel + 在xaml中需要debug的View对应的 .xaml.cs文件中启用WPF Trace

该方法适用于 .NET framework 3.5以后(包括 .NET core)的WPF project.

首先需要给该View的xaml文件的某个节点加入PresentationTraceSources.TraceLevel="High",

<UserControl x:Class="CaliburnMicro_Calculator.Views.CalculatorView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:CaliburnMicro_Calculator.Views"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             Width="240">

我这边直接在这个view的根节点<UserControl>中加入PresentationTraceSources.TraceLevel="High"，结果如下:

<UserControl x:Class="CaliburnMicro_Calculator.Views.CalculatorView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:CaliburnMicro_Calculator.Views"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             Width="240" PresentationTraceSources.TraceLevel="High">

此时，我们还需要在目标View的对应的 .xaml.cs文件中启用WPF Trace.

            // Enable WPF tracing
            PresentationTraceSources.Refresh();
            PresentationTraceSources.DataBindingSource.Listeners.Add(new ConsoleTraceListener());
            PresentationTraceSources.DataBindingSource.Switch.Level = SourceLevels.All;

此时，在Output(输出窗口)就可以看到数据绑定的相关信息了。

1592715540437-大白技术控

可能有人会好奇output中的红色字体是怎么来的，vs的output默认是黑色。

其实安装一个vs插件VSColorOutput就好了，传送门:

https://marketplace.visualstudio.com/items?itemName=MikeWard-AnnArbor.VSColorOutput.

当然，你还可以在此时启用"诊断工具"，位置是： 调试 -> 窗口 -> 显示诊断工具，配合起来用起来更爽喔~

1592715463451

方法3: Visual Studio 2019 (16.4之后的版本)安装 XAML binding extension

这个VS插件由微软XAML团队推出，看起来像是实现了方法1或方法2的自动化。

XAML binding extension for Visual Studio 2019 下载地址:
https://marketplace.visualstudio.com/items?itemName=PeterSpa.XamlBinding

相关代码已开源:

spadapet/xaml-binding-tool: XAML binding error window in a Visual Studio 2019 extension
https://github.com/spadapet/xaml-binding-tool

当安装好这个插件时，重启VS就可以用了，debug时，调试窗口中会多一个选项"XAML binding failures (experimental)"。点击该选项，debug相关窗口中会显示Data binding的详细信息。

1592716073429-大白技术控

此时，WPF trace level附近的...还可以点击进行设置。

1592715986388-大白技术控

方法4: 使用第三方debug工具 WPF

首推Snoop，这个工具大概2006年就出来了，历史悠久，最初由微软Blend团队的Pete Blois开发，功能也异常强大，而且目前也一直有人维护和更新。

1592826132129

左上角支持filter，属性或层级很多时，可以快速定位目标节点。

Snoop中的Tree, Properties, Data Context均支持filter，而Properties和Data Context都可以打断点。

当属性值更改，整个属性的背景更改为黄色高亮一秒钟，以吸引用户注意。

Snoop允许您查看您在应用程序中指定的事件列表。当您单击元素时，您可以看到哪些元素受到影响，并查看哪个（方法或任何人）处理该点击。Hanlded的事件以绿色显示。这是Snoop提供的查看隧道和事件冒泡传递之间的区别的强有力方法，特别是当这些事件处理得太快或根本不处理，它们如何影响您的可视化元素。

当出现binding error时，可以选择应用程序右侧的属性，然后右键单击以深入了解绑定或绑定表达式，以便给出更详细的错误说明。

在Snoop的左上角，有一个下拉框可以打开，然后选择"Show only Visuals with binding Errors"以查看应用程序所具有的可视数据绑定错误列表。

img

Snoop 的一个众所周知的功能是能够识别数据绑定问题。当看到组件是否绑定正确时，我通常只是尝试一下，看看它是否有效。如果无效，我转向 Visual Studio 调试模式下的output窗口。如果无法立即看到该值，我会这样做：将 Snoop 附加(Attach)到我的应用，并从应用程序树视图上方的搜索/筛选器栏中选择"Show only visuals with binding errors"选项。

Attach和Debug的步骤如下:

  • 以管理员权限启动snoop
  • 在代码里面的合适地方加上断点
  • Ctrl + F5 运行项目
  • 重现需要debug的界面
  • 调试 -> Debug -> 附加到进程(Attach)

然后在snoop上依次点:

Refresh按钮, Snoop按钮(望远镜)，借助filter找需要inspect的目标元素，接下来 debug就比较顺畅了。

还可以使用它来显示任何具有绑定错误(Binding error)的控件（就像word中的拼写检查一样）：

大白技术控-snoop绑定

Snoop 中的绑定错误会红色高亮显示

也有小伙伴在用或WPF Inspector，不过这个工具好久没更新了。


WPF inspect-大白技术控

WPF Inspector 这个项目之前是在CodePlex上的，后来没人维护了，目前有人手动fork到github上，但没见任何更新。

还有小伙伴用 Mole这个Visual Studio 插件，有兴趣的朋友可以去试试~

Mole for Visual Studio插件下载:

Mole for VS 2015 is installed from the Visual Studio Marketplace.

Mole for VS 2017 is installed from the Visual Studio Marketplace.

Mole for VS 2019 is installed from the Visual Studio Marketplace.

mole

其他方法:

  • 将Binding改为x:Binding后进行调试
  • 增加一个 ValueConverter，调用它进行调试

这两种本人不太熟悉，有兴趣的可以自己去试试哈~

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 175,490评论 5赞 419
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 74,060评论 2赞 335
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 124,407评论 0赞 291
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 47,741评论 0赞 248
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 56,543评论 3赞 329
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 43,040评论 1赞 246
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 34,107评论 3赞 358
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 32,646评论 0赞 229
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 36,694评论 1赞 271
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 32,398评论 2赞 279
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 33,987评论 1赞 288
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 30,097评论 3赞 285
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 35,298评论 3赞 282
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 27,278评论 0赞 14
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 28,413评论 1赞 232
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 38,397评论 2赞 309
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 38,099评论 2赞 314