Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / XAML

Debugging Data Bindings in XAML with Silverlight 5 Beta

Rate me:
Please Sign up or sign in to vote.
4.93/5 (17 votes)
17 Apr 2011CPOL6 min read 50K   13   25
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)


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead 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 app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
GeneralMy vote of 5 Pin
Rhuros6-Jul-11 21:56
professionalRhuros6-Jul-11 21:56 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»31-Jul-11 7:41
professionalKunal Chowdhury «IN»31-Jul-11 7:41 
GeneralMy vote of 4 Pin
Bishoy Demian26-Apr-11 0:01
Bishoy Demian26-Apr-11 0:01 
GeneralRe: My vote of 4 Pin
Kunal Chowdhury «IN»29-Apr-11 7:15
professionalKunal Chowdhury «IN»29-Apr-11 7:15 
General5 out of 5 Pin
Vishal Nakum24-Apr-11 20:59
Vishal Nakum24-Apr-11 20:59 
GeneralRe: 5 out of 5 Pin
Kunal Chowdhury «IN»24-Apr-11 21:00
professionalKunal Chowdhury «IN»24-Apr-11 21:00 
GeneralMy vote of 5 Pin
Abhishek Sur22-Apr-11 8:40
professionalAbhishek Sur22-Apr-11 8:40 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»22-Apr-11 17:19
professionalKunal Chowdhury «IN»22-Apr-11 17:19 
GeneralMy vote of 5 Pin
JP_Rocks21-Apr-11 23:57
JP_Rocks21-Apr-11 23:57 
vey good
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»22-Apr-11 17:19
professionalKunal Chowdhury «IN»22-Apr-11 17:19 
GeneralMy vote of 5 Pin
JF201520-Apr-11 18:23
JF201520-Apr-11 18:23 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»20-Apr-11 18:36
professionalKunal Chowdhury «IN»20-Apr-11 18:36 
GeneralMy Vote of 5 Pin
RaviRanjanKr20-Apr-11 8:05
professionalRaviRanjanKr20-Apr-11 8:05 
GeneralRe: My Vote of 5 Pin
Kunal Chowdhury «IN»20-Apr-11 8:16
professionalKunal Chowdhury «IN»20-Apr-11 8:16 
GeneralMy vote of 5 Pin
TweakBird18-Apr-11 7:43
TweakBird18-Apr-11 7:43 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»18-Apr-11 7:50
professionalKunal Chowdhury «IN»18-Apr-11 7:50 
GeneralGood stuff, Kunal. Take my 5! Pin
Nish Nishant18-Apr-11 6:20
sitebuilderNish Nishant18-Apr-11 6:20 
GeneralRe: Good stuff, Kunal. Take my 5! Pin
Kunal Chowdhury «IN»18-Apr-11 6:44
professionalKunal Chowdhury «IN»18-Apr-11 6:44 
GeneralNice. Do you know if WPF will get this too? Pin
Sacha Barber18-Apr-11 0:10
Sacha Barber18-Apr-11 0:10 
GeneralRe: Nice. Do you know if WPF will get this too? Pin
Kunal Chowdhury «IN»18-Apr-11 0:29
professionalKunal Chowdhury «IN»18-Apr-11 0:29 
GeneralRe: Nice. Do you know if WPF will get this too? Pin
Sacha Barber18-Apr-11 0:32
Sacha Barber18-Apr-11 0:32 
GeneralRe: Nice. Do you know if WPF will get this too? Pin
Kunal Chowdhury «IN»18-Apr-11 0:39
professionalKunal Chowdhury «IN»18-Apr-11 0:39 
GeneralRe: Nice. Do you know if WPF will get this too? Pin
Sacha Barber18-Apr-11 1:09
Sacha Barber18-Apr-11 1:09 
GeneralMy vote of 5 Pin
Abhijit Jana17-Apr-11 22:12
professionalAbhijit Jana17-Apr-11 22:12 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»18-Apr-11 0:26
professionalKunal Chowdhury «IN»18-Apr-11 0:26 

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

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