Why DataTemplates Rock!

In the recent Screencasts I did on creating an Occasionally Connected app my user interface consisted of a ListBox and a few buttons. The ListBox was used to display the list of Holidays read from a locally cached database. The application has now evolved where that early prototype has become the initial “selection screen” for the HolidayPlanner application.

Here is the screen using a ResourceDictionary (Resources\Simple.xaml) with the bare minimum required to be usable:

HolidaySelectionSimple

And here’s the XAML behind it:

<Window x:Class="ADOSyncSampleSP1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dm="clr-namespace:HolidayPlanner.DataModel"
xmlns:cm="clr-namespace:Spencen.PresentationLayer.Commands"
Title="Occasionally Connected Application Demo" Height="581.783" Width="551.777" Language="en-AU">
    <DockPanel Name="dockPanel1" VerticalAlignment="Stretch" LastChildFill="True">
<TabControl DockPanel.Dock="Top">
<TabItem Header="Plan">
<ToolBarTray>
<ToolBar Header="Select Holiday">
<Button cm:CommandBinder.Command="{Binding NewCommand}"/>
<Button cm:CommandBinder.Command="{Binding PropertiesCommand}"/>
</ToolBar>
<ToolBar Header="Configuration">
<Button cm:CommandBinder.Command="{Binding SecurityCommand}"/>
<Button cm:CommandBinder.Command="{Binding NetworkSettingsCommand}"/>
<Button cm:CommandBinder.Command="{Binding SettingsCommand}"/>
</ToolBar>
</ToolBarTray>
</TabItem>
<TabItem Header="Experience">
<ToolBarTray>
<ToolBar Header="Select Holiday" >
<Button cm:CommandBinder.Command="{Binding OpenCommand}"/>
</ToolBar>
</ToolBarTray>
</TabItem>
<TabItem Header="Review">
<ToolBarTray>
<ToolBar>
<Button cm:CommandBinder.Command="{Binding SynchronizeCommand}"/>
</ToolBar>
</ToolBarTray>
</TabItem>
</TabControl>
<ListBox Name="listBox1" ItemsSource="{Binding Holidays}" HorizontalAlignment="Stretch" 
ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility
="Visible"> <ListBox.InputBindings> <KeyBinding Command="ApplicationCommands.Open" Key="Enter"/> </ListBox.InputBindings> <ListBox.GroupStyle> <GroupStyle HeaderTemplate="{StaticResource HolidayGroupHeader}"/> </ListBox.GroupStyle> <ListBox.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Recycling"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </DockPanel> </Window>

What I love about WPF’s templating and styling system is that with a single line change to the App.xaml I can swap out the vanilla DataTemplates with something more appealing. So changing this:

<Application x:Class="ADOSyncSampleSP1.App"

   
xmlns
=http://schemas.microsoft.com/winfx/2006/xaml/presentation

   
xmlns:x
=http://schemas.microsoft.com/winfx/2006/xaml

    StartupUri
="Views/MainWindow.xaml">

    <
Application.Resources
>

        <
ResourceDictionary
>

            <
ResourceDictionary.MergedDictionaries
>

                <
ResourceDictionary Source
="Resources/Simple.xaml"/>

           
</ResourceDictionary.MergedDictionaries> 
        </
ResourceDictionary
>

    </
Application.Resources
>

</
Application>

To this:

<Application x:Class="ADOSyncSampleSP1.App"

   
xmlns
=http://schemas.microsoft.com/winfx/2006/xaml/presentation

   
xmlns:x
=http://schemas.microsoft.com/winfx/2006/xaml

    StartupUri
="Views/MainWindow.xaml">

    <
Application.Resources
>

        <
ResourceDictionary
>

            <
ResourceDictionary.MergedDictionaries
>

                   <
ResourceDictionary Source
="Resources/Standard.xaml"/>

           
</ResourceDictionary.MergedDictionaries> 
        </
ResourceDictionary
>

    </
Application.Resources
>

</
Application>

Changes the front screen as shown below without changing any of the behaviours (other than adding UI enhancements such as hot tracking etc.)

HolidaySelectionStandard

At this point I must admit I was feeling kinda proud of myself. But then two things happened to change this.

Firstly I watched DNR TV episode 115 where Billy Hollis shows how WPF allows developers to bring new user interface paradigms into their applications. Now my own user interface begins to look a little bit like “lipstick on a pig”. I can’t help looking through the veil and seeing that same old toolbar and listbox from the Windows 95 era.

Secondly, a few weeks ago I attended the first day of CodeCampSA. During this a guy by the name of Alan Boldock gave a very entertaining talk on his experiences creating appealing user interfaces using WPF. During this presentation he showed off some quick samples of the work his team had been doing. I was sitting in the audience putting together some final tweaks on my new Resources\Standard.xaml resource dictionary. Again, it was somewhat demoralizing, I couldn’t help but think that I just hadn’t embraced the potential that WPF could offer.

There was nothing for it – I had to come to grips with my “inner-designer”. I tried coaxing my alter-ego out by wearing the closest thing I could find to a turtleneck sweater. Bravely I cracked open Expression Design and painstakingly put together something that I could export out as the new DataTemplate for the Holiday class. So I add another line to the App.xaml to include the new DataTemplate, and switched the ListBox to be Horizontal rather than Vertical.

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary
Source
="Resources/Standard.xaml"/>

                     <ResourceDictionary Source="Resources/PhotoAlbum.xaml"/>

           
</ResourceDictionary.MergedDictionaries> 

Here’s the end result:

HolidaySelectionAlbum

Well, granted its not particularly artistic, nor innovative – but I still got a warm, fuzzy feeling seeing my new selection screen. [Or maybe that was just from the itchy old sweater? ]