In this post I’ll talk about the refresh to the Data Binding dialog that appears in Blend for Visual Studio and also in the Visual Studio XAML Designer. This product cycle, we combined what we felt to be the best of the Data Binding dialog from Blend 4 with the extra features of the Binding Builder from Visual Studio 2010 to bring you a single, common experience for binding to data and to commands. As before, the dialog is accessible from the advanced options of properties in the Properties panel as well from the Create Data Binding for Content and Create Data Binding for ItemsSource context menu commands on ContentControls (such as Button) and ItemsControls (such as ListBox), respectively.

The design of the dialog

The dialog is based on the one from Blend 4 but it is laid out somewhat differently. In Blend 4, the bulk of the dialog was composed of three tab items—for binding to data sources, elements, and data context. We wanted to add several new binding types—more in total than the tab item metaphor would comfortably allow—so we collected all the binding types, old and new, into the efficient space of a combo box. And then, for each of the binding types, we subdivided the central section of the dialog into a left-hand and a right-hand pane.

1. Binding type picker. Binding types include: Data context, Data source, ElementName, RelativeSource Self, RelativeSource TemplatedParent, StaticResource.
2. When the source is explicit (Data source, ElementName and StaticResource), the left-hand pane lists sources to choose from. When the source is implicit (Data context, RelativeSource Self, RelativeSource TemplatedParent) the left-hand pane provides information about that source – either its type or a brief explanation of what the binding does.
3. The right-hand pane shows the Path to the property or command. You can filter the top level of the tree to show only matching types, and you can enter a custom path.
4. To keep the most common workflows neat and tidy, less commonly-used settings are in the More settings section.
5. The dialog is now resizable, and its size and position are remembered for you.

The following sections describe the three new binding types that apply to Windows Metro style XAML apps: RelativeSource Self, RelativeSource TemplatedParent and StaticResource.

RelativeSource Self

You can follow along with the steps below if you’d like to walk through a demonstration of this binding type.

1. Create a new, blank project for a Windows Metro style XAML app.
2. Draw a Rectangle and set its Stroke to Blue and its StrokeThickness to 20.
3. To round off the corners of the stroke, set both RadiusX and RadiusY to 20.

So far, so good. But should you ever decide to change the StrokeThickness, you’ll need to adjust RadiusX and RadiusY to match – and that’s true whether you’re setting it to a literal value in Blend or whether you’re setting the value programmatically. Instead of going to those lengths, what you can do is to bind both radii to the stroke thickness – and here’s how.

4. Click the advanced options button (also called the property marker) to the right of the RadiusX property.

5. Click Create Data Binding to launch the Data Binding dialog.

Now, at this point you could use an ElementName binding, but that would mean that the Rectangle would be given a name. If the only thing that will be referencing the Rectangle is the Rectangle itself, then there is a slightly more succinct syntax that you can use.

6. In Binding type, choose RelativeSource Self. Note how the left-hand pane is indicating the nature of the binding and the right-hand pane lists the properties you can bind to.
7. In Path, select StrokeThickness and click OK.

8. Bind RadiusY the same way you bound RadiusX, and you’re done!

Now you can adjust the value of StrokeThickness in the Properties panel and watch as the radii of the stroke update in sync on the artboard.

RelativeSource TemplatedParent

You’re probably already familiar with what a template binding is. When you’re in the scope of a control template, you use a template binding to bind elements in the template to the control itself. Let’s see that in action.

1. Create a new, blank project for a Windows Metro style XAML app.
2. Draw a ToggleButton and then edit a copy of its template (Object > Edit Template > Edit a Copy > OK).
3. Select the element named Border, click on the property marker for BorderBrush, then click Template Binding.

The check mark indicates that the property is template-bound to the BorderBrush of the control being templated. As you may know, another term for the control being templated is the templated parent.

Now, it happens that a template binding is a one-way binding: elements in the template can respond to changes in the property values of the templated parent, but they cannot push changes back to it. Let’s demonstrate this:

4. Draw a ToggleSwitch inside the template of the ToggleButton (you’ll probably first want to add a new Grid column and move the existing Border over to make space).
5. Use the property marker for the ToggleSwitch’s IsOn property to template bind to the templated parent’s IsPressed property (then change IsPressed to IsChecked in the XAML, since that’s the property we really want to bind to).

If you run the app now, you’ll notice that the binding is only one-way from the control to the template. The ToggleSwitch follows suit when the ToggleButton becomes checked and unchecked, but clicking the ToggleSwitch has no effect on the ToggleButton. When we want a two-way binding to the templated parent, we use a different kind of binding, so let’s see that in action:

6. Invoke the Data Binding dialog on the ToggleSwitch’s IsOn property.
7. In Binding type, choose RelativeSource TemplatedParent. Note how the left-hand pane is indicating the type of the templated parent, which is ToggleButton.
8. In Path, select IsChecked. Finally, click More settings, set Binding direction to TwoWay, and click OK. When you run the app now, you’ll find that the ToggleSwitch can control the ToggleButton, as well as the other way around!

StaticResource

One of the most common use cases for binding to a resource is when you’re binding to a CollectionViewSource, and you will often do that when you’re binding an ItemsControl (such as GridView) to data that is grouped. The Grid Application project template does exactly that.

1. Create a new project for a Windows Metro style XAML app using the Grid Application template, then build the project (Project > Build Project).
2. In the object tree, find and select the GridView named itemGridView.
   Let’s reset a property on this element and then use the Data Binding dialog to demonstrate how the property was bound in the first place.
3. Click the property marker for the ItemsSource property and click Reset. Note how the design-time data has disappeared from the artboard.
4. Here’s how to restore it: click the same property marker again and click Create Data Binding.
5. In Binding type, choose StaticResource.
6. In Resource, collapse Common\StandardStyles.xaml and then select groupedItemsViewSource. There’s no need to change Path, just click OK.

Now that you’ve restored the binding, the GridView’s ItemsSource property is bound to the CollectionViewSource resource whose key is groupedItemsViewSource. That CollectionViewSource provides the grouped data that itemGridView needs.

We hope you find the new features and user experience of the Data Binding dialog to be useful and to your liking. Please keep the feedback coming and please remember that the Blend for Visual Studio Beta is Preview quality.

Steve White
Program Manager
Blend