Many people say that Databinding is one of the more impactful of the features in WPF.
Namita wrote a great set of demos for her PDC talk about Databinding with WPF.
As part of a few talks (some VB customers, a Vista + WPF talk, a talk at the Borland Developer Conference), I used that demo.
I've finally gotten around to posting my version of it.
Here is a screen shot of the auction window:
If you click on the Map button in bottom left of that, a nice data visualization example is shown using a custom tree map control that I believe Kevin Moore wrote:
The app has a good separation between the data and the UI...
The items on the left of the auction window are just renderings for each AuctionItem in a listbox.
From Window1.xaml:
<ListBox ItemsSource="{Binding Path=.}"
LayoutTransform="scale .7 .7"
Grid.Column="0"
Name="itemDisplay"
/>
The rendering for each auction item is controlled by a data template that was specified in myapp.xaml declaratively.
<DataTemplate DataType="{x:Type local:AuctionItem}" >
<Viewbox>
<Grid Margin="0" Width="250" Height="200">
<Grid.LayoutTransform>
<ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
</Grid.LayoutTransform>
<!-- image element -->
<Ellipse
Width="200"
HorizontalAlignment="Right"
Margin="10"
>
<Ellipse.Fill>
<Binding Path="RemainingSeconds">
<Binding.Converter>
<local:ColorDateConverter/>
</Binding.Converter>
</Binding>
</Ellipse.Fill>
</Ellipse>
<Border HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="4" Margin="30" BorderBrush="#D2CFCF"
BorderThickness="1" Background="White">
<Image>
<Image.Source>
<Binding Path="Image"/>
</Image.Source>
</Image>
</Border>
<Viewbox Height="80" Width="80" Margin="10"
HorizontalAlignment="Right"
VerticalAlignment="Center"
>
<!-- clock background -->
<Grid>
<Ellipse Width="100" Height="100" Margin="4"
HorizontalAlignment="right"
VerticalAlignment="bottom">
<Ellipse.Fill>
<Binding Path="RemainingSeconds">
<Binding.Converter>
<local:ColorDateConverter/>
</Binding.Converter>
</Binding>
</Ellipse.Fill>
</Ellipse>
<!-- time remaining Days text -->
<TextBlock
FontSize="40px"
TextAlignment="Center"
Width="100"
HorizontalAlignment="right"
FontFamily="Segoe"
Foreground="#5B5C59"
VerticalAlignment="Bottom"
Height="80"
Text="{Binding Path=RemainingSeconds}"/>
<TextBlock FontSize="10px" Foreground="#AAFFFFFF" Height="36"
HorizontalAlignment="right" FontFamily="Segoe"
VerticalAlignment="Bottom"
TextAlignment="Center" Width="100" Text="SECONDS" />
<!-- hour hand -->
<Canvas HorizontalAlignment="Right"
VerticalAlignment="Bottom" Height="100" Width="100">
<Line StrokeThickness="3pt" Stroke="#6FFFFFFF"
X1="50" Y1="50" >
<Line.Y2>
<MultiBinding>
<MultiBinding.Converter>
<local:PosYConverter/>
</MultiBinding.Converter>
<Binding Path="RemainingSeconds"/>
<Binding Path="StartDate"/>
</MultiBinding>
</Line.Y2>
<Line.X2>
<MultiBinding>
<MultiBinding.Converter>
<local:PosXConverter/>
</MultiBinding.Converter>
<Binding Path="RemainingSeconds"/>
<Binding Path="StartDate"/>
</MultiBinding>
</Line.X2>
</Line>
<Ellipse Width="10" Height="10"
Canvas.Top="45" Canvas.Left="45"
Fill="#6FFFFFFF" />
</Canvas>
<!-- Clock chrome -->
<Ellipse Width="100" Height="100" HorizontalAlignment="right" Margin="4"
VerticalAlignment="bottom"
RenderTransform="scale 1 -1 translate 0 57" >
<Ellipse.Fill>
<RadialGradientBrush Center="0.5,0.1" RadiusX="1.5" >
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#AAFFFFFF" />
<GradientStop Offset="0.18" Color="Transparent" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="100" Height="100"
HorizontalAlignment="right" Margin="4"
VerticalAlignment="bottom" RenderTransform="scale 1 -1 translate 0 120" >
<Ellipse.Fill>
<RadialGradientBrush Center="0.5,0.2" RadiusX="1.2" >
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#66FFFFFF" />
<GradientStop Offset="0.35" Color="Transparent" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="100" Height="100"
HorizontalAlignment="right"
VerticalAlignment="bottom" Margin="4"
Stroke="VerticalGradient #66FFFFFF #44FFFFFF" StrokeThickness="1.5" />
<Ellipse Width="102" Height="102"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" Margin="4"
Stroke="VerticalGradient #11000000 #33000000" StrokeThickness="1.5" RenderTransform="translate 1 1" />
</Grid>
</Viewbox>
</Grid>
</Viewbox>
</DataTemplate>
Dig into the demo and go watch Namita's pdc talk!
Please let us know what you think.