Last time we covered breaking our theming out into an external file, and how to style all instances of a given UI element. We left off needing to know the details of how to style more complicated items like buttons and their mouse-over and mouse-down appearances - that is what we will cover in this final part of the series.

The biggest thing we need to keep in mind with items like buttons or comboboxes is that their appearance can drastically differ based on a computer's operating system. You can get a feel of this by changing the Foreground of a button in Vista and seeing how when a button has focus its fill actually pulsates from the normal appearance to the mouseover appearance and back - this animation is unique to Vista and not seen in XP.

(click 'read more' for the rest of the article..)

Last time we covered how to break out colors from our XAML dialog into separate color definitions in the Page.Resources section of our XAML. After doing this the next question is something like "how do I break out the color, font size, font face, etc. from each of my textbox definitions", and "how can I break these styling definitions out to a separate file" - those are what we will cover in this part of the series.

After breaking out my colors last time my footer definition ended up something like this:

    <!-- bottom panel (ok & cancel buttons) -->

    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" 

            FlowDirection="RightToLeft" Height="32" 

            Background="{StaticResource footerFillBrush}">

      <Button Width="72" TabIndex="45" Margin="2,2,2,2">Cancel</Button>      

      <Button Width="72" TabIndex="40" Margin="2,2,2,2">OK</Button>      

    </StackPanel>

It's cool that my background color isn't hard-coded now, but all the other styling elements are still hard-coded - that is where Style definitions come in. Style definitions basically allow you to define all the properties that should be set on an element in one spot. You can then assign the Style you created to a textbox, or a label, or any other UI element you might want to style. You give the Style a Key name just like you would a color definition and then tell the UI element to make use of that Style (there is another way to use styles across all items of a given type instead of specifying which one to use for every UI element - we will cover that towards the end of this article).

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

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..)

So after two or three weeks of playing around with WPF/XAML I figured the best place to go next was to try and do some dialogs like I might do today in Windows Forms. I wrote these by hand using the Kaxaml tool mentioned on the recent Scott Hanselman podcast, and if you have that installed you should be able to make use of the .xaml files attached to this post pretty easily.

Keep in mind that this XAML is by hand (with Kaxaml's intellisense), not created via Blend or VS2008, and the XAML is probably atrocious to XAML experts - that's sort of the point. I'll be referring back to this project as I improve it - this post is just the initial post.

A simple dialog

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