Browse DevX
Sign up for e-mail newsletters from DevX


Create Data-Aware Applications in "Avalon"—the Windows Presentation Foundation

In WPF you can bind UI elements to a wide variety of data sources, including XML data, Web services, as well as databases. Learn how data-binding works in the Windows Presentation Foundation with this sample project using an XML data source.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

n the first article in this series, I discussed how to create Windows Presentation Foundation (WPF; code named Avalon) applications using XAML. In a follow-up article, I discussed the new navigational model in WPF. In this third installment, I will explore another important concept in WPF programming—data binding.

In WPF you can bind UI elements to a wide variety of data sources, including XML data, Web services, as well as databases. Data binding is a big topic in WPF and it is beyond the scope of this article to discuss every nook and cranny of data binding. To keep things manageable, I will show you how you can data bind a typical WPF application to an XML data source and explain the nuts and bolts behind it. To make the example useful, I will build a simple RSS reader that accepts an RSS XML document and displays the various items in the document using data binding. Figure 1 shows the completed application.

Binding to a Static XML Source
To build the sample application in this article, you need Visual Studio 2005 Beta 2 with the WinFX SDK installed. Using Visual Studio 2005 Beta 2, create a new AvalonNavigation application (see Figure 2). Name the application DataBinding and click OK.

Figure 1. The Avalon RSS Reader Application: In this example, the DevX New Articles RSS feed is used to generate the data for the sample application.
Figure 2. Creating a New AvalonNavigation Application: Start your project in Visual Studio in the usual way, choosing the AvalonNavigation type.

What You Need
  • Microsoft Visual Studio 2005
  • Microsoft Pre-Release Software: Windows Presentation Framework ("Avalon") and Windows Communication Framework ("Indigo") Beta1 RC
  • The WinFX SDK

In the default Page1.xaml, you will first build the UI of the application by populating the page with the relevant XAML elements.

First, add a <DockPanel> element to the page and set its background color to "Cornsilk":

<Page x:Class="Page1" xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" > <DockPanel xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" Background="Cornsilk">

Add a <DockPanel.Resources> element to the page (see Listing 1). The <DockPanel.Resources> element allows you to define an XML Data source (also known as XML data island) to be used for this application. In this case, the XML source is an RSS document. The XPath attribute is set to "/rss/channel" as the starting node of the document tree so that later on you can simply refer to the child elements using relative paths. The XML data source is given the key RSSData. The code is shown in Listing 1.

Next, add a <DataTemplate> element to the <DockPanel.Resources> element. The <DataTemplate> element is used to bind the content of the XML data island with a control (in this case the TextBlock control). The TextBlock data template is bound to the <title> element (of the XML tree) and given the name RSSTemplate:

<DataTemplate x:Key="RSSTemplate"> <TextBlock FontSize="Small"> <TextBlock.TextContent> <Binding XPath="title"/> </TextBlock.TextContent> </TextBlock> </DataTemplate> </DockPanel.Resources>

Next, you will display a header ("Titles") on your page, as well as create a ListBox control to display all the titles (encapsulated within the <title> element) in the XML data island (see Figure 3). Note that you use the ItemsSource attribute to indicate the data source (Binding Source={StaticResource RSSData}, which is known as the compact binding expression) and the node at which to start looking (XPath=item).

You use the ItemTemplate attribute to apply a template to the control ({StaticResource RSSTemplate}). Finally, when a selection in the ListBox control changes, the TitleChanged event is fired (as specified in the SelectionChanged attribute):

<StackPanel> <TextBlock DockPanel.Dock="Left" FontSize="18" FontWeight="Bold" Margin="10" HorizontalAlignment="Left"> Titles </TextBlock> <ListBox HorizontalAlignment="Left" Margin="10,0,10,10" Width="300" Background="LightYellow" ItemsSource="{Binding Source={StaticResource RSSData}, XPath=item}" ItemTemplate="{StaticResource RSSTemplate}" SelectionChanged="TitleChanged" /> </StackPanel>

Figure 3. Binding XML Data to Data Controls: The XML for the RSS feed is bound to data controls in the application code.
When an item in the ListBox control is selected, the application displays the description of the item on the right-hand side of the page. In the next step you want to display the header ("Description"), followed by a <DockPanel> element containing a <TextBlock> element bound to the description element ({Binding XPath=description}). A second <DockPanel> element is used to display the URL associated ({Binding XPath=link}) with the selected item (see Figure 4):

<StackPanel> <TextBlock DockPanel.Dock="Left" FontSize="18" FontWeight="Bold" Margin="10" HorizontalAlignment="Left"> Description </TextBlock> <DockPanel HorizontalAlignment="Left" Name="dpDescription" Width="500"> <TextBlock Name="txtDescription" DockPanel.Dock="Top" FontSize="Small" HorizontalAlignment="Left" TextWrap="wrap" Margin="10,0,10,10" Background="Black" Foreground="White" TextContent="{Binding XPath=description}" /> </DockPanel> <DockPanel HorizontalAlignment="Left" Name="dpURL" Width="500"> <TextBlock Name="txtURL" DockPanel.Dock="Top" FontSize="Small" HorizontalAlignment="Left" TextWrap="wrap" TextContent="{Binding XPath=link}" Margin="10,10,10,10" Foreground="Blue"/> </DockPanel> </StackPanel> </DockPanel> </Page>

Figure 4. Displaying Detailed Description: The description and link for the selected RSS item are bound to the TextBlock controls. They are changed whenever the user selects an item in the ListBox control.
Finally, you need to service the TitleChanged() event that you specified earlier. In this event, you will change the DataContext property of the dpDescription and dpURL <DockPanel> elements whenever the user selects an item in the ListBox controls:

Partial Public Class Page1 Inherits Page Private Sub TitleChanged(ByVal sender As Object, _ ByVal args As SelectionChangedEventArgs) Dim lstbox As ListBox = sender If lstbox.SelectedItem IsNot Nothing Then dpDescription.DataContext = _ lstbox.SelectedItem dpURL.DataContext = lstbox.SelectedItem End If End Sub End Class

That's it! Press F5 to test the application. The items in the RSS XML document are displayed in the ListBox control. You can click on the items in the ListBox control to make the corresponding description and URL show up on the right side of the page (see Figure 1).

Thanks for your registration, follow us on our social networks to keep up-to-date