方法: UIElement を水平方向または垂直方向に反転する

この例では、ScaleTransform を使用して UIElement を水平方向または垂直方向に反転する方法を示します。 この例では、Button コントロール (UIElementの種類) は、RenderTransform プロパティに ScaleTransform を適用することによって反転されます。

ボタンを反転させる図

次の図は、反転するボタンを示しています。

反転する UIElement

ボタンを作成するコードを次に示します。

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

ボタンを水平方向に反転させる図

ボタンを水平方向に反転するには、ScaleTransform を作成し、その ScaleX プロパティを -1 に設定します。 ボタンの RenderTransform プロパティに ScaleTransform を適用します。

<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 のボタン

ボタンを垂直方向に反転させる図

ボタンを垂直方向に反転するには、ScaleX プロパティではなく、ScaleTransform オブジェクトの ScaleY プロパティを設定します。

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

を中心に上下に反転したボタン
垂直方向に反転されたボタン

関連項目

• 変換の概要