Follow Me on Instagram Subscribe via RSS Feed

3rd Day of Silverlight: Databinding Debugging

December 14, 2011

On to the third part of my 12 Days of Silverlight series.  This one is probably one of my favorite features of Silverlight 5.  It has already saved me several  hours of work and is something you should look into…

On the third day of Silverlight, the team delivered to me… Databinding debugging.

So how many times have you wired up the world’s most fantastic Silverlight screen only to run it and your data not appear?  You check that your DataContext has data, your data is correct, and yet it still doesn’t work.  After pulling your hair out for a while you then realize that you typo’d the binding statement in your XAML.  Wouldn’t it be nice to make that testing process a bit easier?  The Silverlight team has helped us out once more with databinding debugging. In fact, if any of the WinRT guys happen to be reading this, this needs to be brought over as well. Smile

The best way to examine the new debugging is to see it in action.  So let’s set up a project that we can test against.

We will begin by setting up a new Silverlight application project.  In our project, add a new Person class to hold our data.  Let’s add a couple of properties to our class so that is looks like this:

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Next we can add some XAML to our MainPage to display our data.

<UserControl.Resources>
    <local:Person x:Key="person" FirstName="Homer" 
         LastName="Simpson"/>
</UserControl.Resources>
    <Grid x:Name="LayoutRoot" 
        Background="LightGray" 
        Height="100"
        Width="200"
        DataContext="{StaticResource person}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBlock Text="First Name :"/>
    <TextBlock Text="Last Name :"
                Grid.Row="1"/>

    <TextBox Text="{Binding First}"
                Width="100"
                Grid.Column="1"/>
    <TextBox Text="{Binding LastName}"
                Width="100"
                Grid.Column="1"
                Grid.Row="1"/>
</Grid>

For simplicity, we are creating an instance of the Person in XAML and setting the DataContext in XAML as well.  So let’s run our example and we should get something like this:

image

Obviously we have an issue with the first name field.  So let’s take a look at how databinding debugging can help us out.  Databinding debugging fully supports debugging and it works much like you would expect.  You can set a break point on the first name TextBox.  If we rerun our application it will break on our binding statement.   

image

Once we hit our break point, take a look at the Locals window.  You will see a BindingState property.  If you expand it, the first thing we will look at is the Error property.  If you look at the message, you will see that our object doesn’t have a ‘First’ property.  Now we know what the problem is, let’s see if we can figure out how to resolve it.  The next property to take a look at is FinalSource.  This comes in very handy as it shows you the actual DataContext that you are binding to.  If we expand the node you will see our Person object with it’s properties.  So we can now see that the binding statement should be ‘FirstName’ instead of ‘First’.

Another important property to look at is the second to the last one, the System.Windows.Data.Debugging.UpdateTargetPipeline.  This will give you some great insight into how the binding engine works.  Here you can see how things like value converters modify the your object property.  If you are ever getting unexpected results this is a great place to look.

So, for completion sake, let’s fix our binding statement and rerun our application.  Here is the modified XAML and the results:

 <TextBox Text="{Binding FirstName}"
            Width="100"
            Grid.Column="1"/>

image

Once you have a chance play with this a bit, you will understand how powerful and helpful this new little feature can be.  Although fairly simple, I’ve posted the code here : DaysOfSilverlight_Debugging.zip

Make sure you come back tomorrow for the next part of the 12 Days of Silverlight series.

Series Navigation<< 2nd Day of Silverlight: DataContextChanged4th Day of Silverlight: Linked and Multi-Column Text >>

Leave a Reply