方法 : FrameworkElement のサイズをアニメーション化する

更新 : 2007 年 11 月

FrameworkElement のサイズをアニメーション化するには、その Width プロパティと Height プロパティをアニメーション化するか、アニメーション化された ScaleTransform を使用します。

次の例では、この 2 つの方法を使用して 2 つのボタンのサイズをアニメーション化します。Width プロパティをアニメーション化することで一方のボタンのサイズを変更し、RenderTransform プロパティに適用される ScaleTransform をアニメーション化することでもう一方のボタンのサイズを変更します。各ボタンにはテキストが含まれています。最初は、両方のボタンでテキストが同じように表示されますが、ボタンのサイズを変更すると、2 番目のボタンのテキストがゆがめられます。

使用例

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

要素を変換すると、要素全体とそのコンテンツが変換されます。最初のボタンのように、要素のサイズを直接変更した場合、要素のサイズと位置が親要素のサイズに依存していない限り、要素のコンテンツのサイズは変更されません。

アニメーション化された変換を RenderTransform プロパティに適用して要素のサイズをアニメーション化すると、その要素の Width と Height を直接アニメーション化するよりもパフォーマンスが向上します。これは、RenderTransform プロパティがレイアウト パスをトリガしないためです。

プロパティのアニメーション化の詳細については、「アニメーションの概要」を参照してください。トランザクションの詳細については、「変換の概要」を参照してください。