navigation
 Thursday, July 17, 2008

If you've ever edited a template in Microsoft Expression Blend, you'll be able to relate to this blog. Woah - that's a lot of code!  For those of use whose first language is something other than XAML, the default styles generated in Blend are pretty intimidating. Now, I know there are gurus out there who know exactly what every one of those settings and templatebindings do, but for the rest of us, there has got to be a simpler place to start. Well, there is. It's a handy little download you can get straight from your Visual Studio help called ControlTemplateExamples. To find this download, open your Visual Studio Help and search for "Styling with ControlTemplates".  That should get you to the page below.  Then click the "Download" link in the center right of the screen.  Now, unzip your project, open in Visual Studio (you must have the WPF package installed), and welcome to the world of simple styling!  You now have a simplified control template example for all your basic controls.

  searchpic

To demonstrate the difference, here's the default template for a checkbox generated by Expression Blend.


BlendXAML

Now, that's before I have to start making my own changes.  In fact, all that came from the very simplest checkbox.

blog7_17_08_plaincheckbox

What if all I want is a rounded box instead of the standard square one, and I want the box itself larger?  Where do I start?  Where are all those templatebindings, and how do I change them?  This complexity, combined with the lack of intellisense to help me out can get pretty frustrating.  Now, what does it look like in the simplestyles project that we downloaded?

VSXAML

So let's look at some of the differences here.  By lines of code, they're not all that different, in fact my so-called "simple" one is actually longer.  But here, all the trigger setters are explicitly set, you can see what properties are going to change on each one, and that whole Windows_Microsoft_Themes section is replaced with what looks like pretty clear code.  So our changes that we wanted?  Well, to round the corners I just change the CornerRadius of the Border, and to change the size I can adjust the Width and Height right there.

<Border x:Name="Border" Width="20" Height="20" CornerRadius="4" Background="{StaticResource NormalBrush}"
BorderThickness="1" BorderBrush="{StaticResource NormalBorderBrush}">
<Path Width="12" Height="12" x:Name="CheckMark" SnapsToDevicePixels="False"
Stroke="{StaticResource GlyphBrush}" StrokeThickness="2"
Data="M 0 0 L 12 12 M 0 12 L 12 0" />
</Border>

I made a copy of the example into a new project, made my minor changes, and now I have a larger checkbox with rounded corners.  I also increased the size of the checkmark, which is an X in the simplestyles project.  I could just as easily change any of the brushes or trigger setters to get the exact look I want.  Wasn't that simpler?

image

The simplestyles project is a great starting point for making these kinds of changes to any type of control, and is invaluable for working with a control that is unfamiliar to you.  When customizing controls I often find myself with this project open in the background, just in case I need it.  If you happen to have trouble finding the download in your Help, here's a direct link