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.