Understanding Windows Presentation Foundation Data Binding

Windows Presentation Foundation helps you to create rich user interfaces for your application. In order to create such rich user interfaces XAML, the XML based markup language has been developed by Microsoft. This has a rich data binding model too. Data binding is an important part in any application.

· One method is to create control, which doesn't know anything about data portion and set the values programmatically whenever controls are loaded.

· Another method is to define controls and data source and bind them using binding property. Here framework decides how to set the control's content property.

The second approach is more efficient way of doing things especially when the program involves large amount of data manipulation.

The following sample code shows how a data for the control can be set using the first method using XAML and C#.

<Window x:Class="SampleCS.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SampleCS"
Loaded="Window1_Loaded"
>
<StackPanel>
<TextBlock HorizontalAlignment="Center"
FontWeight="Bold">
BlogEditor
</TextBlock>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<ListBox Name="entryListBox"
Height="300"
SelectionChanged="entryListBox_Changed"/>
<Grid Width="500" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">Title:</TextBlock>
<TextBox Grid.Row="0" Grid.Column="1" Name="titleText" />
<TextBlock Grid.Row="1" Grid.Column="0">Url:</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1" Name="urlText" />
<TextBlock Grid.Row="2" Grid.Column="0">Date:</TextBlock>
<TextBox Grid.Row="2" Grid.Column="1" Name="dateText" />
<TextBlock Grid.Row="3" Grid.Column="0">Body:</TextBlock>
<TextBox Grid.Row="3" Grid.Column="1"
Name="bodyText"
TextWrapping="Wrap" />
<Button Grid.Row="4"
Grid.ColumnSpan="2"
Grid.Column="1"
Click="updateButton_Click">
Update
</Button>
</Grid>
</StackPanel>
</StackPanel>
</Window>

The above code is for layout of controls in the window to display data.

XmlDocument myBlog = new XmlDocument();
const string myBLOGFileName = @"c:\test.RSS";

public Window1()
{
InitializeComponent();
blog.Load(myBLOGFileName);
}

void Window1_Loaded(object sender, RoutedEventArgs e)
{
FillListBox();
}

void FillListBox()
{
blogListBox.Items.Clear();

XmlNodeList nodes = myBlog.SelectNodes("//item");
foreach (XmlNode node in nodes)
{
ListBoxItem item = new ListBoxItem();
item.Tag = node;
item.Content = node["title"].InnerText;
blogListBox.Items.Add(item);
}
}

void blogListBox_Changed(object sender, RoutedEventArgs e)
{
if (blogListBox.SelectedIndex != -1)
{
XmlNode node = ((ListBoxItem)blogListBox.SelectedItem).Tag as XmlNode;
if (node != null)
{
titText.Text = node["Title"].InnerText;
urlText.Text = node["Guid"].InnerText;
dtText.Text = node[PubDate"].InnerText;
bodyText.Text = node["Description"].InnerText;
}
}
}

The above code is for populating the controls with data, when appropriate event occurs.

Approach 2: Using DataBinding features of WFP.

<XmlDataProvider x:Key="RssFeed" Source="c:\ test.RSS" />

<ListBox Name="blogListBox"
Height="300"
ItemsSource="{Binding Source={StaticResource RssFeed}, XPath=//item}"
>

<DataTemplate>
<TextBlock Text="{Binding XPath=Title}" />
</DataTemplate>

<Grid Width="500"
Margin="5"
DataContext="{Binding ElementName=blogListBox, Path=SelectedItem}" >

<TextBlock Grid.Row="0" Grid.Column="0">Title:</TextBlock>
<TextBox Grid.Row="0" Grid.Column="1"
Name="TitleText"
Text="{Binding XPath=title}" />
<TextBlock Grid.Row="1" Grid.Column="0">Url:</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1"
Name="urlText"
Text="{Binding XPath=Guid}" />
<TextBlock Grid.Row="2" Grid.Column="0">Date:</TextBlock>
<TextBox Grid.Row="2" Grid.Column="1"
Name="dateText"
Text="{Binding XPath=PubDate}" />
<TextBlock Grid.Row="3" Grid.Column="0">Body:</TextBlock>
<TextBox Grid.Row="3" Grid.Column="1"
Name="bodyText"
TextWrapping="Wrap"
Text="{Binding XPath=Description}" />

The above code in XAML accomplishes the task simply by marking some declarative statements.

Thus we can bind different objects using the Binding object.