Guide pratique pour animer la taille d’un FrameworkElement

Pour animer la taille d’un FrameworkElement, vous pouvez soit animer ses propriétés Width et Height, soit utiliser un ScaleTransformanimé.

Dans l’exemple suivant, la taille de deux boutons est animée à l’aide de ces deux approches. Un bouton est redimensionné en animant sa propriété Width et un autre est redimensionné en animant une ScaleTransform appliquée à sa propriété RenderTransform. Chaque bouton contient du texte. Initialement, le texte apparaît le même dans les deux boutons, mais à mesure que les boutons sont redimensionnés, le texte du deuxième bouton devient déformé.

Exemple

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

Lorsque vous transformez un élément, l’élément entier et son contenu sont transformés. Lorsque vous modifiez directement la taille d’un élément, comme dans le cas du premier bouton, le contenu de l’élément n’est pas redimensionné, sauf si leur taille et leur position dépendent de la taille de leur élément parent.

L’animation de la taille d’un élément en appliquant une transformation animée à sa propriété RenderTransform offre de meilleures performances que l’animation directe de ses propriétés Width et Height, car la propriété RenderTransform ne déclenche pas de passe de disposition.

Pour plus d'informations sur l'animation des propriétés, consultez la Vue d'ensemble de l'animation. Pour plus d’informations sur les transformations, consultez la vue d’ensemble des transformations .