Cómo: Voltear un control UIElement horizontal o verticalmente

Este ejemplo muestra cómo utilizar un ScaleTransform para voltear un UIElement horizontal o verticalmente. En este ejemplo, un control Button (un tipo de UIElement) se voltea aplicando un ScaleTransform a su propiedad RenderTransform.

Ilustración para voltear un botón

La siguiente ilustración muestra el botón para voltear.

Un botón sin transformación graphicsmm_buttonflipbeforeflip
El UIElement a voltear

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

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

Ilustración para voltear un botón horizontalmente

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

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

Un botón volteado horizontalmente aproximadamente (0,0)graphicsmm_buttonfliphorizontalflip_displaced
El botón después de aplicar ScaleTransform

Ilustración para voltear un botón en su lugar

Como puede ver en la ilustración anterior, el botón se ha volteado, pero también se movió. Esto se debe a que el botón se ha volteado desde su esquina superior izquierda. Para voltear el botón en su lugar, debe aplicar el ScaleTransform en el centro, no en la esquina. Una manera fácil de aplicar el ScaleTransform en el 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>

Un botón volteado horizontalmente sobre su centrographicsmm_buttonfliphorizontalflip_inplace
El botón con un RenderTransformOrigin de 0,5, 0,5

Ilustración para voltear un botón verticalmente

Para voltear el botón verticalmente, 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>

Un botón volteado verticalmente sobre su centrographicsmm_buttonflipverticalflip_inplace
Botón volteado verticalmente

Vea también

• Información general sobre transformaciones