WPF Styling Tutorial #1 – Button

June 25, 2009

The video of making a Button style consists of 3 parts:

Part 1 – Creating the style

Just create an empty style and set the properties of your button. Background, border, foreground, font family, font size and whatever you want. This is only for giving your button’s default properties.

Part 2 – Creating the template and the layout

In ControlTemplates you shouldn’t use directly defined colors. A ControlTemplate is not for telling WPF how to display a control in specific colors, but for telling how to display the control and its properties.¬†Use TemplateBindings so your template remains customizable. Notice that I used directly defined brushes, but those only white masks for giving MouseOver and Pressed effects without changing the background color.

Create an empty ControlTemplate and start to build up your layout. I have a Background border displaying the border and background colors, a Shine border that can display the MouseOver and Pressed effects, and a ContentPresenter showing the content. After your layout made, set RecognizesAccessKey to true on your ContentPresenter, so underscore characters are recognized as access key modifiers. For example after you set your content to ‘Click _here’, you can activate your button by pressing Alt+H.

Part 3 – Creating the triggers

This can be very various based on your needs. A typical button handle the MouseOver and Pressed states, and because it’s a control for input you should handle IsEnabled too. Besides you have many more options, for example you can visualize whether IsDefault set to true or not