Section 3.5. Binding Properties

3.5. Binding Properties

Another mechanism in XAML that can be used to declare the value of attributes is a bind declaration . A bind declaration allows you to set an attribute's value by referencing the value of another element. Bind declarations must be attached to a specific dependency property of a target element. Remember that dependency properties are static read-only properties of a CLR class that are exposed only through get and set accessor methods to support concepts such as binding. Properties are bound together in a bind declaration using the Binding element.

Binding elements are used to bind the source to target elements. If the dependency properties in the source elements change when the application runs, the dependency properties in the target elements will change as well. Basically, you're telling an attribute that its value should always be determined by evaluating some other attribute or data source. It's like assigning a value to one variable by assigning it to another, as shown in the following example:

     int a = 1;     int b;     b = a; 

The difference between code-based variable assignments and XAML binding is that in XAML, the association is permanent. The assignment of b = a in the code example happens only once, and, if a changes later, b doesn't follow suit. In XAML, the Binding keyword ties the values together permanently.

The syntax for a Binding element is as follows:

     <ElementName Attribute="{Binding Path=SimpleProperty, Mode=OneTime} /> 

The curly braces are a general indicator to the parser that the value contained in the braces is not a simple value. Instead, the first keyword within the braces indicates the type of special handling needed. The Binding statement at the beginning of the string indicates a binding declaration.

An example of how binding works is when you are tying together the content of two different elements, such as a Button and a TextBlock. In Example 3-15, every time the Button is clicked, the C# code (Example 3-16) in its codebehind handler will increment a static counter and change the content of the Button to include that count. The TextBlock will bind its own content attribute to the content attribute of the Button, so every time the Button is clicked, it too will change its contentautomagically through the use of the Binding element.

Example 3-15. Binding attributes: XAML

     <Page         xmlns="http://schemas.microsoft.com/winfx/avalon/2005"         xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"         x:>         <StackPanel >             <Button                 Width="150"                 Content="You have clicked 0 times!"                 Name="MyButton"                 Click="ButtonClicked"/>             <TextBlock>                 <TextBlock.TextContent>                     <Binding                         ElementName="MyButton"                         Path="Content"/>                 </TextBlock.TextContent>             </TextBlock>         </StackPanel>     </Page> 

Example 3-16. Binding attributes: C#

     using System;     using System.Windows;     using System.Windows.Controls;     using System.Windows.Navigation;     using System.ComponentModel;           namespace BindExample     {         public partial class Page1 : Page         {             static int clickCount = 0;             void ButtonClicked(object sender, RoutedEventArgs e)             {                 MyButton.Content="You have clicked " + ++clickCount + " times!";             }           }     } 

After compiling the application and running it, the content of MyButton is appropriately, "You have clicked 0 times!" (Figure 3-4).

Clicking on the Button executes the ButtonClicked handler detailed in Example 3-16. The counter increments and the Content of the Button is changed to include the count. Notice that nowhere in the code do you touch the TextBlock declared in Example 3-15. The Content of that TextBlock is bound to the Button's Content attribute by the Binding element, and whenever it changes, so will the content of the TextBlock. Clicking on the Button a few more times results in Figure 3-5.

You might think that this isn't very useful. Binding content attributes of one element to another isn't something you'll do very often, but the Binding element

Figure 3-4. Binding example on initial run

Figure 3-5. Binding example after a few clicks

can also be used for more common scenarios, such as binding a ListBox to an XML data source and then binding the attribute of a TextBlock to the selected value in the ListBox. Example 3-17 demonstrates binding an element to an XML data source.

Example 3-17. Binding to an XML data source

     <Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005"           xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">         <StackPanel >             <StackPanel.Resources>             <XmlDataSource                 x:Key="UserData"                 XPath="/Users">                 <Users xmlns="">                     <User >                         <Title>CEO</Title>                         <Name>Elisabeth</Name>                     </User>                     <User >                         <Title>CTO</Title>                         <Name>Galina</Name>                     </User>                     <User >                         <Title>CSO</Title>                         <Name>Donald</Name>                     </User>                     <User >                         <Title>CFO</Title>                         <Name>Victoria</Name>                     </User>                     <User >                         <Title>CIO</Title>                         <Name>Korey</Name>                     </User>                 </Users>                 </XmlDataSource>                 <DataTemplate x:Key="UserDataTemplate">                      <TextBlock FontSize="Small" Foreground="Red">                         <TextBlock.TextContent>                            <Binding XPath="Title"/>                         </TextBlock.TextContent>                      </TextBlock>                 </DataTemplate>             </StackPanel.Resources>            <ListBox                HorizontalAlignment="Left"                Margin="10"                Width="100"                Height="100"                Name="MyListBox"                SelectedValuePath="Name"                ItemsSource="{Binding Source={StaticResource UserData}, XPath=User}"                ItemTemplate="{StaticResource UserDataTemplate}"/>            <TextBlock                HorizontalAlignment="Left"                Margin="10">                <TextBlock.TextContent>                    <Binding ElementName="MyListBox" Path="SelectedValue" />                </TextBlock.TextContent>            </TextBlock>         </StackPanel>     </Page> 

In Example 3-17, there are three uses of the Binding element. It is first used as the value of the ListBox's ItemsSource attribute. This declaration tells the ListBox that it should get its items from the StaticResource UserData and to use the XPath User to determine what an item consists of. The second use of the Binding element, the ItemTemplate value, tells the ListBox how to display the data. The UserDataTemplate tells the ListBox that each item should be displayed as a text block with a small, red font and that the value shown is the User attribute Title (specified by the XPath="Title" declaration).

The final use of the Binding attribute appears within the TextBlock declaration. It binds the content of the TextBlock to the SelectedValue attribute of MyListBox. The great thing about this particular use of the Binding attribute is that there's no code necessary. When a User is selected from the ListBox, the TextBlock Content will automatically update to reflect that user's Name (Figure 3-6). The SelectedValuePath in the ListBox determines what value is displayed in the TextBlock when the selection changes.

Figure 3-6. Result of evaluating Example 3-17 in XamlPad

Basically, the ability to bind the attributes of an element to other elements and even data sources provides a non-coding method of manipulating data and display.