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

Tento příklad ukazuje, jak pomocí ScaleTransform překlopit UIElement vodorovně nebo svisle. V tomto příkladu je ovládací prvek Button (typ UIElement) převrácen použitím ScaleTransform na jeho vlastnost RenderTransform.

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

Následující obrázek znázorňuje tlačítko pro překlopení.

tlačítko
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 vlastnost ScaleX na -1. Použijte ScaleTransform na vlastnost 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 ukazující, jak tlačítko otočit 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ě, použijte ScaleTransform na jeho střed, ne na jeho roh. Jednoduchý způsob, jak použít ScaleTransform na střed tlačítek, je nastavit vlastnost tlačítka RenderTransformOrigin na hodnotu 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 atributem "RenderTransformOrigin" 0,5, 0,5

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

Pokud chcete tlačítko překlopit svisle, nastavte vlastnost ScaleY objektu ScaleTransform namísto jeho vlastnosti ScaleX.

<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 transformací