One of the more obvious issues with the initial post of the dialog XAML code last night was all the hardcoded colors, so this post will be a quick example of how to use defined colors and gradients instead so that when you want to change the colors you don't have to go looking through all the XAML to find where the colors are to modify.

Here is a snippet of the original XAML, specifically the blue gradient header across the top of the dialog and the white text on it:

    <!-- Top Panel (icon, description, help, etc.) -->

    <StackPanel Orientation="Horizontal" Width="500" DockPanel.Dock="Top">

      <StackPanel.Background>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

          <GradientStop Color="Navy" Offset="0" />

          <GradientStop Color="MidnightBlue" Offset="1" />

        </LinearGradientBrush>    

      </StackPanel.Background> 

      ..

      <TextBlock Width="358" VerticalAlignment="Stretch" Padding="4,4,4,0" 

                 TextWrapping="Wrap" Foreground="White">

      ..

    </StackPanel>

 
The easiest thing to do right off the bat is to just take the LinearGradientBrush definition and move it up to a Resources section you create for the Page (or Window, etc.) - since we are working with a Page we will create a Page.Resources section right under the main Page definition:

  <Page.Resources>

    ..

    <!-- header panel styles -->

    <LinearGradientBrush x:Key="headerPanelFillBrush" StartPoint="0,0" EndPoint="0,1">

      <GradientStop Color="Navy" Offset="0" />

      <GradientStop Color="MidnightBlue" Offset="1" />

    </LinearGradientBrush>

    <SolidColorBrush x:Key="headerTextColor" Color="White" />

    ..

  </Page.Resources>

 
There are two brushes defined in that snippet - the 'headerPanelFillBrush' which is the blue gradient fill in the header, and the 'headerTextColor' which is the white color used for the text - these brushes will be referenced by the value we set for their 'x:Key' tag.

(click 'read more' to read the full article..)

The other corresponding change is shrinking up our initial code to reference these new definitions instead:

    <!-- Top Panel (icon, description, help, etc.) -->

    <StackPanel Orientation="Horizontal" Width="500" DockPanel.Dock="Top" 

                Background="{StaticResource headerPanelFillBrush}">

      ..

      <TextBlock Width="358" VerticalAlignment="Stretch" Padding="4,4,4,0" 

                 Foreground="{StaticResource headerTextColor}" TextWrapping="Wrap" >

      ..

    </StackPanel>    

 
The Background is now set to "StaticResource" followed by the name we specified for the brush inside of brackets. The "StaticResource" could be replaced with "DynamicResource" if we wanted the UI element to stay updated if the Resource were to change, but for right now all of our color definitions are static.

This change can be made in about a dozen places in last nights code. Once they are all changed you'll end up with a handful of brush definitions in your Page.Resources section so you can quickly change your color scheme. You've probably already realized that defining colors is cool and all, but setting the color / font / etc for every button on the form is kinda whack - so next we'll cover Styles and break the Resources section into an external resource file, and maybe make the dialog look a bit better while we are at it.