How to debug data binding problems on Windows Phone

Comments

Hamishwillee - Debugging articles are excellent

Hi Thomas

I am a big fan of debugging articles, particularly for things like bindings, for which failure reasons are pretty much opaque and without this about all you can do is check all the binding code.

I have subedited to make it a bit more readable - I think I've kept the correct meaning, but I'd appreciate it if you could check. In particular ou will note is that I put in a "Tip" about what it means if the value converter isn't called - is my text OK - ie what is the most likely cause of such a problem?

It might also be worth noting that you need to add the converter for every binding that you want to convert.

In terms of "wiki editing", you did a good job. One bit of advice is that code blocks look better if you use 2 spaces for indentation.

Thanks for this article.

regards

Hamish

hamishwillee 09:29, 15 October 2012 (EEST)

Kiran10182 - Filling ArticleMetaData

Hi influencer,

First of all thanks for the article.

I tried to fill some fields under ArticleMetaData template. Since I saw one reference to "How to encrypt your application data in Windows Phone", I tried to reuse some fields from the ArticleMetaData template from there. Please correct my edits if you think otherwise. You may also add some more fields to make the template complete.

Thanks again,

Kiran.

kiran10182 21:20, 15 October 2012 (EEST)

Log in or Join to leave comments.

This article explains how to debug data binding issues by inspecting the elements before they are due to be displayed by the control.

Article Metadata

---

Compatibility

Platform(s): Windows Phone 7.5

---

Article

Keywords: IValueConverter, data binding, xaml

Created: influencer (12 Oct 2012)

Last edited: hamishwillee (10 Apr 2013)

Introduction

Data binding allows you to link a data source defined in code to a UI description in XAML (target). While defining a binding is quite straightforward, if something goes wrong it is useful to be able to tell whether the problem is in your source data or in the binding definition.

The easiest way to do this is to create a custom value converter (IValueConverter), which will be called when the data from the binding source arrives - before it gets delivered to the control. By setting a breakpoint in the converter you can confirm that the source is sending the expected data and contains the correct properties.

Tip: If the converter doesn't get called then this is a sign that the binding has failed earlier than expected, perhaps in the definition of the source property or an incorrect DataContext. If a wrong property name in the binding declaration is given a message in the debug output window of VS appears.

Steps to do

First, consider the case where you have a ListBox definition in XAML as shown below:

<ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Margin="0,0,0,17" Width="432" Height="78">
        <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
        <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

To implement the converter you first have to derive a class from IValueConverter and implement it's methods:

public class DatabindingDebugConverter : IValueConverter
  {
  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
    return value;
    }
 
  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
    return value;
    }
  }

Then you have to declare the converter as a static resource in your page's XAML:

<phone:PhoneApplicationPage.Resources>
  <local:DatabindingDebugConverter x:Key="DatabindingDebugConverter"/>
</phone:PhoneApplicationPage.Resources>

You also have to change the XAML data binding statement to call the converter for a particular binding:

<TextBlock Text="{Binding LineOne, Converter={StaticResource DataBindingDebugConverter}}" 
    TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>

Note that this assumes you have declared the local namespace in the page tag:

xmlns:local="clr-namespace:EncryptionSample"

Next you set a breakpoint in the Convert() method and voilà, you can see the values that arrive from binding, if any.

Sample code

The sample code for the How to encrypt your application data in Windows Phone article uses this technique. Or you can load the source code directly from here.