WPF中的Data Binding調(diào)試指南

大家平時做WPF開發(fā)饲宛，相信用Visual studio的小伙伴比較多险掀。XAML里面曾經(jīng)在某些特殊版本的Visual Studio中是可以加斷點進行調(diào)試的，不過目前多數(shù)版本都不支持在XAML加斷點來調(diào)試田度。

那如果自己需要綁定的 Property 沒生效钓丰，該怎么去檢測或Debug排查問題呢？下面大白給出幾種自己用過的方法每币，本人的開發(fā)環(huán)境是 Win10專業(yè)版x64 + Visual Studio 2019專業(yè)版v16.2.2，以下方法都親測有效琢歇。

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

在注冊表中增加一個選項兰怠，

具體做法是，在目錄HKEY_CURRENT_USER\Software\Microsoft中創(chuàng)建文件夾Tracing, 然后在其里面創(chuàng)建子文件夾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文件下加入折疊區(qū)域的內(nèi)容:

1592713910975

由于我這邊相關的config文件就是App.config，所以只需在App.config中加入該內(nèi)容宠互。

圖中折疊的部分如下:

  <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文件搏色，比如, 我這邊的內(nèi)容上這樣的：

1592714137479

我配置監(jiān)聽器(listener)時，將debug的信息設置成了.log格式券册，與.txt格式相比其優(yōu)勢是: 當用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航邢，也可以的，只需將加入內(nèi)容開頭部分的:

  <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文件，我這邊的內(nèi)容上這樣的：

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文件的某個節(jié)點加入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的根節(jié)點<UserControl>中加入PresentationTraceSources.TraceLevel="High"乞榨，結(jié)果如下:

<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(輸出窗口)就可以看到數(shù)據(jù)綁定的相關信息了。

1592715540437-大白技術控

可能有人會好奇output中的紅色字體是怎么來的考榨，vs的output默認是黑色跨细。

其實安裝一個vs插件VSColorOutput就好了，傳送門:

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

當然河质，你還可以在此時啟用"診斷工具"冀惭，位置是：調(diào)試 -> 窗口 -> 顯示診斷工具，配合起來用起來更爽喔~

1592715463451

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

這個VS插件由微軟XAML團隊推出掀鹅，看起來像是實現(xiàn)了方法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時戚丸，調(diào)試窗口中會多一個選項"XAML binding failures (experimental)"。點擊該選項扔嵌，debug相關窗口中會顯示Data binding的詳細信息限府。

1592716073429-大白技術控

此時，WPF trace level附近的...還可以點擊進行設置痢缎。

1592715986388-大白技術控

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

首推Snoop胁勺，這個工具大概2006年就出來了，歷史悠久独旷，最初由微軟Blend團隊的Pete Blois開發(fā)署穗，功能也異常強大，而且目前也一直有人維護和更新嵌洼。

1592826132129

左上角支持filter案疲，屬性或?qū)蛹壓芏鄷r，可以快速定位目標節(jié)點麻养。

Snoop中的Tree, Properties, Data Context均支持filter络拌，而Properties和Data Context都可以打斷點。

當屬性值更改回溺，整個屬性的背景更改為黃色高亮一秒鐘春贸，以吸引用戶注意。

Snoop允許您查看您在應用程序中指定的事件列表遗遵。當您單擊元素時萍恕，您可以看到哪些元素受到影響，并查看哪個（方法或任何人）處理該點擊车要。Hanlded的事件以綠色顯示允粤。這是Snoop提供的查看隧道和事件冒泡傳遞之間的區(qū)別的強有力方法，特別是當這些事件處理得太快或根本不處理，它們?nèi)绾斡绊懩目梢暬亍?/p>

當出現(xiàn)binding error時类垫，可以選擇應用程序右側(cè)的屬性司光，然后右鍵單擊以深入了解綁定或綁定表達式，以便給出更詳細的錯誤說明悉患。

在Snoop的左上角残家，有一個下拉框可以打開，然后選擇"Show only Visuals with binding Errors"以查看應用程序所具有的可視數(shù)據(jù)綁定錯誤列表售躁。

img

Snoop 的一個眾所周知的功能是能夠識別數(shù)據(jù)綁定問題坞淮。當看到組件是否綁定正確時，我通常只是嘗試一下陪捷，看看它是否有效回窘。如果無效，我轉(zhuǎn)向 Visual Studio 調(diào)試模式下的output窗口市袖。如果無法立即看到該值啡直，我會這樣做：將 Snoop 附加(Attach)到我的應用，并從應用程序樹視圖上方的搜索/篩選器欄中選擇"Show only visuals with binding errors"選項苍碟。

Attach和Debug的步驟如下:

以管理員權(quán)限啟動snoop
在代碼里面的合適地方加上斷點
Ctrl + F5 運行項目
重現(xiàn)需要debug的界面
調(diào)試 -> 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后進行調(diào)試
增加一個 ValueConverter瑞信，調(diào)用它進行調(diào)試

這兩種本人不太熟悉厉颤，有興趣的可以自己去試試哈~