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

Question

这个问题是我以前的问题和这个相关的问题关于VisualStates如何在WPF中工作的后续问题。

目前，我的理解是在不同的VisualStateGroups中动画相同的属性会导致问题(参见链接问题)。

为了解决这些问题，需要利用循环孔。(也许循环孔不是正确的术语，但看起来解决方案并不是WPF设计者想要的。)

我想知道在多个VisualStateGroups中动画相同属性的正确方法是什么，而不会产生不良的副作用。如果不可能，实现控件相同的视觉行为的正确路线是什么？

我在MSDN找到了一些相关的文档

控件始终处于每个组的一种状态。例如，即使鼠标指针不在按钮上，按钮也可以具有焦点，因此处于焦点状态的按钮可以处于MouseOver、按下或正常状态。

这就引出了第二个问题。

如何提供仅当两个特定的VisualStates处于活动状态时才会发生的可视行为？

以一个ToggleButton为例

• 如果按钮是选中的，我想显示行为1。
• 如果按钮是禁用的，我想显示行为2。
• 最后，如果按钮是选中的和禁用的，我想显示行为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"/>

根据你的第二个问题，一个VisualState将作为一个bool，因为它要么是，要么它不是处于这种状态。要共享一个状态声明，您需要在某个地方使用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 -->

所以你可以玩你不同的游戏，你产生的持续时间，等等。