The States Pane and WPF Controls

  • Article

Last October I described how to use the States pane in a WPF project with Blend 2 Service Pack 1. Things are even simpler with Expression Blend 3 so in this post I’ll remind you how to use the States pane with WPF controls.

As you may know, when you create a template for a Silverlight control, the States pane populates with States ready for you to select-and-design. This is because Silverlight controls are designed to work with States, and each Silverlight control advertises the States it works with. But WPF shipped before States did and consequently WPF controls know nothing about States. It’s actually the magic in the WPF Toolkit that makes WPF controls work with States. Blend 3 installs the WPF Toolkit for you automatically, so there is nothing extra you will need to do.

This means that when you create a new template for a WPF control, the States pane is empty initially. But it only takes a few moments to add the correctly-named States and from there you’re on par with the Silverlight experience and you’re ready to select-and-design as usual.

So, here’s a list of the WPF controls that work with States along with the state groups and states you’ll need to add.

Button, GridViewColumnHeader, RepeatButton

CommonStates:

        Normal, MouseOver, Pressed, Disabled

FocusStates:

        Unfocused, Focused

CheckBox, RadioButton

CommonStates:

        Normal, MouseOver, Pressed, Disabled

CheckStates:

        Unchecked, Checked, Indeterminate

FocusStates:

        Unfocused, Focused

ListBoxItem

CommonStates:

        Normal, MouseOver

SelectionStates:

        Unselected, Selected

FocusStates:

       Unfocused, Focused

ProgressBar

CommonStates:

        Determinate, Indeterminate

FocusStates:

        Unfocused, Focused

TextBox, RichTextBox

CommonStates:

       Normal, MouseOver, Disabled, ReadOnly

FocusStates:

        Unfocused, Focused

Hopefully this helps you to be more productive in WPF when working with states!

-Steve