Comment : animer la taille d'un FrameworkElement

Mise à jour : novembre 2007

Pour animer la taille d'un FrameworkElement, vous pouvez animer ses propriétés Width et Height ou utiliser un ScaleTransform animé.

L'exemple suivant anime la taille de deux boutons à l'aide de ces deux approches. Un bouton est redimensionné en animant sa propriété Width et l'autre est redimensionné en animant un ScaleTransform appliqué à sa propriété RenderTransform. Chaque bouton contient du texte. Au début, le texte apparaît de la même manière dans les deux boutons, mais lorsque les boutons sont redimensionnés, le texte du second bouton est déformé.

Exemple

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

Lorsque vous transformez un élément, tout l'élément 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 sa taille et sa position dépendent de la taille de l'élément parent.

L'animation de la taille d'un élément en appliquant une transformation animée à sa propriété RenderTransform fournit de meilleures performances que si vous animez directement Width et Height, parce que la propriété RenderTransform ne déclenche pas de passe de disposition.

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