c# - Cómo animar la propiedad Margen en WPF

xaml animation

Question

Quiero mover animar un objeto rectangular para moverlo en el eje x. Soy nuevo en la animación de WPF, comencé con lo siguiente:

<Storyboard x:Key="MoveMe">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                   Storyboard.TargetName="GroupTileSecond"
                                   Storyboard.TargetProperty="(**Margin.Left**)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="**134, 70,0,0**" />
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="**50, 70,0,0**" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Obviamente descubrí que no puedo usar Margin.Left como Storyboard.TargetProperty o uso 134,70,0,0 en la propiedad Value.

Entonces, ¿cómo muevo un objeto en XAML WPF?

Answer 1

Como respuesta alternativa, @McGarnagle puede usar la animación para las propiedades HorizontalAlignment y VerticalAlignment .

Ejemplo:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GroupTileSecond" 
                               Storyboard.TargetProperty="HorizontalAlignment">

    <DiscreteObjectKeyFrame KeyTime="0:0:0">
        <DiscreteObjectKeyFrame.Value>
            <HorizontalAlignment>Center</HorizontalAlignment>
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

Answer 2

En realidad, ya puedes hacer lo que quieras hacer, exactamente como quieras hacerlo usando RenderTransform mezclado con algo de DoubleAnimation e incluso agregarle un toque extra, por ejemplo;

<Grid x:Name="TheObject" Opacity="0">
      <Grid.RenderTransform>
            <TranslateTransform x:Name="MoveMeBaby" X="50" />
      </Grid.RenderTransform>
      <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                  <BeginStoryboard>
                         <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveMeBaby" Storyboard.TargetProperty="X">
                                   <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
                              </DoubleAnimationUsingKeyFrames>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheObject" Storyboard.TargetProperty="Opacity">
                                   <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />
                              </DoubleAnimationUsingKeyFrames>
                         </Storyboard>
                  </BeginStoryboard>
            </EventTrigger>
      </Grid.Triggers>

Moverá ese objeto 50px en el eje X e incluso lo fundirá mientras lo hace. KeyTime y juega con los valores de la propiedad X y el KeyTime para obtener lo que deseas. Espero que esto ayude, salud.

Answer 3

No puede animar Margin.Left (porque Left no es una propiedad de dependencia), pero puede animar Margin . Use ObjectAnimationUsingKeyFrames :

<Storyboard x:Key="MoveMe">
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" 
            Storyboard.TargetName="GroupTileSecond" 
            Storyboard.TargetProperty="Margin">
        <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>134,70,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="00:00:03">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>50,70,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

Hay algunas alternativas que le permiten usar una DoubleAnimation , en lugar de marcos clave:

1. Coloque su objetivo dentro de un lienzo y anime su posición x usando Canvas.Left .
2. Aplica un TranslateTransform a tu objetivo y anima su posición x usando TranslateTransform.X .

Answer 4

Margin propiedad del Margin puede ser animada usando ThicknessAnimation

<Storyboard >
     <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
        <SplineThicknessKeyFrame KeyTime="00:00:00" Value="134, 70,0,0" />
        <SplineThicknessKeyFrame KeyTime="00:00:03" Value="50, 70,0,0" />
     </ThicknessAnimationUsingKeyFrames>
</Storyboard>