More than just dynamic updating

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.