Question

我希望最终确定应用程序的外观和风格，并且难以将过渡动画应用于一个非常基本的问题。

附上你可以找到我挣扎的代码。我已经评论了我在开发和原型设计过程中使用的setter。它们就像我期望的那样工作。

故事板过渡不会以任何形式或形式发挥作用。只添加一个故事板转换与所有或任何设置器和＃34;工作＆＃34;只要我没有遇到任何运行时错误，但转换根本不会出现。

我想知道我是否可能不会完全误解故事板的运作方式。

我得到的错误是：

 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);
    }

修改：＆＃34;解决方案＆＃34;正如JustinXL所指出的那样，需要删除以下Xaml元素并且运行时错误消失：

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

我并不完全清楚为什么会这样（真正的错误或只是一个模糊的设计）。

Answer 1

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

另请注意，我添加了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>

Answer 2

事实证明，故事板必须在VisualTransition中，而不是在VisualState本身，尽管事实上你可以在视觉状态下拥有动画故事板。

 <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition To="StateA">
                    <VisualTransition.Storyboard>
                        <Storyboard>
                            <PopOutThemeAnimation TargetName="SecondElement"/>
                            <PopInThemeAnimation TargetName="FirstElement"/>
                        </Storyboard>
                    </VisualTransition.Storyboard>
                </VisualTransition>

                <VisualTransition To="StateB">
                    <VisualTransition.Storyboard>
                        <Storyboard>
                            <PopOutThemeAnimation TargetName="FirstElement"/>
                            <PopInThemeAnimation TargetName="SecondElement"/>
                        </Storyboard>                                               
                     </VisualTransition.Storyboard>
                </VisualTransition>
            </VisualStateGroup.Transitions>

            <VisualState x:Name="StateA">
               <VisualState.Setters>
                   <Setter Target="FirstElement.Visibility" Value="Visible" />
                   <Setter Target="SecondElement.Visibility" Value="Collapsed" />
               </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="StateB">
            <VisualState.Setters>
                <Setter Target="FirstElement.Visibility" Value="Collapsed" />
                <Setter Target="SecondElement.Visibility" Value="Visible" />
            </VisualState.Setters>

        </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

尝试淡入一个元素时使用Xaml Storyboard同时淡出另一个元素时出错

2 个答案: