Click here to Skip to main content
Click here to Skip to main content

Debugging Data Bindings in XAML with Silverlight 5 Beta

, 17 Apr 2011
Rate this:
Please Sign up or sign in to vote.
Read the complete article to know more about it and gather knowledge on the debugging feature with a simple code walkthrough. At the end, don't hesitate to leave your feedback. Appreciate your Vote.

Introduction

Microsoft released Silverlight 5 Beta yesterday during MIX11 conference. It has a great new features set. Among them, the most demanded feature was Debugging Data Bindings in XAML. In this article, I will step you through the complete debugging feature in Visual Studio for Silverlight 5 XAML page.

Read the complete article to know more about it and gather knowledge on the debugging feature with a simple code walkthrough. At the end, don't hesitate to leave your feedback. Queries are welcome. I will try to answer you as much as I can.

Prerequisite

Before starting with the rest of the topic, you need to set up your development environment. You need Visual Studio 2010 with SP1, Silverlight 5 Beta Tools for Visual Studio 2010. Later, you need to create a new Silverlight project.

Find the below posts, which will answer all your queries and help you to set up your prerequisite:

  1. Install Silverlight 5 Beta in your development environment. You can install it side-by-side with the existing Silverlight versions.
  2. New to Silverlight 5? This post will help you to Create your first Silverlight 5 project.

Once your dev environment is set up properly, jump to the next step to start discussing on the main topic. Don't forget to ask your queries at the end of the articles.

Creating a Simple UI

We need to create our application UI first. Make it simple enough with just a single TextBlock. Assign a string to its Text property (as shown below):

image

Now as we can debug the XAML, we can put a breakpoint too, right? Try to put a breakpoint in the Grid level. Surprised smile Not working!!! Hmm, we can debug data only, not a Grid or a panel. So, try to put the breakpoint on the TextBlock. Crying face Ahh, that is also not working!!! So, what the hell is this feature?

Don't worry. Silverlight 5 features "Debugging Data Bindings in XAML". The article title also says that. We hard coded the text value of the TextBlock. Hence, there is no data binding there. How can we think that this will work? Ohh!!! Intelligent IDE. Smile with tongue out

Data Binding to the Control and Setting Breakpoint

Let's modify the Text property and set a binding there. We will bind "Message" to the Text property. Now try to put a breakpoint here. Cool, it inserted the breakpoint for the TextBlock control.

image

Have a look into the above screenshot. There you will see how we created the binding and set the breakpoint for the binding. This will show error as we didn't set the DataContext there. Every binding needs a DataContext to refer to the respective property.

We will create a simple Dependency Property in the Main Page XAML file. Hence, we will add a x:Name to the UserControl. Now we will set the ElementName to the binding. Have a look at the following screenshot:

image

If we used MVVM, we need to create the ViewModel instance in the view and then we need to set the DataContext as the static resource to the ViewModel. Once this part is done, your binding will work properly.

Now we need to create the Dependency Property called "Message" in the MainPage.xaml.cs file. We will create a string property. Here is the code for that:

image

Once you are done with this part, we are ready with our code implementation. Now it's time for us to see the demo in action.

Debugging Data Bindings

Let's build and run our sample application. Generally, it should not give any build error, if you properly followed the steps mentioned above. If you get any errors, fix them. Once you run the application, you will see that the XAML breakpoint got hit and the application stopped in the break point.

image

If you open the "Locals" panel and/or the "Call Stack" panel, you will notice the complete stack of the data and origin there.

Just expand the Binding State and then Final Source. You will see the Dependency Property there, which we binded to the TextBlock. The value of the property will say "null" because we didn't set any value for it.

Open your code behind file now and set a value to the properties on page load or in the constructor. Now run the application once again. It will again hit the breakpoint and if you expand the Binding State in the local panel, you will notice that the value has been assigned to the property this time. If you get any binding error, you can find it in the Error property inside the BindingState.

Here is the screenshot which will give you a better idea about it:

image

You will be also able to find and set any value of any UI control at the time of XAML debugging.

Difference Between OneWay and TwoWay Debugging

In our example, we have a TextBlock. TextBlock always uses OneWay data binding. Now we will explore TwoWay data bindings and will check the differences between them. To use a TwoWay binding, we can use a TextBox control. Just replace the existing TextBlock to a TextBox. Also, set the Mode to TwoWay, as shown below:

image

Run your application again and it will break in the XAML breakpoint. As shown in the below screenshot, you will be able to see that the BindingState has the value "UpdatingTarget". This means the binding is set to update the target control.

image

Press F5 to continue. This will open the Browser window showing the application, which has a TextBox in the UI. The TextBox control also has a text set to it. Change the text and press tab to unfocus from the control.

As we used TwoWay mode, it will fire the event to update the source with the entered value and again stop at the XAML breakpoint.

image

This time if you check the BindingState, you will notice that it has a value called "UpdatingSource". It means, now it is updating the source to reflect the new changes due to TwoWay binding.

What Next?

You can now do all the operations that you can do in the code editor with debugging and breakpoint. You can set Conditional breakpoint, Hit count, Filter, Labels in the XAML. Also, you will be able to export the debugging information (which is part of Visual Studio 2010) to an XML file.

image

Hope this information will help you while debugging XAML data bindings. Install Silverlight 5 Beta and start exploring those features. As always, leave a feedback at the end of the article. Your feedback always count.

Thank you so much for your time to read this article. I will post the next chapters soon. Till then, enjoy learning.

History

  • 17th April, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRhuros6-Jul-11 21:56 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury31-Jul-11 7:41 
GeneralMy vote of 4 PinmemberBishoy Ghaly26-Apr-11 0:01 
GeneralRe: My vote of 4 PinmvpKunal_Chowdhury29-Apr-11 7:15 
General5 out of 5 PinmemberVishal Nakum24-Apr-11 20:59 
GeneralRe: 5 out of 5 PinmvpKunal_Chowdhury24-Apr-11 21:00 
GeneralMy vote of 5 PinmvpAbhishek Sur22-Apr-11 8:40 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury22-Apr-11 17:19 
GeneralMy vote of 5 PinmemberNomura_R21-Apr-11 23:57 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury22-Apr-11 17:19 
GeneralMy vote of 5 PinmemberJF201520-Apr-11 18:23 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury20-Apr-11 18:36 
GeneralMy Vote of 5 PinmemberRaviRanjankr20-Apr-11 8:05 
GeneralRe: My Vote of 5 PinmvpKunal_Chowdhury20-Apr-11 8:16 
GeneralMy vote of 5 PinmemberE$w@r18-Apr-11 7:43 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury18-Apr-11 7:50 
GeneralGood stuff, Kunal. Take my 5! PinmvpNishant Sivakumar18-Apr-11 6:20 
GeneralRe: Good stuff, Kunal. Take my 5! PinmvpKunal_Chowdhury18-Apr-11 6:44 
GeneralNice. Do you know if WPF will get this too? PinmvpSacha Barber18-Apr-11 0:10 
GeneralRe: Nice. Do you know if WPF will get this too? PinmvpKunal_Chowdhury18-Apr-11 0:29 
GeneralRe: Nice. Do you know if WPF will get this too? PinmvpSacha Barber18-Apr-11 0:32 
GeneralRe: Nice. Do you know if WPF will get this too? PinmvpKunal_Chowdhury18-Apr-11 0:39 
GeneralRe: Nice. Do you know if WPF will get this too? PinmvpSacha Barber18-Apr-11 1:09 
GeneralMy vote of 5 PinmvpAbhijit Jana17-Apr-11 22:12 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury18-Apr-11 0:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 18 Apr 2011
Article Copyright 2011 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid