Como especificar a origem de uma transformação usando valores relativos

Este exemplo mostra como usar valores relativos para especificar a origem de um RenderTransform aplicado a um FrameworkElement.

Quando você gira, dimensiona ou distorce um FrameworkElement usando a propriedade RenderTransform, a configuração padrão aplica a transformação ao canto superior esquerdo do elemento. Se você quiser girar, dimensionar ou inclinar a partir do centro do elemento, poderá compensar definindo o centro da transformação como o centro do elemento. No entanto, essa solução requer que você saiba o tamanho do elemento. Uma maneira mais fácil de aplicar uma transformação ao centro de um elemento é definir sua propriedade RenderTransformOrigin como (0,5, 0,5), em vez de definir um valor central na própria transformação.

Exemplo

O exemplo a seguir usa um RotateTransform para girar um Button 45 graus no sentido horário. Como o exemplo não especifica um centro, o botão gira sobre o ponto (0, 0), que é seu canto superior esquerdo. O RotateTransform é aplicado à propriedade RenderTransform.

A ilustração a seguir mostra o resultado da transformação para o exemplo a seguir.

Uma rotação no sentido horário de 45 graus usando a propriedade 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 usa um RotateTransform para girar um Button 45 graus no sentido horário; no entanto, este exemplo define o RenderTransformOrigin do botão como (0,5, 0,5). Como resultado, a rotação é aplicada ao centro do botão em vez de ao canto superior esquerdo.

A ilustração a seguir mostra o resultado da transformação para o exemplo a seguir.

Uma rotação de 45 graus usando a propriedade RenderTransform com um RenderTransformOrigin de (0,5, 0,5)

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

Para obter mais informações sobre como transformar objetos FrameworkElement, consulte a Visão Geral de Transformações .

Consulte também

• Transform
• Visão geral de transformações
• Tópicos "Como Fazer"