Still lovin’ WPF

In a previous  post I looked at why WPF was something to really take a look at. I posted a bare bones WPF page that just contained a status bar. In this post, I’d like to show how to spruce the WPF up with just a little bit of effort (and hopefully to demonstrate why I really like it).

Anyway, without further ado, here is the updated class:

<Window x:Class="WorkforcePF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Main Window" Height="450" Width="600">
    <Window.Resources>
        <LinearGradientBrush x:Key="MyBlueGradientBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFE3EFFF" Offset="0"/>
            <GradientStop Color="#FFD4E5FC" Offset="0.2"/>
            <GradientStop Color="#FFB3CFF5" Offset="0.6"/>
            <GradientStop Color="#FF89B3ED" Offset="1"/>
        </LinearGradientBrush>
    </Window.Resources>
    <DockPanel>
        <StatusBar Name="statusBar1" Background="{StaticResource MyBlueGradientBrush}" 
            Height="20" VerticalAlignment="Bottom" DockPanel.Dock="Bottom">
            <StatusBar.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="4*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </StatusBar.ItemsPanel>
            <StatusBarItem>Ready</StatusBarItem>
            <StatusBarItem Grid.Column="1">
                <TextBlock TextAlignment="Right">Set</TextBlock>
            </StatusBarItem>
        </StatusBar>
    </DockPanel>
</Window>

As you can see, we have declared a style (similar to the way you think of styles in CSS). The background of the statusbar is set to this style and, lo-and-behold, the status bar now has a nice blue gradient. In the next post, we’ll look at adding extra elements and see how the styling can help it to stand out more. 

Lovin’ WPF

Recently we’ve been moving more and more towards using WPF to deliver LOB applications (Line Of Business). It took me a while to persuade the team that WPF was something worth investing time and effort in, which is funny really because they normally jump at the chance to play with new technologies. So, how did I do it? Ironically - it was with a hugely trivial example; a status bar. Basically I showed them how the same code could be written in markup in two ways. The first one was:

<Window x:Class="WorkforcePF.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="300" Width="300">
  <DockPanel>
    <StatusBar Name="statusBar1" Height="20" VerticalAlignment="Bottom"
      DockPanel.Dock="Bottom">
      <StatusBar.ItemsPanel>
        <ItemsPanelTemplate>
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="4*" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition/>
            </Grid.ColumnDefinitions>
          </Grid>
        </ItemsPanelTemplate>
      </StatusBar.ItemsPanel>
      <StatusBarItem>Ready</StatusBarItem>
      <StatusBarItem Grid.Column="1" Content="StatusBarItem" />
    </StatusBar>
  </DockPanel>
</Window>

while the second one was:

<Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="StatusBarInWpf.Window1"
 x:Name="Window"
 Title="Window1"
 Width="640" Height="480">

 <Window.Resources>
  <ItemsPanelTemplate x:Key="StatusBarItemTemplate">
   <Grid>
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="4*"/>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
     <RowDefinition/>
    </Grid.RowDefinitions>
   </Grid>
  </ItemsPanelTemplate>
 </Window.Resources>

 <DockPanel>
  <StatusBar Height="20" DockPanel.Dock="Bottom" ItemsPanel="{DynamicResource StatusBarItemTemplate}">
   <StatusBarItem Content="Ready" Grid.Column="0"/>
   <StatusBarItem Content="StatusBarItem" Grid.Column="1"/>
  </StatusBar>
 </DockPanel>
</Window>

The thing I love about the second version is the way that the StatusBar template is removed from the actual implementation of the StatusBar, so you can move them into one place (currently in the Window.Resources but this could be put into a named template or the Application.Resources) and manage them really easily.

I won an armageddon button.

Woo hoo. At www.community-credit.com, I won a nuclear war USB hub. It’s really cool. Check it out at http://www.community-credit.com/CommunityCreditPrizePage.aspx. Just look under March 2008 prizes. If you haven’t joined Community Credit, then I suggest you do so pronto.