1. Technology

WPF Tutorial Part 4: A First Introduction to WPF and XAML for Visual Basic

Data Binding with and WPF and XAML

By

Updated December 12, 2009

If you haven't looked at part 1 of this series, you might want to go back and check it out first. Also, all code here is based on VB.NET 2008 Express, to be certain that you can use totally free software.

In part 3, installed fonts were added to a ListBox with this statement:

ItemsSource="{x:Static Fonts.SystemFontFamilies}"

This is a "special case" of something that is more generally called "data binding" in WPF. In this case, the .NET Framework provides the collection. More generally, data is bound to a control using a syntax called "markup extensions". This lets you assign data to controls declaratively rather than writing code to do it. The code is provided by WPF.

Starting at the beginning, let's see how data can be bound to one of the new WPF controls, the TextBlock. To simply put text into a TextBlock, this syntax can be used:

<TextBlock
   Text="Whatever"
/>

But we can also get the text to display in the TextBlock and specify the font used to display it using binding, and the code from part 3.

<TextBlock
   Text="{Binding ElementName=DisplayText,
   Path=Text}"
   FontFamily="{Binding ElementName=SysFonts,
   Path=SelectedItem}"
   . . .

Note that there are two data bindings. The Text ElementName ties this TextBlock to a TextBox component further down the form:

<TextBox x:Name="DisplayText" . . .

The FontFamily ElementName ties it to the selected font:

<ListBox x:Name="SysFonts" . . .

The Path attribute is a property of the object used. Text is a property of the TextBlock and SelectedItem is a property of the ListBox.

Simlarly, the FontSize can be bound to a Slider control this way:

FontSize="{Binding ElementName=FontSizeSlider,
Path=Value}"

This is part of another new property, DataContext. (The new LINQ technology also has a DataContext property. This is the FrameworkElement.DataContext property, however, and it's not the same.) To illustrate this, you could set the DataContext of the whole TextBox and then simply use that for one of the FontSize binding. (Note that Text and FontFamily would still have to have different Binding specified.)

<TextBlock
   DataContext="{Binding ElementName=FontSizeSlider,
   Path=Value}"
   . . .
   FontSize="{Binding}"

The advantage of this is that the DataContext can be inherited. For example, the DataContext above returns the Value property of the FontSizeSlider. You could place an Ellipse object inside the TextBox and resize that with the slider.

<Ellipse Height="{Binding}" Width="{Binding}" Stroke="Black" />

Not all properties can be used in a Binding like this. WPF includes a new feature called "dependency properties". In addition to being able to participate in a Binding, a dependency property can be used in styling, animation and other features. So the question is, how do you tell if something is a dependency property?

The answer right now is that you have to check Microsoft's documentation.

To see this in action, you can add another TextBox and include a Binding to the Slider control as shown in this illustration:

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

But nothing shows up in the TextBox. This illustrates another thing about WPF. No error is shown even if the coding is wrong. It just 'fails silently'. Web pages also work this way. The goal is to avoid creating a lot of confusing error messages for the user.

A different property, Padding(), that is a dependency property, is shown for comparison.

WPF also lets you control how the source and the target of the binding can update each other. Four Mode attributes let you set this:

  • OneWay
  • TwoWay
  • OneTime
  • OneWayToSource

Here's the complete XAML code.

<Window x:Class="Window1"
xmlns=
   "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=
   "http://schemas.microsoft.com/winfx/2006/xaml"
Title="Display Fonts" Height="250" Width="500">
<DockPanel>
   <ListBox x:Name="SysFonts" Width="150"
      ItemsSource="{x:Static Fonts.SystemFontFamilies}"
      />
   <StackPanel
      VerticalAlignment="Stretch">
      <TextBlock
         Text="{Binding ElementName=DisplayText,
         Path=Text}"
         FontFamily="{Binding ElementName=SysFonts,
         Path=SelectedItem}"
         FontSize="{Binding ElementName=FontSizeSlider,
         Path=Value}"
         DockPanel.Dock="Top"
         VerticalAlignment="Top"
         HorizontalAlignment="Stretch"
         Height="60"
         />
      <Slider x:Name="FontSizeSlider"
         Minimum="8" Maximum="64" Interval="4"
         HorizontalAlignment="Stretch"/>
      <TextBox x:Name="DisplayText"
             DockPanel.Dock="Bottom"
             Text="This is sample Text"
             HorizontalAlignment="Stretch"
             />
   </StackPanel>
</DockPanel>
</Window>

In the next installment of this introduction, we finally write some VB.NET code that ties together with the XAML that we've been studying up to now. Part 5 is Routing events up and down the visual tree!

  1. About.com
  2. Technology
  3. Visual Basic
  4. Using VB.NET
  5. WPF Tutorial Part 4: A First Introduction to WPF and XAML for Visual Basic Programmers

©2014 About.com. All rights reserved.