Vorgehensweise: Animieren der Größe eines FrameworkElements

Um die Größe eines FrameworkElementzu animieren, können Sie entweder die Width und Height Eigenschaften animieren oder eine animierte ScaleTransformverwenden.

Im folgenden Beispiel wird die Größe von zwei Schaltflächen mithilfe dieser beiden Ansätze animiert. Eine Schaltfläche wird durch das Animieren ihrer Width-Eigenschaft in der Größe verändert, und eine andere wird durch das Animieren eines ScaleTransform, das auf ihre RenderTransform-Eigenschaft angewendet wird, in der Größe verändert. Jede Schaltfläche enthält Text. Zunächst wird der Text in beiden Schaltflächen gleich angezeigt, aber wenn die Größe der Schaltflächen geändert wird, wird der Text in der zweiten Schaltfläche verzerrt.

Beispiel

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

Wenn Sie ein Element transformieren, werden das gesamte Element und dessen Inhalt transformiert. Wenn Sie die Größe eines Elements direkt ändern, wie im Fall der ersten Schaltfläche, wird der Inhalt nicht neu dimensioniert, es sei denn, ihre Größe und Position hängen von der Größe ihres übergeordneten Elements ab.

Das Animieren der Größe eines Elements durch Anwenden einer animierten Transformation auf die RenderTransform-Eigenschaft bietet eine bessere Leistung als das direkte Animieren der Width und Height, da die RenderTransform-Eigenschaft keinen Layoutdurchlauf auslöst.

Weitere Informationen zum Animieren von Eigenschaften finden Sie in der Animation Übersicht. Weitere Informationen zu Transformationen finden Sie in der Transformationsübersicht.