C# UWP XAML 动画

Question

C# UWP XAML 动画

5

我有一个页面，其中包含一个表格，该表格包含两列。第一列包含一个按钮，通过 ViewModel 绑定来切换第二列的可见性。如何为显示/隐藏第二列（以 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>

上述内容可以正常运行，但仅限于展示Pivot的第一个切换。后续的切换则不会显示动画。有没有简便的方法可以实现此功能，而不需要手动调用故事版？

谢谢。

==编辑==

我对以上代码进行了一些更改（即添加了VisualStates和DataTriggerBehaviour）。

仍然无法使其工作... 有什么想法吗？

- Travis Liew

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Corcus · Accepted Answer

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

我的建议是在XAML中创建两个故事板，以定位枢轴的宽度。第一个会展开它，第二个会折叠它。然后使用DataTriggerBehavior绑定TogglePivot来触发故事板。这样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>