Compartir a través de

Cómo: Voltear un control UIElement horizontal o verticalmente

Actualización: noviembre 2007

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
Botón sin transformación

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
Botón volteado horizontalmente alrededor del punto (0,0)

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
Botón volteado horizontalmente alrededor de su centro

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
Botón volteado verticalmente alrededor de su centro

Vea también

Conceptos

Información general sobre transformaciones

  • Last updated on