下面的示例使用这两种方法对两个按钮的大小进行动画处理。对于第一个按钮，通过对它的 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 属性不会触发布局处理