Partilhar via

Visão geral das transformações

  • Artigo

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

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.

Observação

O Windows Presentation Foundation (WPF) usa matrizes de linhas principais. Os vetores são expressos como 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

Eixo X Eixo Y Transformação afim
M11

Padrão: 1.0		 M12

Padrão: 0.0		 0.0
M21

Padrão: 0.0		 M22

Padrão: 1.0		 0.0
OffsetX

Padrão: 0.0		 OffsetY

Padrão: 0.0		 1.0

Ao manipular valores de matriz, você pode girar, dimensionar, inclinar 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 esticar um objeto até três vezes sua altura atual. Se você alterar ambos os valores, moverá o objeto 100 unidades ao longo do eixo x e estenderá sua altura por um fator de 3. Como o Windows Presentation Foundation (WPF) suporta apenas transformações afim, os valores na coluna da direita são sempre 0, 0, 1.

Embora o Windows Presentation Foundation (WPF) permita manipular diretamente valores de matriz, ele também fornece várias classes 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.

Transformar classes

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

Classe Descrição Exemplo Ilustração
RotateTransform Gira um elemento pelo Angleespecificado. Girar um objeto Girar ilustração
ScaleTransform Dimensiona um elemento pelos valores especificados de ScaleX e ScaleY. dimensionar um elemento Ilustração em escala
SkewTransform Distorce um elemento pelos valores especificados de AngleX e AngleY. Inclinar um elemento Ilustração de inclinação
TranslateTransform Move (traduz) um elemento pelas quantidades especificadas de X e Y. Traduzir um elemento Traduzir ilustração

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

Classe Descrição Exemplo
TransformGroup Agrupa vários objetos TransformGroup em um único Transform que você pode aplicar para transformar propriedades. aplicar várias transformações a um objeto
MatrixTransform Cria transformações personalizadas que não são fornecidas pelas outras classes Transform. Ao usar um MatrixTransform, você manipula uma Matrix diretamente. usar um MatrixTransform para criar transformações personalizadas

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

Propriedades de transformação comuns

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 comumente usados do Windows Presentation Foundation (WPF) e suas propriedades de transformação.

Tipo Propriedades de transformação
Brush Transform, RelativeTransform
ContainerVisual Transform
DrawingGroup Transform
FrameworkElement RenderTransform, LayoutTransform
Geometry Transform
TextEffect Transform
UIElement RenderTransform

Transformações e Sistemas de Coordenadas

Quando você transforma um objeto, você não apenas transforma o objeto, você 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 propriedades de centro para definir porque o efeito de tradução é o mesmo, independentemente de onde está centrado.

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 FrameworkElement girou 45 graus cerca de (0,0)
Um elemento retângulo girava 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 gira em torno de seu canto superior esquerdo, (0, 0). As classes RotateTransform, ScaleTransforme SkewTransform fornecem propriedades CenterX e CenterY que permitem especificar o ponto em que 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.

Uma Geometria girava 45 graus cerca de (25, 25)
Um elemento retangular girava 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 um Transform e aplique-o a uma das duas propriedades que a classe FrameworkElement fornece:

  • LayoutTransform – Uma transformação que é aplicada antes do processo 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 do passo de layout. Usando a propriedade RenderTransform em vez da propriedade LayoutTransform, você pode obter benefícios de desempenho.

Qual imóvel você deve usar? Devido aos benefícios de desempenho que ele oferece, use a propriedade RenderTransform sempre que possível, especialmente quando você usa objetos Transform animados. Use a propriedade LayoutTransform ao dimensionar, girar ou inclinar e você precisa que o pai do elemento 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 à sua posição original como parte de seu processamento.

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

Exemplo: girar um FrameworkElement 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 em torno do ponto (0, 0). Como o exemplo não especifica um valor central, o botão gira em torno do ponto (0, 0), que é seu canto superior esquerdo. O RotateTransform é aplicado à propriedade RenderTransform. A ilustração a seguir mostra o resultado da transformação.

Um botão foi transformado utilizando RenderTransform
Rotação no sentido horário 45 graus a partir 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 próximo exemplo também usa um RotateTransform para girar um botão 45 graus no sentido horário, mas também define a 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 do canto superior esquerdo. A ilustração a seguir mostra o resultado da transformação.

Um botão transformado em torno de seu centro
Rotação no sentido horário de 45 graus 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, em seguida, reposicionado porque seu tamanho mudou. A ilustração a seguir mostra o resultado da transformação.

Um botão transformado usando LayoutTransform
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

Como as classes Transform herdam da classe Animatable, elas 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 com um RotateTransform para fazer um Button girar no lugar quando ele é 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 o Visão Geral de Animações.

Funcionalidades Congeláveis

Como herda da classe Freezable, a classe Transform fornece várias funcionalidades especiais: os objetos Transform podem ser declarados como recursos , partilhados entre múltiplos objetos, tornados de leitura apenas para melhorar o desempenho, clonados e tornados seguros para threads. Para obter mais informações sobre os diferentes recursos fornecidos por Freezable objetos, consulte a Freezable Objects Overview.

Ver também