> 正确的做法应该是这样: <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition 带着这个疑问很多年,微软终于给出了另一种方案VisualState.Setters: <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions </VisualStateGroup.Transitions> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver ,它指定<em>VisualStateGroup</em>中所有VisualState之间的过渡时间都是3秒,在这3秒中VisualState中的Double、Point和Color使用默认的线性插值方式进行动画转换。 这段XAML在Blend中对应“状态”面板里<em>VisualStateGroup</em>的“默认过渡”。 ?
RotateTransform,并起好名称: 可改变一下数值看看效果: 三、添加转换动画(视觉状态) 在组件布局代码的外面放置 VisualStateManager.VisualStateGroups,一个 VisualStateGroup -- 转换动画 --> <VisualStateGroup Name="ArmState"> <VisualState Name="Normal"> <Storyboard FillBehavior KeyTime="0:0:0.5" Value="30"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup VisualStateManager.GoToState 方法进行状态的切换,其中一个视觉状态名称的参数就使用了创建的枚举的字符串形式: 同时重写 OnApplyTemplate () 方法,在其中将相关视觉状态切换为初始值: 注意:之前定义 VisualStateGroup
其中“CommonStates”、“HeaderStates”称为VisualStateGroup,“Normal”、“PointerOver”等称为VisualState。 在同一个VisualStateGroup中的VisualState是互斥的,控件始终只能处于每组状态中的一种。例如,控件只能处于NoHeader状态,或者HasHeader状态。 编辑后结果如下: <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> 另外,VisualStateGroup.Transitions 节点定义了CommonStates在各个状态之间切换时的过渡动画。 需要注意的是不同VisualStateGroup之间尽量不要对同一个UI元素的同一个属性进行操作,否则会引起冲突。 这个主题不会详细讲解使用Blend修改VisualState,因为那会占用很多篇幅。
<VisualStateManager.VisualStateGroups> <VisualStateGroup </Storyboard> </VisualState> </VisualStateGroup > <VisualStateGroup x:Name="CommonStates"> > <VisualStateGroup x:Name="InputModeStates"> TouchInputMode" > </VisualState> </VisualStateGroup
其中这里的视图状态又分为了两个组“VisualStateGroup”。 先 以Button控件做个分析,Button共六个视图,分两个组。 这里我后先有了一个概念上的认识,各个VisualStateGroup中的视图状态是可以共存的,VisualStateGroup内部的视图状态只能同时出现一个。 主要就是讲了下VisualStateGroup的用法。
<vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup > <vsm:VisualStateGroup x:Name="SelectionStates"> > <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Unfocused"/> </vsm:VisualStateGroup
<VisualStateManager.VisualStateGroups> <VisualStateGroup </Storyboard> </VisualState> </VisualStateGroup > <VisualStateGroup x:Name="SelectionStates"> > <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Unfocused"/> </VisualStateGroup
<VisualStateManager.VisualStateGroups> <VisualStateGroup <VisualState x:Name="Disabled" /> </VisualStateGroup > <VisualStateGroup x:Name="SelectionStates"> </Storyboard> </VisualState> </VisualStateGroup
ScaleTransform /> </Border.RenderTransform> <VisualStateManager.VisualStateGroups> <VisualStateGroup > <VisualState x:Name="Normal" /> <VisualState x:Name="Pressed"/> </VisualStateGroup Pressed 两个,其中 Pressed 表示的是鼠标按下,因此可以通过在 Pressed 添加动画实现更改样式 <VisualStateManager.VisualStateGroups> <VisualStateGroup To="0.5" /> </Storyboard> </VisualState> </VisualStateGroup </VisualState> </VisualStateGroup
Silverlight的BusyIndicator: <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="VisibilityStates </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup > <VisualStateGroup x:Name="BusyStatusStates"> <VisualState x:Name="Idle"> <Storyboard VisualStateManager.VisualStateGroups> UWP的BusyIndicator <VisualStateManager.VisualStateGroups> <VisualStateGroup > <VisualStateGroup x:Name="BusyStatusStates"> <VisualState x:Name="Idle" /> <VisualState
BorderWidth="2"> <VisualStateManager.VisualStateGroups> <VisualStateGroup </VisualState.Setters> </VisualState> </VisualStateGroup
TemplateVisualState表明ControlTempalte中应该包含名为ExpandedStates的VisualStateGroup,其中包含名为Expanded和Collapsed的两种 另外还有名为ExpandDirectionStates的VisualStateGroup,其中包含RightDirection、LeftDirection、UpDirection和DownDirection > <VisualStateGroup x:Name="ExpandDirectionStates"> </VisualStateGroup> </VisualStateManager.VisualStateGroups> x:Name="ExpandedStates"> <VisualStateGroup.Transitions> <VisualTransition
<VisualStateManager.VisualStateGroups> <VisualStateGroup </Storyboard> </VisualState> </VisualStateGroup <VisualStateManager.VisualStateGroups> <VisualStateGroup </Storyboard> </VisualState> </VisualStateGroup
<VisualStateManager.VisualStateGroups> <VisualStateGroup <VisualState x:Name="Disabled" /> </VisualStateGroup > <VisualStateGroup x:Name="SelectionStates"> </Storyboard> </VisualState> </VisualStateGroup
<VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SelectionStates"> <VisualStateGroup.Transitions> UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" /> </VisualStateGroup.Transitions </Storyboard> </VisualState> </VisualStateGroup
<VisualStateManager.VisualStateGroups> <VisualStateGroup </Storyboard> </VisualState> </VisualStateGroup <VisualStateManager.VisualStateGroups> <VisualStateGroup </Storyboard> </VisualState> </VisualStateGroup
</Grid.Background> <ContentPresenter /> <VisualStateManager.VisualStateGroups> <VisualStateGroup RevealBrush.State)" Value="Pressed"/> </VisualState.Setters> </VisualState> </VisualStateGroup > <VisualStateGroup x:Name="DisabledStates"> <VisualState x:Name="Enabled"/> Root.RevealBorderThickness" Value="0"/> </VisualState.Setters> </VisualState> </VisualStateGroup
<VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SelectionStates"> <VisualStateGroup.Transitions> UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" /> </VisualStateGroup.Transitions </Storyboard> </VisualState> </VisualStateGroup
</Grid.Background> <ContentPresenter /> <VisualStateManager.VisualStateGroups> <VisualStateGroup RevealBrush.State)" Value="Pressed"/> </VisualState.Setters> </VisualState> </VisualStateGroup > <VisualStateGroup x:Name="DisabledStates"> <VisualState x:Name="Enabled"/> Root.RevealBorderThickness" Value="0"/> </VisualState.Setters> </VisualState> </VisualStateGroup
VusialState.Storyboard控制VisualState的最终值,过渡动画由VisualStateGroup.Transitions控制,这在以前的 这篇文章 中有介绍过: <Border }" CornerRadius="3" SnapsToDevicePixels="true"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ExpansionStates"> <VisualStateGroup.Transitions> <VisualTransition </VisualTransition.GeneratedEasingFunction> </VisualTransition> </VisualStateGroup.Transitions </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup