Bind Controls to RSS feed using WPF

Article
12/20/2006

Data Binding is the process that connects that data with the User Interface of your application. The easy communication between the two enables us to easily achieve a very clean separation of the UI and business logic, allowing designers and developers to work in parallel doing what they do best.

Support for data has been an afterthought in many previous technologies. “Windows Presentation Foundation,” however, was designed from the ground up with Data Binding in mind. Data Binding in “Windows Presentation Foundation” is extremely flexible because developers can link any Control to any type of data.

Here is a very simple example on how you can link controls to RSS feed by using XAML Pad ( It comes with Windows SDK). XAMLPad allows you to easily prototype and test the XAML content. This example will be link to an existing blogs' feed.

First, I define 2 labels (to display the blog's title and description), 1 list box (to list all the posts) and 1 frame (to display the selected post). I put all these controls in the StackPanel Control.

step 1

I put the ListBox and the Frame into another layout control - DockPanel and explicitly the docking for the controls.

step2

I have defined the UI, now I need to define my data source so that the controls. I define a resources section for the StackPanel object. At this section, i define an XmlDataProvider object and the controls can bind to data source by using the key attribute.

The next step involves creating the master detailed relationship for the data bound list box and frame objects.
The relationship needs to be synchronised so that whenever a post in the list box is selected, the contents of the post appear in the frame.
With that, I will create a data context at the DockPanel control. So that i can share the data among multiple controls.

Notice that the binding syntax is relative to the parent, so only the relative path needs to be specified.

You will notice that the data display at the list box is contained all items. In order for the items to display correctly at the list box, i need to apply data template to the list box.
I create a DataTemplate object at the resources section

<StackPanel.Resources>
  <XmlDataProvider x:Key="Blog" Source="https://www.microsoft.com/windowsvista/rss.xml"/>
  <DataTemplate x:Key="ItemTemplate">
   <TextBlock Text="{Binding XPath=title}"/>
  </DataTemplate>
</StackPanel.Resources>

Now I can apply the data template to my list box.
The final step is to set the IsSynchronizedWithCurrentItem property to true at the list box so that the frame will correctly display the contents of the current select list box item.

You simple application will look something like this:
sample

The complete code for this example is at below:
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<StackPanel.Resources>
  <XmlDataProvider x:Key="Blog" Source="https://www.microsoft.com/windowsvista/rss.xml"/>
  <DataTemplate x:Key="ItemTemplate">
   <TextBlock Text="{Binding XPath=title}"/>
  </DataTemplate>
</StackPanel.Resources>
  <Label FontSize="24" Content="{Binding Source={StaticResource Blog},
   XPath=/rss/channel/title}"/>
  <Label FontSize="18" FontStyle="Italic" Content="{Binding Source={StaticResource Blog},
    XPath=/rss/channel/description}"/>
<DockPanel DataContext="{Binding Source={StaticResource Blog}, XPath=/rss/channel/item}" Height="280">
  <ListBox IsSynchronizedWithCurrentItem="True"
  ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding}"
  DockPanel.Dock="Left" Width="300"/>
  <Frame Source="{Binding XPath=link}" DockPanel.Dock="Right"/>
</DockPanel>
</StackPanel>
</Page>

Comments

Anonymous
December 21, 2006
Dont forget you can even databind on loose xaml eg: http://slyi.members.winisp.net/xamlrss.xaml

Partager via

Bind Controls to RSS feed using WPF

Comments

Ressources supplémentaires