C#UWP XAML动画

Question

我有一个带有包含两列的网格的页面,第一个包含一个按钮,用于切换第二列的可见性(通过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可见性的第一个切换.后续切换不显示动画..

无需手动调用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>