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.
.gif "Observação") 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
|
Padrão: 1.0 |
Padrão: 0.0 |
0.0 |
|
Padrão: 0.0 |
Padrão: 1.0 |
0.0 |
|
Padrão: 0.0 |
Padrão: 0.0 |
1.0 |
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:
Classe |
Descrição |
Exemplo |
Ilustração |
|---|---|---|---|
Rotaciona um elemento do Angle especificado. |
|
||
Redimensiona um elemento nas quantidades especificadas em ScaleX e ScaleY. |
|
||
Envieza um elemento nas quantidades especificadas em AngleX e AngleY. |
|
||
Move (translada) um elemento nas quantidades especificadas em X e Y. |
|
.png "Ilustração de giro")
.png "Ilustração de dimensionamento")
.png "Ilustração de inclinação")
.png "Ilustração de mudança de posição")
Para criar transformações mais complexas, Windows Presentation Foundation (WPF) fornece as seguintes classes:
Classe |
Descrição |
Exemplo |
|---|---|---|
Agrupa mútliplos objetos TransformGroup em um único Transform para que você possa então aplicar as propriedades de transformação. |
||
Cria transformações personalizadas que não são fornecidas pelas outras classes Transform. Quando você utiliza um MatrixTransform, você manipula a matriz diretamente. |
Como: Usar uma MatrixTransform para Criar Transformações Personalizadas |
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.
Type (Tipo) |
Propriedades de Transformações |
|---|---|
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)
.png "Um FrameworkElement girado 45 graus ao redor 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)
.png "Um Geometry girado 45 graus ao redor 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
.png "Um botão transformado com RenderTransform")
<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
.png "Um botão invertido transformado ao redor de seu 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
.png "Um botão transformado com LayoutTransform")
<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.