Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Gather a crowd of developers together and they will soon be grumbling about their daily code battles. Markup languages like HTML and XML often become a target for developer angst during these times due to their lack of debugging support. Silverlight suffers from this problem and is particularly aggravating when using data binding in your XAML. In this movie, I will show you how to use the new XAML debugging feature, plus a few other data debugging tips. For this demonstration I will use Visual Studio and a project called DebuggingXamlBindings. Let me show you the problem.
I have this window called UseOutputWindow and I have a simple binding. I have got some TextBlocks that have some text binding. And I'm instantiating an instance of the RentalHouse class and storing it in these and binding to that information. When I run the application and look at my data, I can see the House Name showing up and the Location showing up, but the Description is not showing up. When binding fails in XAML, you don't typically see a runtime error or other obvious indicator that something bad has happened.
Instead, you simply see that your field doesn't contain a value, or the value is not updated in your database. To help solve binding issues, Microsoft provides a stream of binding information in the Visual Studio Output window. In order to see this information, you have to have the correct settings on in your debug output. Let me show you where you change those. Go to Tools > Options, and then go to Debugging. Click on Output Window and then look in this section, WPF Trace Settings.
It says WPF, but this also implies Silverlight. The part I'm looking for is Data Binding. If it says Warning here, you're ready to go. Click OK. Now, my application is still running, and the Output window is where Microsoft places that information. Let's see what's in the Output window. The next bit of information in this line of data looks interesting. It says there is an error, and then it says the BindingExpression path error: 'Description' property not found on 'DataClasses.RentalHouse'.
Well, it seems obvious that there's a typo in this property. Let's go look at my binding. Sure enough, there it is. So I would fix this and then the application should work. The output content is generated by the Silverlight team. If you want to see more information, you can use a favorite technique of veteran Silverlight programmers. The idea is to create a custom value converter whose sole purpose in life is to provide a place for you to put a break point and inspect values and types involved in the binding expression.
On my projects I typically call this the DebugConverter. Let's look at mine. I should probably stop my application too. Click on the Stop button. I have a DebugConverter that implements IValueConverter, and it has the Convert function, which does nothing but pass the information through. So the information comes in and then is returned directly to the binding. But now I can put a break point in this code, press F5 to run the application and attach a debugger, and you see that I'm hitting my break point. Once I am at this break point, I can use all my standard debugging techniques: I can use the Locals window and the Watch window, look through the Call Stack, my Thread Stack, or whatever is interesting to me.
Remove that break point, and we'll talk next about XAML debugging. To do that I am going to open this page here, XamlDebugging. My favorite new feature in Silverlight 5 has to be the XAML Debugging support added to Visual Studio. Finally, it's possible to put break points in my XAML, press F5 to step through the binding markup, and see binding details in the Visual Studio Locals window. It's quite easy to add a break point. In your XAML, you select the line that has the binding and then press F9 to add a break point or press F9 to remove the break point.
If you like, you can also click in the gutter on the left-hand side with your mouse. Now that I have a break point, I will press F5 to run the application. You see I am hitting my binding. And now let's go look at the information that's available. Microsoft provides the binding state object in the Locals window and packs it with useful debugging information. Now, my Locals window is a bit small, so one of my favorite tips is to take the Locals window and drag it out into the center of the screen and then make it a little bit larger. To put this back where it was originally, I can hold down the Ctrl key and double-click on the title bar.
Another way of moving it out to the center is to double-click on the title bar while it's docked. This BindingState information is packed with information. For instance, it has details about my binding. Here I can find information that's set in my XAML, like the StringFormat value. I also have an Error section. Let's see if there is anything interesting in there. It looks like there is a message that says, BindingExpression path error, 'Description' property not found on 'DataClasses.RentalHouse'.
We've seen that before. That's my error that helps me debug my application. While I am in here, I can also look for InnerExceptions. The way .NET handles exceptions is it can nest one exception inside another, so I could open this up to see InnerExceptions. And also, I've got something called a FinalSource property, which gives me all of the bound information. This shows me all of the information in my underlying data source. Having this information is invaluable for successful debugging.
You will encounter a binding error in your Silverlight application. It happens to all of us eventually. Now you have seen a few tools to help you find the problem, so you can get back to the fun part of programming.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104748 Viewers
56 Video lessons · 116631 Viewers
71 Video lessons · 85816 Viewers
131 Video lessons · 41060 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.