How to Debug WPF Data Binding markup extension

Knowing what happens when a data binding is bad configured is one of the frequent problems that a WPF or a Silverlight developer could encounter during the development process. Sometimes a whole project is stopped for minutes or even hours to fix a problem like the situation where a bound image doesn't display anything, in spite of the fact that the Binding markup extension is apparently well configured. The problem is that we can't refer the error in order to fix it. Instead we try to imagine scenarios and cases, something that probably not related with the right thing to do. Then we begin by asking those senseless questions such as: What if we set the Mode to TwoWay or the UpdateSourceTrigger to OnPropertyChanged and the time, Of Corse, laps without finding a solution. The problem with the data binding and the other markup extensions that it is impossible to set a break point and start debugging the data binding like the code behind as the XAML doesn't support debugging.

I can say yes it happened to me a lot in the past and I suffered a lot form that issue but the good thing is that I have learned a lot from that issue and therefore I will share my little experience through this article to keep the live more easier for other developers those encounter such trouble.

The most challenging ones are the easiest ones

In most case, you have to begin by verifying the properties values like the Path property whether it is set correctly or not.

As you can see, everything is well configured except the Path property which is set to Txet or Test instead of Text. It is a stupid and no sense fault I know, but it could happen to anyone including me.

The System.Diagnostics namespace

There are a lot of debugging techniques but most efficient and determinant one is the technique that I will expose in the following lines. But before that let's try the following code

<TextBlock Padding="2"

Name="FirstTextBlock" Text="My first text
block"></TextBlock>

<TextBlock Padding="2"

Text="{Binding ElementName=FirstTextBlock,

Path=Txet,Mode=OneWay}"

Grid.Row="1"

Height="53"

VerticalAlignment="Top" />

The result although you will not receive any compile or runtime error, an unexpected result will be observed

The second text block is not binding as expected. If we try to have a look on the windows output

Then we will face a huge quantity of information. Of Corse, it is possible to find out the error there but it will take an important amount of time and endeavor especially with big projects.

The solution to reduce that is represented as follow:

At the beginning, we add a configuration file to the application

Once the file is added, we add this XML block within the configuration section so that the file content looks like below:

Once this is done, we go to the App.xaml.cs file and add a code to clear out the previous result of the log file E:\temp\DebugBinding.txt where information about the binding(s) anomaly is logged. Of Corse, it is possible to set another location of the log file. Anyway, the App.xaml.cs file should look as follow:

namespace WpfApplication

{

///<summary>

/// Interaction logic for App.xaml

///</summary>

publicpartialclassApp : Application

{

protectedoverridevoid
OnStartup(StartupEventArgs e)

{

ClearFile();

base.OnStartup(e);

}

//This method
will clear the previous data within the log file

privatestaticvoid
ClearFile()

{

FileStream
stream = newFileStream(@"E:\temp\DebugBinding.txt",

FileMode.Truncate);

StreamWriter
writer = newStreamWriter(stream);

writer.Write(string.Empty);

}

}

}

Once this is done, we define a preprocessor variable in the code behind where the data binding that causes error resides. Then we define a decorated method with the Conditional attribute as follow.

[Conditional("DEBUG")]

privatevoid BindingDebug()

{

process = Process.Start(@"E:\temp\DebugBinding.txt");

}

This method must be parameterless and void, its mission is to lunch a process that opens the log file E:\temp\DebugBinding.txt.

If we try now to add another text bloc control with another binding anomaly

<TextBlock Padding="2"

Text="{Binding ElementName=FirrstTextBlock,

Path=Text,Mode=OneWay}"

Grid.Row="1"

Height="53"

VerticalAlignment="Top"
/>

Then we try to restart the application again

All the binding anomalies are listed within the log file.

More details on the binding debuging

It is possible to provide more details on a given binding process by exposing it step by step from the beginning to the end. First, we begin by mapping the namespace (xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase") within the XAML in order to profit of the PresentationTraceSources.TraceLevel attached property which could set to one of those three levels:

Low

Medium

High

Those values enable to expose the binding steps respectively form the less detailed to the most detailed.