Visão Geral sobre Transformações

Este tópico descreve como utilizar as classes 2-D Transform para rotacionar, redimensionar, mover (transladar) e enviezar objetos FrameworkElement.

Este tópico contém as seguintes seções.

• O que é uma Transformação?
• Classes Transform
• Propriedades de Transformações Comuns
• Transformações e Sistemas de Coordenadas
• Transformando um FrameworkElement
• Exemplo: Girar um FrameworkElement 45 graus
• Animando Transformações
• Características Freezable (Congeláveis)
• Tópicos relacionados

O que é uma Transformação?

Uma 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.

Observação:
Like Microsoft, Windows Presentation Foundation (WPF) usa as matrizes de linha principal. Vetores são expressos em vetores de linha, não vetores de coluna.

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

Uma matriz de transformação 2D

Ao manipular valores da matriz, você pode rotacionar, redimensionar, enviezar e mover (transladar) um objeto. Por exemplo, se você altera o valor na primeira coluna da terceira linha (o valor OffsetX) para 100, você pode utilizá-lo para mover um objeto 100 unidades no eixo X. Se você altera o valor na segunda coluna da segunda linha para 3, você pode utilizá-lo para redimensionar um objeto para três vezes sua altura atual. Se você alterar os dois valores, você move as objeto 100 unidades ao longo do eixo x e alongar a altura por um fator de 3. Porque Windows Presentation Foundation (WPF) apenas suporta afim transformações, os valores na coluna à direita são sempre 0, 0, 1.

Embora o Windows Presentation Foundation (WPF) permita que você manipule diretamente os valores da matriz, também fornece diversas classes Transform que lhe permitem transformar um objeto sem conhecer como a estrutura da matriz subjacente é configurada. Por exemplo, a classe ScaleTransform permite que você redimensione um objeto configurando suas propriedades ScaleX e ScaleY, em vez de manipular uma matriz de transformação. Da mesma maneira, a classe RotateTransform permite que você rotacione um objeto apenas configurando sua propriedade Angle.

Classes Transform

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

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

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

Propriedades de Transformações Comuns

Uma forma de transformar um objeto é declarar o tipo Transform adequado 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 diversos tipos do Windows Presentation Foundation (WPF) comumente utilizados e suas propriedades de transformação.

Transformações e Sistemas de Coordenadas

Ao transformar um objeto, você não apenas transforma o objeto, você transforma o espaço de coordenadas em que o objeto existe. Por padrão, uma transformação é centralizada na origem do sistema de coordenada do objeto de destino: (0,0). A única exceção é TranslateTransform; um TranslateTransform não tem propriedades de centro para definir porque o efeito de translação é o mesmo não importa onde esteja centrado.

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

Um elemento Rectangle rotacionado em 45 graus em torno do 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 rotaciona em torno do seu canto superior esquerdo, (0,0). As classes RotateTransform, ScaleTransform e SkewTransform fornecem propriedades CenterX e CenterY que lhe permitem especificar o ponto em que a transformação é aplicada.

O próximo exemplo também utiliza um RotateTransform para rotacionar um elemento Rectangle em 45 graus; no entanto, dessa 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 Rectangle rotacionado em 45 graus em torno do 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 uma Transform e aplique-a a uma de duas propriedades que a classe FrameworkElement fornece:

• LayoutTransform -- Uma transformação que é aplicada antes da varredura 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 varredura de layout ter sido completada. Utilizando a propriedade RenderTransform em vez da propriedade LayoutTransform, você pode obter benefícios de desempenho.

Que propriedade você deve utilizar? Por causa dos benefícios de desempenho que ela fornece, utilize a propriedade RenderTransform sempre que possível, especialmente quando você utiliza objetos Transform animados. Utilize a propriedade LayoutTransform ao redimensionar, rotacionar ou enviezar e você precisa do pai do elemento para ajustar o tamanho transformado do elemento. Observe que, quando utilizados com a propriedade LayoutTransform, objetos TranslateTransform parecem não ter efeito sobre elementos. Isso ocorre porque o sistema de layout retorna o elemento transladado à sua posição original como parte do seu processamento.

Para mais informações sobre layout no Windows Presentation Foundation (WPF), veja a visão geral O sistema de layout.

Exemplo: Girar um FrameworkElement 45 graus

O exemplo a seguir utiliza um RotateTransform para rotacionar um botão no sentido dos ponteiros do relógio em 45 graus. O botão está contido em um StackPanel que possui dois outros botões.

Por padrão, um RotateTransform rotaciona em volta do ponto (0,0). Porque o exemplo não especifica um valor de centro, o botão rotaciona em torno do ponto (0,0), que é seu canto superior esquerdo. A RotateTransform é aplicada à propriedade RenderTransform. A ilustração a seguir mostra o efeito da transformação.

Rotação no sentido dos ponteiros do relógio em 45 graus em torno do 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 uitliza um RotateTransform para rotacionar um botão em 45 graus no sentido dos ponteiros do relógio, mas também define a RenderTransformOrigin do botão para (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 sobre seu canto superior esquerdo. A ilustração a seguir mostra o efeito da transformação.

Rotação em 45 graus no sentido dos ponteiros do relógio 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 utiliza a propriedade LayoutTransform em vez da propriedade RenderTransform para rotacionar o botão. Isso faz com que a transformação afete o layout do botão, o que dispara uma varredura completa pelo sistema de layout. Como resultado, o botão é rotacionado e então reposicionado porque seu tamanho foi alterado. A ilustração a seguir mostra o efeito da transformação.

LayoutTransform utilizado para rotacionar 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

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

O exemplo a seguir utiliza um Storyboard e um DoubleAnimation com um RotateTransform para fazer um Button girar no seu lugar quando clicado.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

For the complete sample, see Exemplo de transformações 2-D. Para mais informações sobre animações, consulteRevisão de Animação.

Características Freezable (Congeláveis)

Porque ele herda do Freezable classe, o Transform classe fornecem vários recursos especiais: Transform objetos podem ser declarados sistema autônomo recursos, compartilhados entre vários objetos, feitos somente leitura para melhorar o desempenho, clonada e feita thread-safe. Para mais informações sobre as diferentes características fornecidas por objetos Freezable, veja Visão geral sobre objetos Freezable.

Consulte também

Tarefas

Exemplo de transformações 2-D

Referência

Transform

Matrix

Outros recursos

Transformations How-to Topics