Comment : animer la taille d'un FrameworkElement

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

Dans l’exemple suivant, la taille de deux boutons est animée à l’aide de ces deux approches. Un bouton est redimensionné en ananimant sa Width propriété et un autre est redimensionné en ananimant une ScaleTransform application à sa RenderTransform propriété. 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é offre de meilleures performances que son RenderTransformWidthHeight animation directe, car la RenderTransform propriété 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.