Postupy: Překlopení prvku UIElement vodorovně nebo svisle

Tento příklad ukazuje, jak použít ScaleTransform k překlopení UIElement vodorovně nebo svisle. V tomto příkladu Button je ovládací prvek (typ UIElement) převrácený použitím vlastnosti ScaleTransformRenderTransform .

Obrázek pro překlopení tlačítka

Následující obrázek znázorňuje tlačítko, které chcete překlopit.

Překlopení prvku UIElement

Následující kód ukazuje kód, který tlačítko vytvoří.

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

Obrázek pro vodorovné překlopení tlačítka

Pokud chcete tlačítko překlopit vodorovně, vytvořte ScaleTransform a nastavte jeho ScaleX vlastnost na -1. Použijte vlastnost ScaleTransform tlačítka RenderTransform .

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

Tlačítko po použití ScaleTransform

Obrázek pro překlopení tlačítka na místě

Jak vidíte na předchozím obrázku, tlačítko se překlopilo, ale také se přesunulo. Je to proto, že se tlačítko překlopilo z levého horního rohu. Pokud chcete tlačítko překlopit na místě, chcete ho ScaleTransform použít na střed, ne jeho roh. Jednoduchým způsobem, jak použít ScaleTransform střed tlačítek, je nastavit vlastnost tlačítka RenderTransformOrigin na 0,5, 0,5.

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

Tlačítko s RenderTransformOrigin 0,5, 0,5

Obrázek pro překlopení tlačítka svisle

Pokud chcete tlačítko překlopit svisle, nastavte vlastnost objektu ScaleTransformScaleY místo jeho ScaleX vlastnosti.

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

Svisle překlopené tlačítko

Viz také

• Přehled transformace