Compartilhar via


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.