The syntax that WPF uses for data binding can be confusing when you first encounter it. In fact, more than one way exists to declare a data binding in XAML. The most common method of declaring a binding uses a feature of XAML called markup extensions. We introduced markup extensions in Hour 2, “Understanding XAML,” and you may remember that they enable you to concisely describe something that would be awkward or too verbose in plain XAML.

Markup extensions are identified by curly brackets ({}), and a data binding extension always begins with the word Binding.

Let’s begin by examining the data bindings on one of the TextBlock elements in the Font Viewer. Consider the following markup:

<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
           FontFamily="{Binding ElementName=FontList,
                                Path=SelectedItem}"
           FontSize="10"
           TextWrapping="Wrap"
           Margin="0 0 0 4" />

We have two separate data bindings in this markup. The first binds the Text property of the TextBlock to the Text property of a TextBox named SampleText. Note that the Text attribute’s value is a data binding markup extension. Again, it’s important to emphasize that quotation marks are not allowed inside the markup extension. Markup extensions are not XML like the rest of XAML; rather, they are merely string values that are parsed when an application is compiled.

Our binding references two properties: ElementName and Path. The ElementName property tells the binding to look for an element named SampleText in the XAML and to use that as the source of the data. The Path property tells the binding where to find the specific data that interests us in relation to the data source. In this case, we are interested in the Text property on the source.

Examining the second binding on the TextBlock, we interpret the markup extension, {Binding ElementName=FontList, Path=SelectedItem}, to mean that we will use the SelectedItem property of an element named FontList as the data source.

In the Font Viewer, we bound a ListBox to the collection of currently installed fonts. The .NET Framework BCL provides this collection as a static property called SystemFontFamilies on the class System.Windows.Media.Fonts. This property returns an instance of type ICollection<FontFamily>. Anything that is enumerable can be bound to the ItemsSource property on the ListBox.

You may have noticed that we did not use the same syntax for binding the font collection to the ListBox as we did for binding the controls to one another. We used the following markup extension:

{x:Static Fonts.SystemFontFamilies}

This markup extension is used for referencing static value members on a class. Value members are fields, properties, constants, and enumeration values.

Technically, using x:Static is not a data binding, and WPF treats it a little bit different from standard data binding, but for a simple scenario such as this you can treat it the same.

As we’ve mentioned before, all the controls in WPF inherit from FrameworkElement. FrameworkElement has a property called DataContext, and it is incredibly useful when it comes to binding data.

DataContext is the “context” or the “starting point” from which the data binding is taking place. In our earlier examples, we explicitly provide a context for the binding with the ElementName property. The Path property points to the location of source data within the given context.

Additionally, if you set the DataContext for a given FrameworkElement, all the children of that element will have the same DataContext. In other words, a control’s DataContext is inherited from its parent.

Let’s consider a new feature for the Font Viewer that will help us demonstrate how DataContext works. Perhaps we would like to display the number of fonts that are currently installed. We know that Fonts.SystemFontFamilies has a Count that returns the number of items in the collection. We can add a ToolTip to the ListBox that will display the count.

Let’s modify the Font Viewer to add this new feature:

<Window x:Class="TeachYourselfWPF.FontViewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Teach Yourself WPF: Font Viewer"
        Height="480"
        Width="640">
    <DockPanel Margin="8">
        <Border DockPanel.Dock="Top"
                CornerRadius="6"
                BorderThickness="1"
                BorderBrush="Gray"
                Background="LightGray"
                Padding="8"
                Margin="0 0 0 8">
            <TextBlock FontSize="14"
                       TextWrapping="Wrap">
            Select a font to view from the list below.
            You can change the text by typing in the region at the bottom.
            </TextBlock>
        </Border>
        <ListBox x:Name="FontList"
                 DataContext="{x:Static Fonts.SystemFontFamilies}"
                 DockPanel.Dock="Left"
                 ItemsSource="{Binding}"
                 Width="160">
        <TextBox x:Name="SampleText"
                 DockPanel.Dock="Bottom"
                 MinLines="4"
                 Margin="8 0"
                 TextWrapping="Wrap"
                 ToolTip="Type here to change the preview text.">
                    The quick brown fox jumps over the lazy dog.
        </TextBox>
        <StackPanel Margin="8 0 8 8">
            <TextBlock Text="{Binding Path=Count}" />
            <TextBlock Text="{Binding ElementName=SampleText,
                                      Path=Text}"
                       FontFamily="{Binding ElementName=FontList,
                                            Path=SelectedItem}"
                       FontSize="10"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4" />
            <TextBlock Text="{Binding ElementName=SampleText,
                                      Path=Text}"
                       FontFamily="{Binding ElementName=FontList,
                                            Path=SelectedItem}"
                       FontSize="16"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4" />
            <TextBlock Text="{Binding ElementName=SampleText,
                                      Path=Text}"
                       FontFamily="{Binding ElementName=FontList,
                                            Path=SelectedItem}"
                       FontSize="24"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4" />
            <TextBlock Text="{Binding ElementName=SampleText,
                                      Path=Text}"
                       FontFamily="{Binding ElementName=FontList,
                                            Path=SelectedItem}"
                       FontSize="32"
                       TextWrapping="Wrap" />
        </StackPanel>
    </DockPanel>
</Window>

Part of the magic of data binding comes from the WPF property system. The WPF property system allows properties to participate in data binding, styling, animation, and several other exciting features. A property that is registered with the WPF property system is called a dependency property.

A property must be a dependency property to be the target of a data binding. If you are not certain as to whether a property on a control is a dependency property, just check the official documentation. Microsoft makes a note in the description indicating whether the property is a dependency property.

Dependency properties include metadata about the property, such as the default value for the property, the default binding mode, and other miscellaneous items.

Dependency properties also provide automatic change notification. In the example earlier this hour, when we bound TextBox.Text to Slider.Value, the Slider.Value was the data source and a dependency property. Slider.Value automatically notified the data binding target because it was a dependency property.

Unlike the target of a data binding, data sources are not required to be dependency properties. However, if you want to use a binding mode other than OneWay, your properties need to implement some mechanism for change notification.

Other than dependency properties, WPF uses two methods for monitoring change notifications. The first is to raise an event in your property setter that is named after the property plus “Changed.” For example, if your property is FirstName, the setter should raise FirstNameChanged. WPF automatically checks for this event and updates data bindings accordingly. We’ll create a custom dependency property in Hour 11, “Output.”

The second method is to implement INotifyPropertyChanged on the class that owns the property. We’ll discuss that in detail in a later hour.