UWP 有没有办法在将页面加载到框架时为 StackPanel 的位置和大小设置动画？答案

【问题标题】：UWP Is there a way to animate the position and size of StackPanel when loading Page into a Frame?UWP 有没有办法在将页面加载到框架时为 StackPanel 的位置和大小设置动画？
【发布时间】：2020-07-18 01:09:30
【问题描述】：

我在 StackPanel 中有一个按钮和一个菜单，它们具有水平方向并水平和垂直居中。按钮右侧有一个空面板。当按钮被点击时，一个页面被加载到面板中。问题是按钮自动向左移动，因此每个按钮都保持居中。我想知道是否有一种方法可以使按钮的移动变为动画，而不仅仅是出现在最终位置。

这是代码。

<StackPanel x:Name="VentanaPrincipal" Orientation="Horizontal" HorizontalAlignment="Center">

    <StackPanel x:Name="MenuPrincipal" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid>
            <Ellipse Width="100" Height="100" Fill="Transparent" Stroke="#B12025" StrokeThickness="2"/>
            <Ellipse Width="85" Height="85" Fill="#eeeeee"/>
        </Grid>
        <TextBlock
                    Margin="0,10,0,0"
                    Text="Nombre Completo"
                    FontWeight="SemiBold"
                    FontSize="14"
                    Foreground="#818181"
                    HorizontalAlignment="Center"/>
        <TextBlock
                    Text="Puesto"
                    FontWeight="SemiBold"
                    FontSize="12"
                    Foreground="#B8B8B8"
                    HorizontalAlignment="Center"/>
        <Button Margin="0,30,0,20" Content="Registrar Usuario" Style="{StaticResource BotonUsuarioNuevo}" Click="RegistrarUsuario_Click"/>
        <Grid Width="220" Padding="0,10,0,0">
            <Border Margin="0,-10,0,0" Width="180" Height="270" BorderBrush="#CCCFDB" BorderThickness="2" CornerRadius="15"/>
            <Border Width="180" Margin="0,80,0,0" BorderBrush="#CCCFDB" Height="2" BorderThickness="2"/>
            <Border Width="180" Margin="0,-100,0,0" BorderBrush="#CCCFDB" Height="2" BorderThickness="2"/>
            <Border Margin="0,-10,0,0" Height="270" BorderBrush="#CCCFDB" Width="2" BorderThickness="2"/>
            <GridView ItemsSource="{x:Bind Secciones}" ItemContainerStyle="{StaticResource CustomGridViewItem}" Padding="10,10,0,0" Width="200" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center">
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="data:Seccion">
                        <TextBlock Text="{x:Bind titulo}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </Grid>
    </StackPanel>
    <Frame x:Name="infoA"/>
</StackPanel>

【问题讨论】：

根据您的要求，更好的方法是为导航页面创建连接动画，这个document 很有帮助。
@NicoZhu-MSFT 非常感谢您提供的信息！但我想知道是否有办法做到这一点而不必更改主页。干杯！

标签： xaml animation uwp

【解决方案1】：

几种方法。

1：将 RepositionThemeTransition 应用于 Button 的父 StackPanel 的 ChildrenTransitions 属性。任何时候任何 StackPanels 子元素被移动，它们都会被动画到新的位置。

<StackPanel x:Name="MenuPrincipal" VerticalAlignment="Center" HorizontalAlignment="Center">
    <StackPanel.ChildrenTransitions>
        <TransitionCollection>
            <RepositionThemeTransition IsStaggeringEnabled="False" />
        </TransitionCollection>
    </StackPanel.ChildrenTransitions>
    ...
    <Button Margin="0,30,0,20" Content="Registrar Usuario" Style="{StaticResource BotonUsuarioNuevo}" Click="RegistrarUsuario_Click"/>
    ...
</StackPanel>

（这可以通过任何面板完成，例如 Grid 或 Canvas 等）

2：对 Button 应用重新定位过渡。（不完全确定这是否有效）

<Button Margin="0,30,0,20" Content="Registrar Usuario" Style="{StaticResource BotonUsuarioNuevo}" Click="RegistrarUsuario_Click">
    <Button.Transitions>
        <TransitionCollection>
            <RepositionThemeTransition />
        </TransitionCollection>
    </Button.Transitions>
</Button>

将合成偏移动画应用到按钮（或任何其他元素）。任何由其父元素应用于目标元素的布局位置更改都将运行动画。如果需要，您实际上可以自定义此动画的持续时间和使用的缓动功能。

 <Button Loaded="SetReposition" Margin="0,30,0,20" Content="Registrar Usuario" Style="{StaticResource BotonUsuarioNuevo}" Click="RegistrarUsuario_Click"/>

public void SetReposition(object sender, RoutedEventArgs args)
{
    UIElement e = (UIElement)sender;
    Visual v = ElementCompositionPreview.GetElementVisual(e);

    var o = v.Compositor.CreateVector3KeyFrameAnimation();
    o.Target = nameof(Visual.Offset);
    o.InsertExpressionKeyFrame(0, "this.StartingValue");
    o.InsertExpressionKeyFrame(1, "this.FinalValue");
    o.Duration = TimeSpan.FromSeconds(0.3);

    var collection = v.Compositor.CreateImplicitAnimationCollection();
    collection.Add(nameof(Visual.Offset), o);

    v.ImplicitAnimations = collection;
}

【讨论】：