c# - 尝试使用 Xaml Storyboards 同时淡入一个元素并同时淡出另一个元素时出错

Question

我希望最终确定我的应用程序的外观，但很难将过渡动画应用到一个非常基本的问题上。

您可以在附件中找到我正在努力处理的代码。我已经注释掉了我在开发和原型(prototype)制作过程中使用的 setter。它们的工作方式与我预期的一样。

Storyboard过渡在任何形状或形式上都不起作用。只要我没有收到任何运行时错误，只添加一个 Storyboard转换与所有或任何 setter “有效”，但转换根本没有出现。

我想知道我是不是完全误解了 Storyboard的工作原理。

我得到的错误是:

 Multiple animations in the same containing Storyboard cannot target the same property on a single element.

这是简化的代码:

<Grid>
<VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="StateA">
                <!--<VisualState.Setters>
                    <Setter Target="FirstElement.Visibility" Value="Visible" />
                    <Setter Target="SecondElement.Visibility" Value="Collapsed" />
                </VisualState.Setters>-->
                <Storyboard>
                    <PopOutThemeAnimation TargetName="SecondElement"/>
                    <PopInThemeAnimation TargetName="FirstElement"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="StateB">
                <!-- <VisualState.Setters>
                    <Setter Target="FirstElement.Visibility" Value="Collapsed" />
                    <Setter Target="SecondElement.Visibility" Value="Visible" />
                </VisualState.Setters>-->
                <Storyboard>
                    <PopOutThemeAnimation TargetName="FirstElement"/>
                    <PopInThemeAnimation TargetName="SecondElement"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Rectangle Name="FirstElement"
               Fill="Blue"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Width="200"
               Height="200" 
               DoubleTapped="GoToStateB" />

    <Rectangle Name="SecondElement"
               Fill="Red"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Width="200"
               Height="200" 
               DoubleTapped="GoToStateA" />
</Grid>

后面有下面的简单代码:

 private void GoToStateA(object sender, DoubleTappedRoutedEventArgs e)
    {
        // do something
        VisualStateManager.GoToState(this, "StateA", true);
    }
    private void GoToStateB(object sender, DoubleTappedRoutedEventArgs e)
    {
        // do something else
        VisualStateManager.GoToState(this, "StateB", true);
    }

编辑:JustinXL 指出的“解决方案”是需要删除以下 Xaml 元素并且运行时错误消失:

            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>

我不太清楚为什么会这样(真正的错误或仅仅是一个晦涩的设计陷阱)。

Answer 1

实际上一个更简单的解决方案是完全删除 VisualStateGroup 中的 Transitions。

另请注意，我添加了一个 IsHitTestVisible 更改，以便 FirstElement 能够接收点击。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="StateA">
            <VisualState.Setters>
                <Setter Target="SecondElement.(UIElement.IsHitTestVisible)"
                        Value="False" />
            </VisualState.Setters>
            <Storyboard>
                <PopOutThemeAnimation TargetName="SecondElement" />
                <PopInThemeAnimation TargetName="FirstElement" />
            </Storyboard>
        </VisualState>
        <VisualState x:Name="StateB">
            <Storyboard>
                <PopOutThemeAnimation TargetName="FirstElement" />
                <PopInThemeAnimation TargetName="SecondElement" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>