Como: Inverter horizontalmente ou verticalmente um UIElement

Este exemplo mostra como usar uma ScaleTransform para inverter um UIElement horizontalmente ou verticalmente. Nesse exemplo, um controle Button (um tipo de UIElement) é invertido aplicando uma ScaleTransform a sua propriedade RenderTransform.

Exemplo

A ilustração a seguir mostra o botão a inverter.

O UIElement a inverter

A seguir temos o código que cria o botão.

<Button Content="Flip me!" Padding="5">
</Button>

Para inverter horizontalmente no botão, crie um ScaleTransform e defina seu ScaleX propriedade como -1. Aplicar o ScaleTransform para o botão RenderTransform propriedade.

<Button Content="Flip me!" Padding="5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

O botão após a aplicação de ScaleTransform

Como você pode ver na ilustração anterior, o botão foi invertido, mas ele também foi movido. Isso acontece porque o botão foi virado a partir do seu canto superior esquerdo. Para inverter o botão no mesmo lugar, você precisa aplicar a ScaleTransform a seu centro, não a seu canto. Uma maneira fácil de aplicar a ScaleTransform ao centro do botão é definir a propriedade RenderTransformOrigin do botão como 0,5, 0,5.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

O botão com uma RenderTransformOrigin de 0,5, 0,5

Para inverter verticalmente o botão, defina a propriedade ScaleY do objeto ScaleTransform em vez de sua propriedade ScaleX.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleY="-1" />
  </Button.RenderTransform>
</Button>

Botão invertido verticalmente

Consulte também

Conceitos

Visão Geral sobre Transformações