Como animar o tamanho de um FrameworkElement
Para animar o tamanho de um , você pode animar suas Width propriedades e Height ou usar um FrameworkElementScaleTransformarquivo .
No exemplo a seguir anima o tamanho de dois botões usando estas duas abordagens. Um botão é redimensionado animando sua propriedade e outro é redimensionado animando um ScaleTransform aplicado à sua WidthRenderTransform propriedade. Cada botão contém algum texto. Inicialmente, o texto parece o mesmo em ambos os botões, mas como os botões são redimensionados, o texto no segundo botão fica distorcido.
Exemplo
<!-- 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>
Quando você transforma um elemento, o elemento inteiro e seu conteúdo serão transformados. Quando você altera diretamente o tamanho de um elemento, como no caso do primeiro botão, o conteúdo do elemento não será redimensionado, a menos que seu tamanho e posição dependam do tamanho de seu elemento pai.
Animar o tamanho de um elemento aplicando uma transformação animada à sua RenderTransform propriedade fornece melhor desempenho do que animá-la Width e Height diretamente, porque a RenderTransform propriedade não aciona uma passagem de layout.
Para obter mais informações sobre animação de propriedades, consulte Visão geral da animação. Para obter mais informações sobre transformações, consulte a Visão geral das transformações.
.NET Desktop feedback