A Fancy Diamond Pattern Tiled Background in WPF
Submitted by smartyP on Tue, 10/21/2008 - 21:01So 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.
Attachment | Size |
---|---|
diamond_stretchfill.xaml | 1.36 KB |
diamond_tilefill.xaml | 1.39 KB |
diamond_tilefill_final.xaml | 1.67 KB |
Comments
Great post - thanks for
Great post - thanks for providing working xaml. I thought it was exciting because it solved the problem I was having :-)
That tile background looks
That tile background looks great but i think you should use a lighter color , i mean that blue and purple looks a little dark and gloom like the night try using a Sarasota tile pattern with lighter colors