WPF 中的视觉状态是什么？有人知道如何开始、理解和使用它吗？

Question

WPF 中的视觉状态是什么？有人知道如何开始、理解和使用它吗？

也许像一个完整的教程，因为我之前没有接触过Visual State，或者只是一个简单的示例代码。

谢谢。

Answer 1

WPF 中的视觉状态用于控制控件的外观。控件的状态可能会发生变化，然后控件的外观也会响应于状态变化而变化。例如，如果某个控件被按下/禁用/处于焦点状态，则它在每种状态下可能具有不同的外观。有一个关于如何使用 WPF 的触发机制来更改控件外观的示例here；这将为您提供一些有关更改控件外观的一般背景信息。 这里有一个关于 WPF 的很好的通用教程，这里有一个关于视觉状态的很好的解释。 如需更高级的使用，请参阅 Microsoft 提供的有关 Visual State Manager 的信息此处

Answer 2

视觉状态用于更改 wpf 控件在不同状态下的外观，例如以单选按钮为例，在获得焦点、单击或禁用时，它可能会以不同的方式显示，

视觉状态属于不同的视觉状态组，例如

1. 共同国家
2. 检查状态
3. 焦点国家

最常用的视觉状态是：

1. 鼠标悬停
2. 按下
3. 已禁用
4. 已检查
5. 未勾选
6. 不确定
7. 专注
8. 注意力不集中
9. 指针聚焦

给出了单选按钮样式中使用的视觉状态示例

<Style TargetType="RadioButton">
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Foreground"
            Value="{DynamicResource BlackBrush}" />
    <Setter Property="Padding"
            Value="1,4,0,0" />
    <Setter Property="HorizontalAlignment"
            Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Border Background="{TemplateBinding Background}">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" >
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource HpGray13Brush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource HpGray15Brush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource GreenBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource HpGray1Brush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                                                   Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource Gray1Brush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

Answer 3

Wpf 中的视觉状态控制一个或多个控件（一组属性）的外观，包括同时响应某些描述的事件的动画。使用 Microsoft Blend 可以更好地理解这一点。