如何：水平或垂直翻轉 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>

垂直翻轉按鈕

另請參閱

• 轉換概觀