如何：水平或垂直翻轉 UIElement

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

翻轉按鈕的圖例

下圖顯示要翻轉的按鈕。

不含轉換的按鈕graphicsmm_buttonflipbeforeflip
要翻轉的 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>

圍繞 (0,0) 水平翻轉的按鈕graphicsmm_buttonfliphorizontalflip_displaced
套用 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>

圍繞其中心水平翻轉的按鈕graphicsmm_buttonfliphorizontalflip_inplace
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>

圍繞其中心垂直翻轉的按鈕graphicsmm_buttonflipverticalflip_inplace
垂直翻轉按鈕

另請參閱

• 轉換概觀