UWP Есть ли способ анимировать положение и размер StackPanel при загрузке страницы в фрейм?

Question

У меня есть кнопка и меню внутри 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>

Answer 1

Несколько способов.

1: применить RepositionThemeTransition к свойству ChildrenTransitions родительского StackPanel кнопки. Каждый раз, когда любой из дочерних элементов 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 и т. Д. c)

2: Применить переход положения к кнопке. (Не совсем уверен, что это работает)

<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;
}