Gewusst wie: Animieren der Größe von FrameworkElement

Sie können die Größe von FrameworkElement animieren, indem Sie die Eigenschaften Width und Height animieren oder eine animierte ScaleTransform verwenden.

Im folgenden Beispiel wird mit diesen zwei Ansätzen die Größe von zwei Schaltflächen animiert. Die Größe einer Schaltfläche wird geändert, indem die Width-Eigenschaft animiert wird. Die Größe einer anderen Schaltfläche wird geändert, indem eine ScaleTransform animiert wird, die auf die RenderTransform-Eigenschaft angewendet wird. Jede Schaltfläche weist Text auf. Zuerst sieht der Text auf beiden Schaltflächen gleich aus. Mit der Größenänderung der Schaltflächen wird der Text der zweiten Schaltfläche jedoch verzerrt.

Beispiel

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

Wenn Sie ein Element transformieren, werden das gesamte Element und sein Inhalt transformiert. Wenn Sie die Größe eines Elements direkt ändern, wie bei der ersten Schaltfläche, wird die Größe des Inhalts des Elements nur geändert, wenn dessen Größe und Position von der Größe des übergeordneten Elements abhängt.

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

Weitere Informationen über das Animieren von Eigenschaften finden Sie unter Übersicht über Animationen. Weitere Informationen zu Transformationen finden Sie unter Übersicht über Transformationen.