C# UWP XAML 动画

Question

我有一个包含两列的网格的页面，第一列包含一个切换第二列可见性的按钮（通过 ViewModel 绑定）。如何为这个场景添加 showing/hiding 第二列（以 Pivot 作为内容）的动画？

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
        <Button Command="{Binding TogglePivot}"/>
    </Grid>

    <Pivot x:Name="Content_Pivot" Grid.Column="1">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <!-- Hidden state -->
                <VisualState x:Name="Hidden">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- Visible state -->
                <VisualState x:Name="Visible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="600"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <interactivity:Interaction.Behaviors>
            <!-- Show -->
            <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="True">
                <core:GoToStateAction StateName="Visible"/>
            </core:DataTriggerBehavior>

            <!-- Hide -->
            <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="False">
                <core:GoToStateAction StateName="Hidden" />
            </core:DataTriggerBehavior>
        </interactivity:Interaction.Behaviors>

        <!-- Content.. -->
    </Pivot>
</Grid>

以上工作正常，但 仅在枢轴可见性的第一个切换 上。随后的切换不显示动画..

有没有无需手动调用 Storyboard 即可实现此目的的简单方法？

谢谢。

==编辑==

我对上面的代码做了一些修改（即添加了 VisualStates 和 DataTriggerBehaviour）。

仍然无法正常工作...有什么想法吗？

Answer 1

在类似的情况下，我所做的不是切换枢轴的可见性，而是切换网格列（或枢轴）的宽度。毕竟零宽度的枢轴是不可见的。另外，根据我在您的代码中看到的，第二列的大小设置为 300，因此动画的目标宽度不会成为问题。

我的建议是在 xaml 中针对枢轴的宽度创建两个故事板。第一个会扩展它，第二个会折叠它。然后使用绑定到 TogglePivot 的 DataTriggerBehavior 来触发故事板。这样 xaml 仍然干净，不需要代码。

如果您尝试了但无法正确完成，我可以提供一些示例代码。

编辑：你的想法有点不对。这对我有用。

xmlns:media="using:Microsoft.Xaml.Interactions.Media"
<Page.Resources>

    <Storyboard x:Name="PaneStoryboard">
        <DoubleAnimation Duration="0:0:1" To="300" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Content_Pivot" EnableDependentAnimation="True"/>
    </Storyboard>

    <Storyboard x:Name="CloseStoryboard">
        <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Content_Pivot" EnableDependentAnimation="True"/>
    </Storyboard>

</Page.Resources>

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">                
            <Button Content="Opend and Close" Command="{Binding TogglePivot}" />
        </Grid>

        <Pivot x:Name="Content_Pivot" Grid.Column="1" Width="300" Background="Blue">

            <interactivity:Interaction.Behaviors>

             <!--Show--> 

                <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="True">
                    <media:ControlStoryboardAction Storyboard="{StaticResource PaneStoryboard}"/>
                </core:DataTriggerBehavior>


             <!--Hide-->

                <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="False">
                    <media:ControlStoryboardAction Storyboard="{StaticResource CloseStoryboard}"/>
                </core:DataTriggerBehavior>
            </interactivity:Interaction.Behaviors>

            <!-- Content.. -->
        </Pivot>
    </Grid>

C# UWP XAML 动画

C# UWP XAML Animations

c#

animation

xaml

winrt-xaml

uwp