Smarty Pants Coding - Coding with a touch of flava

So I am working on a little side project - which hopefully I'll present in the coming month - and I wanted to make my window fill something more fancy than a solid color or a gradient - particularly I wanted to have a diamond pattern fill for the background. So, here are the steps I took and what I ended up with, download the XAML files and open them with Kaxaml if you want to check them out.

For my first try I did a few brief web searches and came across a few good articles to get me started - particularly Painting with Images, Drawings, and Visuals, DrawingBrush Class, and PathGeometry Class. Using these references I created my first try at a diamond fill (attached as diamond_stretchfill.xaml), which ended up something like this:

My next step was to get the diamond fill to not just be one big diamond, but a tiled diamond pattern. I did this with a minor change, specifically adding the Viewport property on the DrawingBrush (attached as diamond_tilefill.xaml), which ended up like this:

So I got the tiling working, but with one obvious problem - the diamonds stretch based on the size and aspect ratio of the window. Another quick search of the interwebs netted me an article on the TileBrush.ViewportUnits Property which lets you specify whether your units in the Viewport are either Relative or Absolute - in my case I wanted the sizing to be absolute, and not based on the window size.

I also wanted to my diamonds to have one gradient, and the window fill behind it to be another gradient across the full window. To do this I got rid of the black fill in the pattern and left that part transparent and I use one grid with the diamond tile background over another grid with my new gradient background (attached as diamond_tilefill_final.xaml). I also made the diamond tiling a bit transparent itself, and it turned out something like this:

I know this writeup wasn't all too exciting, but honestly I think the flair which will come from WPF apps won't be the over-the-top stylings, but the minor tweaks which make the UI pop a bit more than an old Windows Forms app. Also, I didn't find a diamond pattern fill example on my first search of the interwebs, so maybe this will help someone else out down the road.

PDC2008 is in less than a week - I can't wait.

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