如何：对 FrameworkElement 的大小进行动画处理

若要对 FrameworkElement 的大小进行动画处理，可以对其 Width 和 Height 属性进行动画处理或使用动画 ScaleTransform。

在下面的示例中，使用以下两种方法对两个按钮的大小进行动画处理。 对一个按钮的 Width 属性进行动画处理来重设该按钮大小，对应用于另一个按钮的 RenderTransform 属性的 ScaleTransform 进行动画处理来重设另一个按钮的大小。 每个按钮都包含一些文本。 最初，文本在两个按钮中显示相同，但随着按钮的大小调整，第二个按钮中的文本将扭曲。

例

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

转换元素时，将转换整个元素及其内容。 直接更改元素的大小时（如第一个按钮的情况），元素的内容大小不会调整，除非该元素的大小和位置取决于其父元素的大小。

与直接对元素的 Width 和 Height 进行动画处理相比，通过将动画转换应用于元素的 RenderTransform 属性来对元素的大小进行动画处理可提供更好的性能，因为 RenderTransform 属性不会触发布局传递。

有关对属性进行动画处理的详细信息，请参阅动画概述。 有关转换的详细信息，请参阅 转换概述。