C# UWP XAML Animations

本文关键字：Animations XAML UWP | 更新日期: 2023-09-27 18:11:01

我有一个包含两列的Grid的Page，第一列包含一个按钮，该按钮切换第二列的可见性(通过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>

上面的工作很好，但是只能在第一个切换透视的可见性。之后的切换不显示动画。

在不手动调用故事板的情况下，有什么简单的方法实现这个目标吗?

谢谢。编辑

= = = =

我对上面的代码做了一些修改(即增加了VisualStates和DataTriggerBehaviour)。

还是不能让它工作…什么好主意吗?

C# UWP XAML Animations

在一个类似的场景中，我所做的不是切换pivot的可见性，而是切换网格列(或pivot)的宽度。毕竟，宽度为零的枢轴是不可见的。另外，从你的代码中我可以看到，第二列的大小被设置为300，所以动画的目标宽度不会是一个问题。

我的建议是在xaml中创建两个故事板，目标是pivot的宽度。第一个会使它膨胀，第二个会使它坍缩。然后使用绑定到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>
相关文章：