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

Per animare le dimensioni di un oggetto FrameworkElement, è possibile animarne Width le proprietà e Height oppure usare un oggetto animato ScaleTransform.

Nell'esempio seguente vengono animate le dimensioni di due pulsanti usando questi due approcci. Un pulsante viene ridimensionato animando la relativa Width proprietà e un altro viene ridimensionato animando un ScaleTransform oggetto applicato alla relativa RenderTransform proprietà. Ogni pulsante contiene testo. Inizialmente, il testo appare lo stesso in entrambi i pulsanti, ma quando i pulsanti vengono ridimensionati, il testo nel secondo pulsante diventa distorto.

Esempio

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

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

Animare le dimensioni di un elemento applicando una trasformazione animata alla relativa RenderTransform proprietà offre prestazioni migliori rispetto all'animazione Width e Height direttamente, perché la RenderTransform proprietà non attiva un passaggio di layout.

Per altre informazioni sull'animazione delle proprietà, vedere Cenni preliminari sull'animazione. Per altre informazioni sulle trasformazioni, vedere Cenni preliminari sulle trasformazioni.