为多个 VisualStateGroups 实现 VisualStates 的正确方法是什么？

Question

这个问题是my previous question 和this related question 关于VisualStates 如何在 WPF 中工作的后续问题。

目前，我的理解是在不同的VisualStateGroups 中为同一属性设置动画可能会导致问题（请参阅链接的问题）。

要解决这些问题，就需要利用漏洞。 （也许漏洞不是正确的术语，但似乎解决方案不是 WPF 设计者想要的。）

我想知道在多个VisualStateGroups 中为同一属性设置动画而不引起不良副作用的正确方法是什么。如果不可能，为控件实现相同视觉行为的正确途径是什么？

我可以在MSDN找到一些相关文档：

控件始终处于每组的一个状态。例如，即使鼠标指针未悬停在 Button 上也可以具有焦点，因此处于 Focused 状态的 Button 可以处于 MouseOver、Pressed 或 Normal 状态。

这就引出了第二个问题……

如何提供仅在两个特定 VisualStates 处于活动状态时才应该出现的视觉行为？

以ToggleButton为例：

• 如果按钮选中，我想显示行为1。
• 如果按钮禁用，我想显示行为 2。
• 最后，如果按钮是Checked和Disabled，我想显示Behavior 3。

在上面的示例中，您将如何渲染第三个视觉行为？

Answer 1

对于您问题的第一部分，您将希望每个状态与每个状态的不同单独对象交互，而不是用每个 VisualState 击中相同的对象，例如；

    <VisualState x:Name="Disabled">
      <Storyboard>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledState" 
                                  Storyboard.TargetProperty="(UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
          </ObjectAnimationUsingKeyFrames>
       </Storyboard>
    </VisualState>
    <VisualState x:Name="Checked">
      <Storyboard>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedState" 
                                  Storyboard.TargetProperty="(UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
          </ObjectAnimationUsingKeyFrames>
       </Storyboard>
    </VisualState>

<!-- Each state interacts with its own object in your ControlTemplate ideally -->
<Border x:Name="CheckedState" Visibility="Collapsed"
        Background="Green"/>
<Border x:Name="DisabledState" Visibility="Collapsed"
        Background="White" Opacity=".5"/>

而不是一个对象共享属性更改，例如；

<VisualState x:Name="Disabled">
  <Storyboard>
      <ColorAnimation d:IsOptimized="True"
                      Duration="0"
                      Storyboard.TargetName="Background"
                      Storyboard.TargetProperty="(SolidColorBrush.Color)"
                      To="White" />
   </Storyboard>
</VisualState>
<VisualState x:Name="Checked">
  <Storyboard>
      <ColorAnimation d:IsOptimized="True"
                      Duration="0"
                      Storyboard.TargetName="Background"
                      Storyboard.TargetProperty="(SolidColorBrush.Color)"
                      To="Green" />
   </Storyboard>
</VisualState>

<Border x:Name="Background" Background="Blue"/>

根据您的第二个问题，A VisualState 将充当布尔值，因为它要么处于该状态，要么不处于该状态。要共享状态声明，您必须在某个地方或某处使用 MultiTrigger 或转换器添加更多技巧。

希望这会有所帮助。干杯

编辑添加：

所以你也可以使用VisualTransition，你可以像这样使用；

 <VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="CommonStates">
    <VisualStateGroup.Transitions>
      <VisualTransition From="Normal"
        GeneratedDuration="0:0:0.2"
        To="Checked">
        <VisualTransition.GeneratedEasingFunction>
          <ExponentialEase EasingMode="EaseIn" Exponent="7" />
        </VisualTransition.GeneratedEasingFunction>
      </VisualTransition>
      <VisualTransition From="Checked"
        GeneratedDuration="0:0:0.2"
        To="Normal">
        <VisualTransition.GeneratedEasingFunction>
          <CircleEase EasingMode="EaseIn" />
        </VisualTransition.GeneratedEasingFunction>
      </VisualTransition>
    </VisualStateGroup.Transitions>
    <VisualState x:Name="Normal" />
    <!-- etc, etc, etc -->

因此，您可以使用不同的缓动、生成的持续时间等。