Visão geral das transformações

Este tópico descreve como usar as classes 2D Transform para girar, dimensionar, mover (traduzir) e distorcer objetos FrameworkElement.

O que é uma transformação?

Um Transform define como mapear ou transformar pontos de um espaço de coordenadas para outro espaço de coordenadas. Esse mapeamento é descrito por uma transformação Matrix, que é uma coleção de três linhas com três colunas de valores Double.

A tabela a seguir mostra a estrutura de uma matriz do WPF.

Uma matriz de transformação 2D

Ao manipular valores de matriz, você pode girar, dimensionar, distorcer e mover (traduzir) um objeto. Por exemplo, se você alterar o valor na primeira coluna da terceira linha (o valor OffsetX) para 100, poderá usá-lo para mover um objeto 100 unidades ao longo do eixo x. Se você alterar o valor na segunda coluna da segunda linha para 3, poderá usá-lo para alongar um objeto para três vezes a altura atual. Se você alterar os valores, mova objeto 100 unidades no eixo e alongue sua altura por um fator de 3. Como o Windows Presentation Foundation (WPF) dá suporte apenas a transformações de afim, os valores na coluna direita são sempre 0, 0, 1.

Embora o WPF (Windows Presentation Foundation) permita manipular diretamente valores de matriz, ele também fornece várias classes de Transform que permitem transformar um objeto sem saber como a estrutura de matriz subjacente está configurada. Por exemplo, a classe ScaleTransform permite dimensionar um objeto definindo suas propriedades ScaleX e ScaleY, em vez de manipular uma matriz de transformação. Da mesma forma, a classe RotateTransform permite que você gire um objeto apenas definindo sua propriedade Angle.

Classes de transformação

O WPF (Windows Presentation Foundation) fornece as seguintes classes Transform 2D para operações de transformação comuns:

Classe	Descrição	Exemplo	Ilustração
RotateTransform	Gira um elemento pelo Angle especificado.	girar um objeto
ScaleTransform	Dimensiona um elemento pelas quantidades ScaleX e ScaleY especificadas.	dimensionar um elemento
SkewTransform	Distorce um elemento pelos valores especificados de AngleX e AngleY.	distorcer um elemento
TranslateTransform	Movimenta (translada) um elemento pelas quantidades X e Y especificadas.	traduzir um elemento

Para criar transformações mais complexas, o Windows Presentation Foundation (WPF) fornece as duas seguintes classes:

O WPF (Windows Presentation Foundation) também fornece transformações 3D. Para obter mais informações, consulte a classe Transform3D.

Propriedades comuns da transformação

Uma maneira de transformar um objeto é declarar o tipo de Transform apropriado e aplicá-lo à propriedade de transformação do objeto. Diferentes tipos de objetos têm diferentes tipos de propriedades de transformação. A tabela a seguir lista vários tipos do WPF (Windows Presentation Foundation) comumente usados e suas propriedades de transformação.

Transformações e sistemas de coordenadas

Ao transformar um objeto, você não transforma apenas o objeto, transforma o espaço de coordenadas no qual esse objeto existe. Por padrão, uma transformação é centralizada na origem do sistema de coordenadas do objeto de destino: (0,0). A única exceção é TranslateTransform; um TranslateTransform não tem nenhuma propriedade central a ser definida porque o efeito de tradução é o mesmo, independentemente de onde ele está centralizado.

O exemplo a seguir usa um RotateTransform para girar um elemento Rectangle, um tipo de FrameworkElement, em 45 graus sobre seu centro padrão, (0, 0). A ilustração a seguir mostra o efeito da rotação.

Um elemento Rectangle girava 45 graus sobre o ponto (0,0)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Por padrão, o elemento gira sobre o canto superior esquerdo (0, 0). As classes RotateTransform, ScaleTransforme SkewTransform fornecem propriedades CenterX e CenterY que permitem especificar o ponto no qual a transformação é aplicada.

O próximo exemplo também usa um RotateTransform para girar um elemento Rectangle em 45 graus; no entanto, desta vez, as propriedades CenterX e CenterY são definidas para que o RotateTransform tenha um centro de (25, 25). A ilustração a seguir mostra o efeito da rotação.

Um elemento Retângulo girava 45 graus sobre o ponto (25, 25)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Transformando um FrameworkElement

Para aplicar transformações a um FrameworkElement, crie um Transform e aplique-o a uma das duas propriedades fornecidas pela classe FrameworkElement:

• LayoutTransform – uma transformação que é aplicada antes do cálculo de layout. Depois que a transformação é aplicada, o sistema de layout processa o tamanho e a posição transformados do elemento.

• RenderTransform – uma transformação que modifica a aparência do elemento, mas é aplicada após a conclusão da passagem de layout. Usando a propriedade RenderTransform em vez da propriedade LayoutTransform, você pode obter benefícios de desempenho.

Qual propriedade você deve usar? Devido aos benefícios de desempenho fornecidos, use a propriedade RenderTransform sempre que possível, especialmente quando você usar objetos de Transform animados. Use a propriedade LayoutTransform ao dimensionar, girar ou distorcer e para que o elemento pai se ajuste ao tamanho transformado do elemento. Observe que, quando eles são usados com a propriedade LayoutTransform, TranslateTransform objetos parecem não ter efeito sobre os elementos. Isso ocorre porque o sistema de layout retorna o elemento traduzido para sua posição original como parte de seu processamento.

Para obter informações adicionais sobre o layout no WPF (Windows Presentation Foundation), consulte Visão geral do layout.

Exemplo: Rotacionar um FrameworkElement em 45 graus

O exemplo a seguir usa um RotateTransform para girar um botão no sentido horário em 45 graus. O botão está contido em um StackPanel que tem dois outros botões.

Por padrão, um RotateTransform gira sobre o ponto (0, 0). Como o exemplo não especifica um valor central, o botão gira sobre o ponto (0, 0), que é o canto superior esquerdo. O RotateTransform é aplicado à propriedade RenderTransform. A ilustração a seguir mostra o resultado da transformação.

Rotação horária em 45 graus no canto superior esquerdo

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

O exemplo a seguir também usa um RotateTransform para girar um botão 45 graus no sentido horário, mas também define o RenderTransformOrigin do botão como (0,5, 0,5). O valor da propriedade RenderTransformOrigin é relativo ao tamanho do botão. Como resultado, a rotação é aplicada ao centro do botão, em vez de seu canto superior esquerdo. A ilustração a seguir mostra o resultado da transformação.

Rotação de 45 graus no sentido horário em torno do centro

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

O exemplo a seguir usa a propriedade LayoutTransform em vez da propriedade RenderTransform para girar o botão. Isso faz com que a transformação afete o layout do botão, que dispara uma passagem completa pelo sistema de layout. Como resultado, o botão é girado e reposicionado porque seu tamanho foi alterado. A ilustração a seguir mostra o resultado da transformação.

LayoutTransform usado para girar o botão

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Animando transformações

Pelo fato de herdarem da classe Animatable, as classes Transform podem ser animadas. Para animar um Transform, aplique uma animação de um tipo compatível à propriedade que você deseja animar.

O exemplo a seguir usa um Storyboard e um DoubleAnimation junto com um RotateTransform para fazer o Button girar no lugar quando clicado.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>
    
    

    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

Para obter o exemplo completo, consulte exemplo de transformações 2D. Para obter mais informações sobre animações, consulte a visão geral da animação .

Recursos congeláveis

Como ele herda da classe Freezable, a classe Transform fornece várias funcionalidades especiais: os objetos Transform podem ser declarados como recursos, compartilhados entre vários objetos, transformados em somente leitura para aprimorar o desempenho, clonados e transformados em thread-safe. Para obter mais informações sobre os diferentes recursos fornecidos por objetos Freezable, consulte a Visão Geral dos Objetos Congeláveis.

Consulte também

• Transform
• Matrix
• Tópicos de instruções
• Exemplo de Transformações 2D