Wednesday, January 12, 2011

Where do my Visual States come from in Blend?

In Silverlight this is fairly straightforward. Here are the Visual States for a CheckBox, as displayed in Blend:
image_thumb.png

And here is the corresponding code for a CheckBox as provided by Reflector:
[TemplateVisualState(Name="MouseOver", GroupName="CommonStates"),
TemplateVisualState(Name="Normal", GroupName="CommonStates"),
TemplateVisualState(Name="Checked", GroupName="CheckStates"),
TemplateVisualState(Name="InvalidFocused", GroupName="ValidationStates"),
TemplateVisualState(Name="Disabled", GroupName="CommonStates"),
TemplateVisualState(Name="Unfocused", GroupName="FocusStates"),
TemplateVisualState(Name="Focused", GroupName="FocusStates"),
TemplateVisualState(Name="Pressed", GroupName="CommonStates"),
TemplateVisualState(Name="Unchecked", GroupName="CheckStates"),
TemplateVisualState(Name="Indeterminate", GroupName="CheckStates"),
TemplateVisualState(Name="Valid", GroupName="ValidationStates"),
TemplateVisualState(Name="InvalidUnfocused", GroupName="ValidationStates")]
public class CheckBox : ToggleButton
{
}

All those TemplateVisualState attributes give Blend the information it needs. It can just enumerate the metadata for the control, and present the UI.

How about WPF?

Read more: endjin blog