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

更新 : 2007 年 11 月

この例では、ScaleTransform を使用して UIElement を左右または上下に反転させる方法について説明します。この例では、Button コントロール (UIElement 型) を、その RenderTransform プロパティに ScaleTransform を適用することによって反転します。

使用例

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

反転対象の 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 オブジェクトの ScaleX プロパティではなく ScaleY プロパティを設定します。

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

上下に反転させたボタン

参照

概念

変換の概要