Visual state management in Silverlight 2 Part1

Overview

The control templates in WPF and Silverlight support the view of custom controls. The so-called appearance refers to the visual effect of controls, while the feeling is the responsiveness of controls interaction, for example, you can change the status of a widget by pressing the mouse or the widget to obtain the focus. Microsoft introduced a new Visual State Manager in Silverlight 2 Beta 2, which provides great convenience for us to create interactive control templates. Next, I will use several articles to introduce visual state management in Silverlight 2.

When defining a control, we need to strictly differentiate the visual effects of the control and the control logic, so that when we modify the control appearance, the control logic will not be affected. The component and state model proposed in Silverlight 2 Beta 2 can solve this problem well. In this article, we will first look at some basic concepts.

Parts (Parts)

The so-called part (Parts) refers to the elements in the space template. The control logic controls these Parts to complete some specific controls, but it does not care about the visual effects of these components, for a Silder control, as shown in:

The Silder control in consists of four parts: a Thumb control named HorizontalThumb, A RepeatButton control named HorizontalLargeChangeIncrease, A RepeatButton control named volume, and a FrameworkElement named HorizontalTemplate. These elements are controlled in the control logic. For example, when HorizontalLargeChangeIncrease is pressed, the slider moves to the right and HorizontalLargeChangeDecrease is pressed to the left.

Note that not all controls have components. Some controls may have no components. You can check the Silverlight 2 SDK.

Visual States)

A visual State refers to a series of States defined by a control, such as MouseOver and Pressed. It indicates that the control is in a specific logical state. As shown in the following figure, some visual states of the CheckBox control are defined:

By default, the CheckBox control is displayed as Normal. When the CheckBox is selected, it is displayed as Checked. When the Checked is null, the CheckBox is displayed as Indeterminate.

The visual state of the control is represented by the VisualState class in Silverlight 2. Its definition is very simple as follows:

public sealed class VisualState : DependencyObject{    public VisualState();    public string Name { get; }    public Storyboard Storyboard { get; set; }}

State Transition)

State Migration refers to the transition of a control from one State to another. For example, the transition process of a Button control from the MouseOver state to the Pressed state is defined through Storyboard.

Status migration is represented by the VisualTransition class in Silverlight 2. Its definition is as follows:

public class VisualTransition{    public VisualTransition();    public Duration Duration { get; set; }    public string From { get; set; }    public Storyboard Storyboard { get; set; }    public string To { get; set; }}

Status group (StateGroups)

A status Group stores all mutually exclusive states of the control in the same group, so that a status can only be in one group, the so-called mutex means that the control is not allowed to have two states in the group at the same time. For example, the Checked and Unchecked states cannot exist at the same time. Taking the CheckBox control as an example, let's take a look at its status group:

As shown in the preceding table, the CheckBox control has three status groups: FocusStates, CommonStates, and CheckStates. A CheckBox control can be in the Focused, MouseOver, and Indeterminate states at the same time because they are in different status groups. Now, what is the status of the CheckBox control ?" The answer should consist of three parts, one of the three status groups. Status group is a new concept proposed in Silverlight 2. It is provided by the VisualStateGroup class, except for the status group name attribute, maintains a set of visual states and a set of State migration, as shown in the following code:

public sealed class VisualStateGroup : DependencyObject{    public VisualStateGroup();    public string Name { get; }    public Collection<VisualState> States { get; set; }    public Collection<VisualTransition> Transitions { get; set; }}

Using status groups is a great model. In Beta 1, the CheckBox control has 12 states (in Beta 1, Focus is a part rather than a State ), these 12 states are combined by CommonStates and CheckStates, such as PressedUnchecked and MouseOverChecked. In Beta 2, when FocusStates is added, the CheckBox control has only 10 States in total.

The status and status Group of the control are declared through the TemplateVisualState feature, as shown in the following code:

[TemplateVisualStateAttribute(Name = "ContentFocused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "Checked", GroupName = "CheckStates")][TemplateVisualStateAttribute(Name = "Unchecked", GroupName = "CheckStates")][TemplateVisualStateAttribute(Name = "Indeterminate", GroupName = "CheckStates")][TemplateVisualStateAttribute(Name = "Pressed", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]public class CheckBox : ToggleButton{     // ......}

Visual status Manager

Let's take a look at the concept of Visual State Manager. With these concepts above, Visual State Manager is used in Silverlight 2, silverlight 2 provides the VisualStateManager class, as shown below:

public class VisualStateManager : DependencyObject{    public static DependencyProperty CustomVisualStateManagerProperty;    public VisualStateManager();    public static VisualStateManager GetCustomVisualStateManager(DependencyObject obj);    public static Collection<VisualStateGroup> GetVisualStateGroups(DependencyObject obj);    public static bool GoToState(Control control, string stateName, bool useTransitions);        protected virtual bool GoToStateCore(Control control, FrameworkElement templateRoot,         string stateName, VisualStateGroup group, VisualState state, bool useTransitions);        public static void SetCustomVisualStateManager(DependencyObject obj,         VisualStateManager value);}

The visual status Manager manages the status, status group, and status migration of controls.

Status Change

When an external event is triggered, the status changes and the status migration is triggered. The entire process is shown in the following flowchart:

Summary

This article introduces some basic concepts of visual state management in Silverlight 2. In the next article, we will use examples to see how to use visual state management to customize the view of controls.

This article first in IT168: http://publish.itpub.net/msoft/2008-07-02/200807021455296.shtml