HOW TO：水平或垂直翻轉 UIElement

本範例示範如何使用 ScaleTransform 水平或垂直翻轉 UIElement。 在這個範例中，Button 控制項 (型別為 UIElement) 會藉由套用 ScaleTransform 至其 RenderTransform 屬性來翻轉。

範例

下圖顯示要翻轉的按鈕。

要翻轉的 UIElement

以下是建立按鈕的程式碼。

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

若要水平翻轉按鈕，請建立 ScaleTransform 並將其 ScaleX 屬性設為 -1。 將 ScaleTransform 套用到按鈕的 RenderTransform 屬性。

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

套用 ScaleTransform 之後的按鈕

如上圖所示，按鈕不但翻轉，也移動了。 這是因為按鈕是以左上角為中心翻轉。 若要就地翻轉按鈕，請將 ScaleTransform 套用到其中心點，而非邊角。 要將 ScaleTransform 套用到按鈕中心點，最簡單的方式就是將按鈕的 RenderTransformOrigin 屬性設為 0.5, 0.5。

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

RenderTransformOrigin 設為 0.5, 0.5 的按鈕

若要垂直翻轉按鈕，請設定 ScaleTransform 物件的 ScaleY 屬性，而非 ScaleX 屬性。

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

垂直翻轉的按鈕

請參閱

概念

轉換概觀