如何：建立 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>

當您轉換元素時，整個元素及其內容都會跟著轉換。 當您直接改變元素的大小時，如同第一個按鈕的情況，除非元素的大小和位置取決於其父元素的大小，否則元素的內容不會重設大小。

藉由將動畫轉換套用至元素的大小，將動畫轉換套用至其 RenderTransform 屬性，可提供比直接以動畫顯示其 Width 和 Height 更好的效能，因為 RenderTransform 屬性不會觸發版面配置階段。

如需將屬性顯示為動畫的詳細資訊，請參閱動畫概觀。 如需轉換的詳細資訊，請參閱 轉換概觀。