解释如何为初学者使用VisualStateManager

Question

我对Xaml/WPF了解不多。我正在尝试为Windows 8 Metro应用程序设计自定义Button Style，其具有品红色背景，并在按下时具有蓝色背景。我知道我需要使用VisualStateManager，但我找不到任何对于这个主题知识水平较低的人有意义的在线资源。大部分内容都是基于假定的知识。以下是我目前所拥有的：

<Style x:Name="test" TargetType="Button">
        <Setter Property="Background" Value="Magenta"/>
        <Setter Property="Content" Value="Test style" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>                          
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <turn the background blue>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这段代码可能非常错误，但正如我所说，我一直在试图拼凑那些我不理解的信息来创建一个结果。

感谢您的时间。

- Ralt

---

我开始只是研究所有控件的默认样式模板。对于这个例子，我建议使用默认的按钮控件样式模板，并为您的目的进行编辑，而不是在最初几次尝试中从头开始。正如约翰指出的那样，Blend 对于这种类型的工作非常方便。 - Chris W.

Answer 1

不要试图手写它，作为初学者。WPF的原始机制（触发器）相当简单，但旨在用于较新的XAML平台上替代它的VSM更加冗长，并且专门设计用于设计工具。

为了避免很多麻烦，只需在Blend中进行编辑，然后您可以查看它生成的XAML，如果您想学习更多细节以便将来手动编辑。Blend体验相当直接 - 在状态面板中选择要编辑的状态，您将看到其预览。选定该状态时所做的任何更改都将作为该状态上的Storyboards应用。

- John Bowen

Answer 2

我相信在这里有很多人花时间解释如何创建可视化状态以及它们的用途。尽管如此，我还是想花点时间解释一些关于 VSM 的事情，我认为这些在文档中没有提到，但值得了解：

您已经知道可以在控件之间切换不同的图形表示方式。这些状态在作用域（VisualStateGroup）内是互斥的。这意味着您可以定义一个组，其中包含三个状态，例如 Regular、Pressed 和 MouseOver。在给定时间内只能应用组内的一个状态，但您可以将其与其他组结合使用，如 Writeable 或 Readonly States。

它们的正确使用方法：除特殊情况外，您通常会在控件内拥有一个名为 UpdateStates(bool useTransitions) 的单个方法，其中包含几个或多个 if 语句。您检查内部控件状态，如

if (this.IsReadOnly) -> VisualStateManager.GoToState("ReadOnlyState",...

UpdateStates 方法会在更改状态时被调用。这意味着您将拥有 DependencyProperties，对于每个相关的属性都需要 DPChangeHandler（在注册时）。在 ChangeHandler 中（以及其他需要的地方），只需调用 UpdateStates 方法，让您的控件决定激活哪个状态即可。

至少这就是 MS 在其控件内部实现的方式。

希望这能对您有所帮助。 :)

- Gope

---

感谢您的附注。 - Ralt