Blog
Windows 8 Using XAML: Binding Colors
By Ken Getz | January 07, 2013
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:
<BorderWidth="500"HorizontalAlignment="Left"><ListBox Margin="25"Name="DemoListBox"HorizontalAlignment="Left"Width="250"ItemsSource="{BindingSource={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.
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.
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.
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).
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.
This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.
