Cómo: Animar el tamaño de un elemento FrameworkElement

Para animar el tamaño de un elemento FrameworkElement, puede animar sus propiedades Width y Height o bien utilizar un objeto ScaleTransform animado.

En el ejemplo siguiente se anima el tamaño de dos botones utilizando estos dos enfoques. El tamaño de un botón se cambia animando su propiedad Width y el tamaño del otro se cambia animando un objeto ScaleTransform aplicado a su propiedad RenderTransform. Cada botón contiene texto. Inicialmente, el texto tiene el mismo aspecto en ambos botones, pero al cambiar el tamaño de los botones, el texto del segundo botón se distorsiona.

Ejemplo

<!-- AnimatingSizeExample.xaml
     This example shows two ways of animating the size
     of a framework element. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.AnimatingSizeExample" 
  WindowTitle="Animating Size Example">    
  <Canvas Width="650" Height="400">

    <Button Name="AnimatedWidthButton"
      Canvas.Left="20" Canvas.Top="20"      
      Width="200" Height="150"
      BorderBrush="Red" BorderThickness="5">
        Click Me
      <Button.Triggers>

        <!-- Animate the button's Width property. -->
        <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="AnimatedWidthButton"
                Storyboard.TargetProperty="(Button.Width)"
                To="500" Duration="0:0:10" AutoReverse="True" 
                RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <Button 
      Canvas.Left="20" Canvas.Top="200"
      Width="200" Height="150"
      BorderBrush="Black" BorderThickness="3"> 
        Click Me
      <Button.RenderTransform>
         <ScaleTransform x:Name="MyAnimatedScaleTransform" 
          ScaleX="1" ScaleY="1"  />
      </Button.RenderTransform>
      <Button.Triggers>

        <!-- Animate the ScaleX property of a ScaleTransform
             applied to the button. -->
        <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedScaleTransform"
                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                To="3.0" Duration="0:0:10" AutoReverse="True"
                RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>      
    </Button>
  </Canvas> 
</Page>

Al transformar un elemento, se transforma el elemento completo y su contenido. Al modificar directamente el tamaño de un elemento, como en el caso del primer botón, el contenido del elemento no cambia de tamaño a no ser que su tamaño y posición dependan del tamaño de su elemento primario.

Al animar el tamaño de un elemento aplicando una transformación animada a su propiedad RenderTransform se obtiene un rendimiento mejor que al animar sus propiedades Width y Height directamente, porque la propiedad RenderTransform no activa un paso de diseño.

Para obtener más información sobre la animación de propiedades, vea Información general sobre animaciones. Para obtener más información acerca de las transformaciones, vea Información general sobre transformaciones.