Procedura: aggiungere un'animazione alle dimensioni di un oggetto FrameworkElement

Per animare le dimensioni di un oggetto FrameworkElement, è possibile aggiungere un'animazione alle proprietà Width e Height oppure utilizzare un oggetto ScaleTransform animato.

Nell'esempio seguente, le dimensioni di due pulsanti sono state animate utilizzando queste due procedure. Un pulsante viene ridimensionato aggiungendo un'animazione alla proprietà Width, mentre l'altro viene ridimensionato aggiungendo l'animazione a un oggetto ScaleTransform applicato alla proprietà RenderTransform. Ciascun pulsante contiene del testo. Inizialmente, il testo visualizzato è uguale in entrambi pulsanti, ma quando questi vengono ridimensionati, il testo del secondo pulsante viene distorto.

Esempio

<!-- 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>

Quando si trasforma un elemento, vengono modificati l'intero elemento e il relativo contenuto. Quando si altera direttamente la dimensione di un elemento, come nel caso del primo pulsante, il contenuto dell'elemento non viene ridimensionato, a meno che la dimensione e la posizione non dipendano dalle dimensioni dell'elemento padre.

L'animazione delle dimensioni di un elemento tramite l'applicazione di una trasformazione animata alla proprietà RenderTransform produce risultati migliori rispetto all'animazione diretta delle proprietà Width e Height, in quanto la proprietà RenderTransform non attiva un passaggio del layout.

Per ulteriori informazioni sull'animazione di proprietà, vedere Cenni preliminari sull'animazione. Per ulteriori informazioni sulle trasformazioni, vedere Cenni preliminari sulle trasformazioni.