Blog

Windows 8 Using XAML: Binding Colors

By Ken Getz

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:

<local:ColorList x:Key="colorListSource" />

The ListBox and the Border use the following markup:

<Border
Width="500"
HorizontalAlignment="Left">
<ListBox Margin="25"
Name="DemoListBox"
HorizontalAlignment="Left"
Width="250"
ItemsSource="{Binding
Source={StaticResource colorListSource}}"/>
</Border>

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
Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.


This blog entry was originally posted January 07, 2013 by Ken Getz

XAML Windows 8