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

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

En el siguiente ejemplo se anima el tamaño de dos botones utilizando estos dos enfoques. Un botón se cambia de tamaño animando su propiedad Width y otro se redimensiona animando un ScaleTransform aplicado a su propiedad RenderTransform. Cada botón contiene texto. Inicialmente, el texto aparece igual en ambos botones, pero a medida que se cambia 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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, todo el elemento y su contenido se transforman. Cuando se modifica directamente el tamaño de un elemento, como en el caso del primer botón, el contenido del elemento no se cambia de tamaño a menos que su tamaño y posición dependan del tamaño de su elemento primario.

Animar el tamaño de un elemento aplicando una transformación animada a su propiedad RenderTransform proporciona un mejor rendimiento que animar sus Width y Height directamente, porque la propiedad RenderTransform no desencadena un pase 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 sobre las transformaciones, vea Información general sobre las transformaciones.