Binding Debugging in Silverlight 5

In this post we will be discussing a long desired feature in XAML based applications. This feature is Binding Debugging specified in XAML. This feature is introduced in Silverlight 5.

Let's create a sample Silverlight application AppSilverlightDebuggingDemo.

Definitely an installation of Silverlight 5 is required for this example. Silverlight 5 beta tools can be downloaded from here:

http://www.microsoft.com/download/en/details.aspx?id=23887

If you have it installed already, the second step would allow you to select Silverlight 5 as the Silverlight version.

Here in order to test our example we are selecting the option to create a new website to host the silvelight application specified in previous step. When you hit OK the two projects should be available in Solution Explorer as follows:

Now we add a view model to the Silverlight project MainPageViewModel. It is a simple view model implementing INotifyPropertyChanged interface for supporting change notification for its properties. The view model has two properties StudentId and StudentName, setting both would cause PropertyChanged event to be triggered.

namespace AppSilverlightDebuggingDemo
{
    using System.ComponentModel;

    public class MainPageViewModel : INotifyPropertyChanged
    {
        #region Notifiable Properties

        string _studentId;
        public string StudentId
        {
            get { return _studentId; }
            set
            {
                _studentId = value;
                OnPropertyChanged("StudentId");
            }
        }

        string _studentName;
        public string StudentName
        {
            get { return _studentName; }
            set
            {
                _studentName = value;
                OnPropertyChanged("StudentName");
            }
        }

        #endregion

        #region INotifyPropertyChanged Implementation

        public event PropertyChangedEventHandler PropertyChanged = delegate { };
        private void OnPropertyChanged(string propertyName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion        
    }
}

Let us update the definition of MainPage.xaml as follows:

<UserControl x:Class="AppSilverlightDebuggingDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:AppSilverlightDebuggingDemo"             
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <UserControl.DataContext>
        <local:MainPageViewModel StudentId="1" StudentName="Muhammad" />
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="48*" />
            <RowDefinition Height="35*" />
            <RowDefinition Height="36*" />
            <RowDefinition Height="181*" />
        </Grid.RowDefinitions>
        <sdk:Label Height="24" HorizontalAlignment="Center" 
                   VerticalAlignment="Center" Width="189" FontWeight="Bold" FontSize="16"
                   Content="Student Information" Margin="106,24,106,0" />
        <sdk:Label Height="23" HorizontalAlignment="Left"
                   Margin="12,12,0,0" Name="lblStudentId" VerticalAlignment="Top"                    
                   Content="Student Id" Width="83" Grid.Row="1" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="101,8,0,0" 
                 VerticalAlignment="Top" Width="287" Grid.Row="1"
                 Text="{Binding StudentId}" />
        <sdk:Label Content="Student Name" Height="23" HorizontalAlignment="Left" 
                   Margin="12,8,0,0" VerticalAlignment="Top" Width="83" Grid.Row="2" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="101,4,0,0" 
                 VerticalAlignment="Top" Width="287" Grid.Row="2" 
                 Text="{Binding StudentName}"/>        
    </Grid>
</UserControl>

In the above view we are using the view model defined previously as DataContext. Here we have assigned some default values the two properties so that the view is loaded with some already existing information. We are binding the properties StudentId and StudentName to the two TextBox(es).Now when we run the application, it should display as follows:

Now open the view's XAML and try hitting F9 while putting the cursor on each of the bindings. This would insert a break point in the Binding expression. The execution would break at these bindings like a regular break point but the difference is that now this break point has been inserted in XAML.

Now let us run the application again. The execution would step at the break point as follows:

It not only steps at the breakpoint, it also lets us to use regular debugging tools provided in Visual Studio. You can see that we have the Locals window opened and it is showing the values of the properties of the DataContext. It also lets us find the issues with binding. Let's update the StudentName binding as follows:

How easy do you think your life would be. Easy debugging...no late sittings at work...more time with family :)

Download Code: