Cómo: Voltear un control UIElement horizontal o verticalmente

En este ejemplo se muestra cómo utilizar una transformación ScaleTransform para voltear en sentido horizontal o vertical un elemento UIElement. En este ejemplo, se voltea un control Button (un tipo de elemento UIElement) aplicándole una transformación ScaleTransform a su propiedad RenderTransform.

Ejemplo

En la ilustración siguiente se muestra el botón que se va a voltear.

Elemento UIElement que se va a voltear

A continuación se muestra el código que crea el botón.

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

Para voltear horizontalmente el botón, cree una transformación ScaleTransform y establezca su propiedad ScaleX en -1. Aplique la transformación ScaleTransform a la propiedad RenderTransform del botón.

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

El botón después de aplicar ScaleTransform

Como puede observar en la ilustración anterior, el botón se ha volteado, pero también se ha movido. Esto se debe a que se volteó desde su esquina superior izquierda. Para voltear el botón en su lugar, se debe aplicar ScaleTransform a su centro, no a su esquina. Una manera fácil de aplicar ScaleTransform al centro de los botones es establecer la propiedad RenderTransformOrigin del botón en 0.5, 0.5.

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

El botón con su propiedad RenderTransformOrigin establecida en 0.5, 0.5

Para voltear verticalmente el botón, establezca la propiedad ScaleY del objeto ScaleTransform en lugar de su propiedad ScaleX.

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

El botón volteado en sentido vertical

Vea también

Conceptos

Información general sobre transformaciones