Binding to a single object.

So today, on CodeProject, one of the WPF regulars posed a question about whether or not you could only bind to ObservableCollection objects, and if you could bind to single objects, how could you guarantee two way databinding goodness. As you may well imagine, I promptly answered that you could indeed bind to a single object and implement two way databinding with it. The discussion also posed the question, could WPF bind to properties that linked into child objects and display these – from separate usercontrols.

This seemed to me to be an ideal candidate for demonstrating the beauty and wonder that is the WPF databinding infrastructure. If you’ve only ever been exposed to WinForms or ASP.NET databinding, then you are in for a major treat – WPF (and Silverlight) provide so much more bang for your buck with binding that it’s hard to see how we managed before. First of all, let’s take a look at our business object classes, Benefit and Customer. Both of these classes implement INotifyPropertyChanged so that we get access to the notification mechanism that supports two way binding.

First of all, here’s Benefit.cs:

And here’s Customer.cs:

As you can see, there’s nothing out of the ordinary in these classes – they don’t do anything clever. They are just your bog standard, basic model classes.

Now, here’s the main window XAML:

The TextBoxes are bound to the relevant entries in the Customer class using the familiar {Binding Path=…} syntax. But wait, where’s the Benefit class in all this? I added it for a reason, yet there’s no sign of it. Well, as you can see – there’s a reference to a UserControl (BenefitsControl), and we are going to perform the actual binding in this class. Here’s the definition of BenefitsControl.xaml:

Look – there’s the binding Benefits.ProviderName, but would it surprise you to know that I’m not going to put the data class anywhere near this control. I’m going to set the DataContext on the parent control and let the usercontrol “find” the data there. Here’s the implementation of the code behind the parent XAML (Window1.cs):

So - here’s the application in all its glory:

Well – now that we’ve covered the code, how does the databinding actually work? How does the user control actually get its binding to work? This is where the wonder that is WPF actually comes into play. If the binding can’t find data in the data context at the current level, it works its way back up the logical tree until it can. Seriously – I love this stuff, and I’d hate to go back from it.

The code for this application can be downloaded here. Note that you’ll need to change the extension from .doc to .zip.

customerboundsamplezip

XAML Power Toys & MoXAML – the one-two knockout punch.

In this post, I’d like to talk about how MoXAML and XAML Power Toys can work together to produce applications quickly and easily. We’re going to look at how to create a working fully databound datagrid in Silverlight, in 1 minute.

Important note:
If you’re running Visual Studio on Vista, please run it as Administrator to follow this tutorial.

So, now that we know what we’re trying to do, let’s start off by creating a Silverlight application in Visual Studio 2008. For this run through, we need to use C# because we are going to use the Notify Property command which works against automatic properties, which are only a feature of C# (unfortunately). For this sample, I’m adding a new ASP.NET web project to host Silverlight, and I’ve set the Project Type to ASP.NET Web Application Project.

Right, now that we’ve created the basic application, we’re going to add a new class to the Silverlight control project which will be the model we’re planning on adding. Normally, we’d create a new DLL for the model, but for the sake of simplicity I’m adding it directly to the control. I’m calling this class Person, and it will consist of 4 properties; Title, Name, Age and Nickname. The class looks like this:

Now, we want to convert the class so that the properties use the PropertyChanged event handler. To do this, I’m going to add the INotifyPropertyChanged interface to the class definition and then implement the interface. (You will need to add using System.ComponentModel; to your class). At this stage, the class looks like:

The problem with the code as it stands is that it won’t properly participate in databinding, because it’s not going to notify bound items of any changes. That’s where the PropertyChanged event comes in. I love automatic properties, but I was so frustrated that they didn’t internally implement this – this was the reason that I wrote the Notify Property command. So, it’s time to fire up MoXAML and rectify the “deficiencies”.

Note:
Before you continue, it’s important to make sure that you have the latest versions of XAML Power Toys and MoXAML Power Toys, and that they are running as an add-in in Visual Studio.

Right click on the Name property and click MoXAML Power Toys > Make Notify Property from the menu. This adds the necessary “plumbing” to make this a notify property.

MoXAML menu

MoXAML converted code

Repeat this with the other properties, to add the relevant implementation into each property. Now we’re going to move onto the Silverlight control. At this stage, it is vital that you build your project, and ensure that it compiles successfully because XAML Power Toys uses reflection to work out what is available in your class.

Once you’ve built the project, right click on the class in the solution explorer and choose XAML Power Toys > Create Form, ListView or Data Grid For Class. When the dialog appears, choose Silverlight Data Grid in the Select Object To Create dropdown.

XAML Power Toys form in action.

Now, we can drag and drop the items we want to appear in the grid. I’m going to add them in the order Title, Name, Nickname and Age. For more information on the template items available in the dialog, please see the videos that Karl has most helpfully produced, but for the moment, please ensure that the mode is set to TwoWay for each item.

Items being added to the datagrid.

Once you’ve added the fields you want, click Create. If this is the first time you’ve used XAML Power Toys, you should see an information box with the message: “Your settings file has been created for you. You can configure your settings using the Set Control Defaults command.” Click OK.

You’ll now see an information box that tells you that you can now paste your XAML in.

Once you’ve pasted your grid into the Page.xaml file, you may notice that the DataGrid has lots of wavy underlines. This is because the System.Windows.Controls.Data assembly isn’t referenced in your project, and the namespace hasn’t been added to the UserControl attributes. To fix this, add the reference into your project, and copy the definition xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data” into the UserControl attributes.

We’re going to give our datagrid a name. Let’s call it xamlGrid. To do this, add x:Name=”xamlGrid” to the datagrid. We have done this so that we can hook the grid up with some data. So now, let’s add the Loaded event to our usercontrol. To do this, add Loaded=”UserControl_Loaded” into the control definition (if you type Loaded= into Visual Studio, and press enter when the <New Event Handler> is highlighted, the event handler is added into both the XAML and the codebehind.

Now, open up Page.xaml.cs and take a look at the code. The UserControl_Loaded handler should be present, and hooks up to a RoutedEvent. It’s now time to add some data and bind it in. First of all, let’s add a list of Person objects as a class member. Once this has been done, add in some code to add new Person items to the list and then bind the list to the datagrid ItemsSource. Here’s my code:

If you build and run this project, you’ve got a fully databound grid which displays the items you entered. Change some values, and the properties update as you’d expect. If you want to test this, and I strongly suggest you do because it’s so cool, create a copy of your first grid in the XAML, change it’s name and bind it to the same list. Rerun the project, and change a value in one of the grids – if you’ve done everything right, the other grid will display your updated values.

That’s all there is to getting started with using MoXAML and XAML Power Toys to quickly create a databound Silverlight application. It really is that easy, and I’d like to thank Karl for his hard work in making it so that it is that easy.

Download

You can download the sample here. As always, you’ll need to rename the .doc file to .zip before you can extract it.

samplesilverlightappzip