Tag Archives: binding

Windows Presentation Foundation Using Visual C# 2010: Introducing Binding

As you write applications, you often need to update the value of one element with information from another element. Often, you need to display information coming from a collection of objects in a list, or combo box. Or, perhaps you need to work with data coming from a data source, such as a database. In all these cases, the simplest solution is to bind data from a data source to a target element; in other words, you need binding capabilities.

Data binding makes it simple for applications to display and interact with data. You use a connection, or binding, between the data source and the target; this binding object allows data to flow between the source and the target objects. Once you have created a binding, and you change data in the data source, the changes appear in the target. If you have enabled two-way data binding, you can also make changes in the target and have those changes appear back in the original data source.

When might you use binding? You might use binding to:

  • Display the number of characters in a text box, in a TextBlock control.
  • Display the value of a Slider control in a TextBlock control.
  • Display a list of customers in a ListBox control.
  • Display a customer’s photo in an Image control.
  • Display and edit a customer’s name in a TextBox control.

Obviously, there are infinite reasons to use binding, and XAML makes it easy.

Connecting Sources and Targets

Every time you use binding, you must supply a source for the data, and a target (normally, a dependency property of some user interface element). Figure 1 demonstrates the basic concepts of binding in XAML. As you can see, the binding source can be any property of any CLR object. The binding object connects this source to the binding target, which must be a dependency property of some object that inherits from FrameworkElement (all the standard
controls inherit from this base class, and just about every property of these controls is a DependencyProperty object.)

introbinding

Figure 1. The Binding object connects the binding source and target.

Although you can generally work blissfully unaware of this fact, when you use a binding in XAML you’re actually creating an instance of the Binding class, setting various properties. XAML provides a markup extension that hides this fact, as you’ll see, but all the same, you’re working with a Binding class instance.

TIP: If you want to create a binding in code, you’ll always need to create an
instance of the Binding class, and set its various properties to match the
properties you would otherwise set in XAML markup.

The flow shown in Figure 1 indicates that binding can work in multiple directions. By setting the Mode property of the Binding instance, you can indicate whether you want the data to move in one direction whenever changes are made to the source, in one direction only once, in two directions, or not at all.

Value Converters

The Value Converter block in Figure 1 represents an instance of a class that implements the System.Windows.Data.IValueConverter interface. You’ll often need to use a value converter, especially if you want to do all of your binding declaratively, in the XAML markup. Imagine scenarios like these, in which value converters become necessary:

  •  You want to select a customer from a ListBox, and display the combined FirstName and LastName fields in a TextBlock.
  •  You want to select a number value, and use that value to set the BorderThickness of a Border control. You can’t simply bind the number to the property, because the BorderThickness property of a Border is a Thickness object.

There are, obviously, infinite reasons to use a value converter, but unless you perform data binding declaratively (in the XAML markup, that is) there’s no reason to use one. But if you would like to simplify your applications and reduce the amount of code you must maintain, using declarative binding is a truly useful tool, and it requires value converters in order to be fully useful.

This post is an excerpt from the online courseware Presentation Foundation Using Visual C# 2010 course written by expert Ken Getz and Robert Green.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

  Robert Greenis is a Visual Studio expert and a featured instructor for several of our Visual Basic and Visual C# courses. He is currently a Technical Evangelist in the Developer Platform and Evangelism (DPE) group at Microsoft. He has also worked for Microsoft on the Developer Tools marketing team and as Community Lead on the Visual Basic team. Robert also has several years of consulting experience focused on developer training, and is a frequent speaker at technology conferences including TechEd, VSLive, VSConnections and Advisor Live.

Windows 8 Using XAML: Binding Colors

xamllogo_3

As you write applications, you often need to update the value of one element with information from another element. Often, you need to display information coming from a collection of objects in a list, or combo box. Or, perhaps you need to work with data coming from a data source, such as a database. In all these cases, the simplest solution is to bind data from a data source to a target element; in other words, you need binding capabilities.

This article investigates binding colors.

Displaying a List of Colors

The sample page, ColorListBox0, starts simply—it merely displays a list of color names in a ListBox control. Figure 1 shows the list, and, of course, without some extra help, it can neither display the colored rectangles, nor bind the background color to the selected color.

Figure 1

In order to see how ColorListBox0.xaml does its job, start by investigating the markup.

The Page.Resources element includes a reference to an instance of the ColorList class:

The ListBox and the Border use the following markup:

Binding Colors

The next version of the demonstration, ColorListBox1.xaml, adds one feature: it binds the selected color to the Background property of the Border control. Here, the Background property of the containing Border control changes to match the selected color, as shown in Figure 2.

Select a color from the simple list box

Figure 2

You can probably guess, at this point, how the binding works. The ListBox contains a collection of strings, each representing a color. When you select a color, you want to copy data from the SelectedValue property of the ListBox to the Background property of the Border control. If you examine the markup, you’ll find a Binding markup extension that does exactly that. Figure 3 below highlights the binding expression.

binding colors

Figure 3

TIP: If you’re thinking about such things, you might wonder how the color gets converted from a string (the name of the color) to an actual Brush (the type corresponding to the Background property of the Border control). Built-in type converters come to the rescue again! You could create your own type converter here, but it’s not necessary. The runtime engine can figure out what color corresponds to the name you select, and it applies that color as a SolidColorBrush to the Background of the Border.

Displaying the Color Rectangle

As a final step, the sample Page ColorListBox displays a list containing both the color names and a rectangle filled with the color. As you might imagine, this example uses a data template to create the layout for each row of the ListBox.

The data template needs a StackPanel with its orientation set to horizontal. Inside the StackPanel, the template needs a Rectangle control with its Fill property bound to the selected color, and a TextBlock control with its Text property bound to the selected color. In other words, the markup shown below from the sample page does the job.

The data template for ColorListBox.xaml

Note the use of the {Binding} markup extension—because the ListBox is bound to a collection of String objects, there’s no name to use to refer to each item in the list. Therefore you can only specify {Binding} as the markup extension, and XAML knows to use the entire value it finds in the ListBoxItem as the data source.

Of course, if you have a data template, you need to “hook it up” somewhere. Figure 4, below, shows the markup for the ListBox control, including a reference to the static resource whose key is ColorItemTemplate (look back at the Figure directly above to verify the key).

Hook up the data template in the ListBox’s markup

Figure 4

Given the data template and the various bindings, running the sample and selecting Color List Box displays the page shown in the Figure 2.

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.