Breakpoints on Xaml in Silverlight 5

Silverlight 5 MiniTutorial

Silverlight 5 Beta brings the enormously useful ability to set a break point in your Xaml BreakPoint where you have a data binding.  This can greatly simplify debugging and fixing binding issues.

To see this, create a new Silverlight 5 project and set up the Xaml to have 5 rows and 2 columns.  Place the title in the first row (spanning both columns) and prompts in the next 4 rows. The prompts are

  • FullName
  • Address
  • Phone
  • Email

Add four TextBlocks in the second column to display the values that will correspond to these prompts.  The Xaml for the four prompts looks like this:

<TextBlock
    Grid.Column="1"
    Grid.Row="1"
    Margin="5"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    Text="{Binding FullName}" />
<TextBlock
    Grid.Column="1"
    Grid.Row="2"
    Margin="5"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    Text="{Binding Address}" />
<TextBlock
    Grid.Column="1"
    Grid.Row="3"
    Margin="5"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    Text="{Binding PhoneNumber}" />
<TextBlock
    Grid.Column="1"
    Grid.Row="4"
    Margin="5"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    Text="{Binding Email}" />

To make this work, of course, we need a class and an instance to bind to. Begin by creating a new class, Person,

 public class Person
 {
     public string FullName { get; set; }
     public string Address { get; set; }
     public string Phone { get; set; }
     public string Email { get; set; }
 }

In MainPage.xaml.cs create an instance of Person, and set that instance to be the data context for the bindings,

public MainPage()
{
    InitializeComponent();
    var per = new Person()
    {
        FullName = "Jesse Liberty",
        Address = "100 Main Street, Boston, MA",
        Email = "jliberty@microsoft.com",
        Phone = "617-555-1212"
    };
    this.DataContext = per;
}

When you run this you’ll find that three of the four bindings work well, but localsthe phone number is not displayed. Set a break point in the Xaml folder on the binding for the  PhoneNumber and run the application. When you hit the break point examine the locals window as shown in the illustration to the right.

(click on the images for full size).

Note that there is an error message. By clicking on the message you can open a text reader for the entire error message, as shown in the next figure to the right.

errormsg

The error message indicates that there is no property PhoneNumber in the type Person, and sure enough, a quick check of the code shows that the property is just Phone.

Change the binding from PhoneNumber to Phone and the program works as expected.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Data, Essentials, Mini-Tutorial, Silverlight 5 and tagged . Bookmark the permalink.

4 Responses to Breakpoints on Xaml in Silverlight 5

  1. aah tnx admin for very helpful information…

  2. Ariel says:

    How is that this feature is part of Silverlight and don’t of WPF??

  3. Anamika says:

    This is going to be very helpful. I have spent hours trying to debug an app when there was a binding problem.

  4. Brad says:

    Is there any way to get this working in a WPF project?

Leave a Reply

Your email address will not be published.