方法: UIElement を左右または上下に反転させる

この例からは、ScaleTransform を使用し、UIElement を左右または上下に反転させる方法がわかります。 この例では、ScaleTransform をその RenderTransform プロパティに適用することで Button コントロール (UIElement 型) が反転します。

ボタンを反転させる図

反転するボタンを以下で図解します。

反転する 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 のボタン

ボタンを上下に反転させる図

ボタンを上下に反転させるには、ScaleTransform オブジェクトの ScaleY プロパティをその ScaleX プロパティの代わりに設定します。

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

上下に反転したボタン

関連項目

• 変換の概要