Silverlight utility tip series: 70. Visual status group VisualStateGroup of Silverlight

A visual state is the appearance of a control in certain States, such as MouseOver, Focused, Unfocused, and Normal. In these States, some States cannot coexist. We divide these mutually exclusive states into the same group, which is called the visual state group. Similarly, States in multiple visual state groups can coexist.

VisualStateManager is the visual status manager, which contains multiple visual status groups.

VisualStateGroup is a visual state group that contains multiple mutually exclusive visual states.

VisualStateGroup. Transitions is the definition of visual state change, GeneratedDuration is the state change time, From what status, To what status

VisualState is the visual state, the definition name, and the internal is the modification of the control's appearance when the state changes.

   <VisualStateManager.VisualStateGroups>        <VisualStateGroup x:Name="CommonStates">            <VisualStateGroup.Transitions>                <VisualTransition GeneratedDuration="0:0:0.5" To="MouseOver"/>                <VisualTransition GeneratedDuration="0:0:0.5" To="Normal"/>            </VisualStateGroup.Transitions>            <VisualState x:Name="Normal">                <Storyboard>                    <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="(UIElement.Opacity)"                                         Storyboard.TargetName="Root" d:IsOptimized="True"/>                </Storyboard>            </VisualState>            <VisualState x:Name="MouseOver"/>            <VisualState x:Name="Disabled"/>        </VisualStateGroup>    </VisualStateManager.VisualStateGroups>

You can view the visual status of the control in the background code "go to definition". For example, you can view the visual status of the CheckBox and the visual status group:

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1H941M96-0.png "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1H941M96-0.png "/>

Next, I want to hide the scroll bar of ScrollViewer when the mouse is not moved to it. Now we can achieve this through visual status groups.

A. Use Blend to open the previous instance, right-click the ScrollViewer control, and choose edit template from the shortcut menu. For example:

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1H9414031-2.png "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1H9414031-2.png "/>

B. In the pop-up window, rename the style and select "application" as the position, for example:

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1H9413344-4.png "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1H9413344-4.png "/>

C. Select the corresponding ScrollBar control after the creation.
650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1H9415000-6.png "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1H9415000-6.png "/>

D. right-click "VerticalScrollBar" and repeat the preceding actions A and B to obtain A copy of the ScrollBar style in the vertical and horizontal directions. In this case, select the Normal view and click Scrollbar to display its attributes, set the Opacity attribute value to 10% in appearance, for example:

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1H941OT-8.png "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1H941OT-8.png "/>

E. Set excessive * --> Normal to 0.5 seconds gradient, for example:

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1H941F94-10.png "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1H941F94-10.png "/>

F. Similarly, Set * --> the MouseOver view to a gradient of 0.5 seconds to achieve the desired effect. Its vertical scroll bar achieves the effect:

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1H9412H2-12.png "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1H9412H2-12.png "/>

To download the source code, click slvisualstategroup.zip.

 

 

This article is from the "Cheng Xingliang-Silverlight" blog, please be sure to keep this source http://chengxingliang.blog.51cto.com/3972944/901461