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

大白技術(shù)控 2020-06-23

展開全文

加個(gè)“星標(biāo)★”，每日良時(shí)，好文必達(dá)！

WPF中的Data Binding如何Debug?

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

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

方法1: 修改注冊(cè)表 + 修改config文件

在注冊(cè)表中增加一個(gè)選項(xiàng)，

具體做法是，在目錄HKEY_CURRENT_USER\Software\Microsoft中創(chuàng)建文件夾Tracing, 然后在其里面創(chuàng)建子文件夾WPF，然后新建一個(gè)DWORD(32位)值ManagedTracing，將其值設(shè)置為1.

也可以將下面的文件另存為 trace.reg，然后雙擊進(jìn)行設(shè)置。

Windows Registry Editor Version 5.00

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

接下來，需要在你的Project的能影響 .exe.config生成的那個(gè) .config文件下加入折疊區(qū)域的內(nèi)容:

由于我這邊相關(guān)的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.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" />     </switches> <sharedListeners> 

      <add name="BindingTextListener" type="System.Diagnostics.TextWriterTraceListener" initializeData="BindingTrace.log" />

 <add name="console" type="System.Diagnostics.ConsoleTraceListener" initializeData="false"/>

      <add name="BindingXmlListener" type="System.Diagnostics.XmlWriterTraceListener" traceOutputOptions="None" initializeData="BindingTrace.xml" />

</sharedListeners>

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

設(shè)置好后，你build這個(gè)wpf項(xiàng)目后，當(dāng)啟動(dòng)Debug時(shí)，在其相應(yīng)的debug目錄下會(huì)多出一個(gè) BindingTrace.log文件，比如, 我這邊的內(nèi)容上這樣的：

我配置監(jiān)聽器(listener)時(shí)，將debug的信息設(shè)置成了.log格式，與.txt格式相比其優(yōu)勢(shì)是: 當(dāng)用vs code打開時(shí)，自帶高亮，看起來比較爽。

      <add name="BindingTextListener" type="System.Diagnostics.TextWriterTraceListener" initializeData="BindingTrace.log" />

當(dāng)然也有小伙伴希望將Trace信息導(dǎo)出為xml，也可以的，只需將加入內(nèi)容開頭部分的:

<source> <listeners> <add name="BindingTextListener" /> </listeners> </source> 

改為:

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

即可。

那么，此時(shí)在其相應(yīng)的debug目錄下會(huì)多出一個(gè) BindingTrace.xml文件，我這邊的內(nèi)容上這樣的：

參考:

https:///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./DebugDataBinding.html

45-DebuggingDataBinding · bstollnitz/old-wpf-blog

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

方法2: 在XAML中設(shè)置TraceLevel + 在xaml中需要debug的View對(duì)應(yīng)的 `.xaml.cs`文件中啟用WPF Trace

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

首先需要給該View的xaml文件的某個(gè)節(jié)點(diǎn)加入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./markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:CaliburnMicro_Calculator.Views" xmlns:cal="http://www." mc:Ignorable="d" Width="240">

我這邊直接在這個(gè)view的根節(jié)點(diǎn)<UserControl>中加入PresentationTraceSources.TraceLevel="High"，結(jié)果如下:

此時(shí)，我們還需要在目標(biāo)View的對(duì)應(yīng)的 .xaml.cs文件中啟用WPF Trace.

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

此時(shí)，在Output(輸出窗口)就可以看到數(shù)據(jù)綁定的相關(guān)信息了。

可能有人會(huì)好奇output中的紅色字體是怎么來的，vs的output默認(rèn)是黑色。

其實(shí)安裝一個(gè)vs插件VSColorOutput就好了，傳送門:

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

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

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

這個(gè)VS插件由微軟XAML團(tuán)隊(duì)推出，看起來像是實(shí)現(xiàn)了方法1或方法2的自動(dòng)化。

XAML binding extension for Visual Studio 2019 下載地址:

https://marketplace./items?itemName=PeterSpa.XamlBinding

相關(guān)代碼已開源:

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

https://github.com/spadapet/xaml-binding-tool

當(dāng)安裝好這個(gè)插件時(shí)，重啟VS就可以用了，debug時(shí)，調(diào)試窗口中會(huì)多一個(gè)選項(xiàng)"XAML binding failures (experimental)"。點(diǎn)擊該選項(xiàng)，debug相關(guān)窗口中會(huì)顯示Data binding的詳細(xì)信息。

此時(shí)，WPF trace level附近的...還可以點(diǎn)擊進(jìn)行設(shè)置。

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

首推Snoop，這個(gè)工具大概2006年就出來了，歷史悠久，最初由微軟Blend團(tuán)隊(duì)的Pete Blois開發(fā)，功能也異常強(qiáng)大，而且目前也一直有Cory Plotts 等人負(fù)責(zé)維護(hù)和更新。

左上角支持filter，屬性或?qū)蛹?jí)很多時(shí)，可以快速定位目標(biāo)節(jié)點(diǎn)。

Snoop中的Tree, Properties, Data Context均支持filter(過濾搜索)，而Properties和Data Context都可以打斷點(diǎn)。

當(dāng)某個(gè)屬性的值改變時(shí)，整個(gè)屬性的背景更改為黃色高亮一秒鐘，以吸引用戶注意。

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

當(dāng)出現(xiàn)binding error時(shí)，可以選擇應(yīng)用程序右側(cè)的屬性，然后右鍵單擊以深入了解綁定或綁定表達(dá)式，以便給出更詳細(xì)的錯(cuò)誤說明。

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

設(shè)置"Show only Visuals with binding Errors"

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

Attach和Debug的步驟如下: