Before I even get into Styles and Templates I’d like to first make an attempt to get you in the right mindset. When you hear the name of a Control, like Button, you probably immediately get a mental picture of a typical generic button. (Your generic button might be different based on whether you spend most of your time in XP or Vista.)

For the rest of this post we’ll say that this mental image is wrong. The button displayed on the screen is just a simple visual shell for the user to interact with. In reality, the button is a complex piece of machinery some nice developer in Redmond put together for us. I tend to think of buttons, and all controls, as little engines we place into the big engine that is our application. (I warned you this would be heavy with metaphors.)

From this point on assume that whenever I reference a button, I actually mean any Control.

Now each of these button machines have a set of properties (Dependency Properties to be exact) that inform the button how it is supposed to work. When you use a button you can set each of its properties manually.

But this can get tiresome, especially if you are setting a lot of properties and you have to duplicate your work for multiple buttons with the same property values.

Wouldn’t it be easier if you could just create a list of properties with the proper values and pass them to your button? Well guess what…that’s exactly what Styles do!

Through the use of Setters, Styles allow you to set values to a list of properties and then pass this list to your button via its Style property. Or even better, you can hand the same style off to multiple buttons.

For fear of becoming too abstract here’s some xaml that could represent the last image.

And that’s what makes Styles so powerful! Now, as a developer you can simply say, “Listen up all you buttons! I’ve this here list of properties with values and I’d rather like it if you’d each take one and go about setting yourself up. You’d be saving me a lot of time and I’d really appreciate it.” Of course there’s no need to be this polite but with software I find it never hurts.

Let me go off course here for a minute on a minor rant. I really don’t like the name Style. It implies you’re defining the visuals for your control. Yes, many of the properties you can set will affect the control visually but not all of them. In actuality, it is the Template that determines how your control visually looks. Hmmm…this rant has turned out to be a nice segue into Templates.

So as I just mentioned, Templates are how a button is told to represent itself on the screen. This is why I said we shouldn’t think of buttons in terms of their visuals. This is because buttons don’t care what they look like. Basically the button has a blueprint, the value of its Template property, and when it is time for it to draw itself it checks this blueprint and the displays whatever it is told to. If you don’t give the button a specific blueprint to use it will just nab the default template from the system. (This isn’t 100% correct but for now we’ll run with it.)

Now there’s a huge bonus to having your button so decoupled from it’s visual representation. This allows you to make your own template and it can be whatever you want it to be! Want a circle button? Want a button that looks like a puppy running in place? Anything! Go crazy! For now I’m just going to make an Exclamation Button Template and pass it to two buttons.

You’ll note that, like Styles, I can create the template once and reference it infinite times over. This is beyond powerful! It saves time and makes sure you have consistency through out your application! I’m practically gushing here!

In case you were wondering, I actually did make an exclamation button. It took about 3 minutes in Blend. If you’d like to see the mark up just click the following image of the two Exclamation Buttons.

So I’ll bring things to a close by pointing out that since Template is one of your Controls many properties it can also be given a value in a Style instead of manually setting the Template property.

Hopefully I’ve given you an different insight on how powerful and useful Styles and Templates are when it comes to designing the look and feel of your application. For the sake of a brevity I kept this short and simple. In reality I barely scratched the surface when it comes to the power of Styles and Templates.