In converting the old GDI+ application
that I talked about yesterday, I didn't have much use for INotifyPropertyChanged in the way I demonstrated. My application had an algorithm that processed some raw data and created a collection of objects that won't change during their lifetime.
But that doesn't mean that databinding didn't have
a lot to offer.
As we noted yesterday, you (should) have a reasonable domain model to hand, and if not you only need to introduce an appropriate layer of indirection and wahey - you're away. In this case we were binding to a collection of objects to produce a visual representation, kind of like a chart.
In WPF, they've kindly provided us with the ItemsControl. This is the 'control' from which other controls like the ListBox and his friends derive. We'll use this to create a very simple bar chart to prove the example.
But first we need some data. For this example I've chosen to embed Xml data right there in the Xaml - this way you can use XamlPad (ships free with .NET 3.0) to play around with the example. Our Xml data is contained inside an XmlDataProvider and added as a resource as follows:
<Page.Resources>
<XmlDataProvider x:Key="data">
<x:XData>
<Data xmlns="">
<Value>20</Value>
<Value>100</Value>
<Value>70</Value>
<Value>130</Value>
<Value>40</Value>
</Data>
</x:XData>
</XmlDataProvider>
</Page.Resources>
Next we add an ItemsControl and customise its ItemTemplate
<ItemsControl Margin="1" ItemsSource="{Binding Source={StaticResource data}, XPath=/Data/Value}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding XPath=.}" Height="10" Fill="Red" Stroke="Black" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
et Voila!
But we're most use to seeing bar charts laid out horizontally right? Don't worry - the WPF guys seem to have thought of everything so you're covered. You can even change the container that the ItemsControl uses.
<ItemsControl Margin="1" ItemsSource="{Binding Source={StaticResource data}, XPath=/Data/Value}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Height="{Binding XPath=.}" Width="10" Fill="Red" Stroke="Black" VerticalAlignment="Bottom" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Notice how we've now specified the use of a horizontally oriented StackPanel? Naturally, we had to swap the Height and Width parameters on the Rectangle too.
Binding to controls
Let's push the DataBinding bar a little further - literally. What if I wanted to control the width of my bars? Easy. Let's add a slider to the page and bind our Rectangle's Width to the value of the control.
<Rectangle Height="{Binding XPath=.}" Width="{Binding ElementName=barWidthSlider, Path=Value}" Fill="Red" Stroke="Black" VerticalAlignment="Bottom" />
and the slider at the bottom...
<Slider Width="100" Name="barWidthSlider" Minimum="1" Maximum="100" Value="10" SmallChange="2" LargeChange="10" HorizontalAlignment="Left"/>
Now as we move the slider, the width of all the bars change dynamically too.
Download the complete Xaml file to play with (zip).
For a truly compelling demonstration of this, check out
IanG's post on Harmonic Series Visualization.