次の方法で共有

変換の概要

  • [アーティクル]

ここでは、2-D Transform クラスを使用して FrameworkElement オブジェクトの回転、拡大縮小、移動 (平行移動)、および傾斜を行う方法について説明します。

このトピックは、次のセクションで構成されています。

  • 変換とは
  • 変換クラス
  • 一般的な変換プロパティ
  • 変換と座標系
  • FrameworkElement の変換
  • 例 : FrameworkElement を 45°回転する
  • 変換のアニメーション化
  • Freezable の機能
  • 関連トピック

変換とは

Transform は、ある座標空間の点を別の座標空間にマップまたは変換する方法を定義します。 このマッピングは、Double 値を示す 3 つの列を持つ 3 つの行のコレクションである、変換 Matrix によって示されます。

メモメモ

Windows Presentation Foundation (WPF) では、行優先の行列が使用されます。ベクターは、列ベクターではなく行ベクターとして表されます。

次の表は、WPF 行列の構造を示しています。

2-D 変換行列

M11

既定値: 1.0

M12

既定値: 0.0

0.0

M21

既定値: 0.0

M22

既定値: 1.0

0.0

OffsetX

既定値: 0.0

OffsetY

既定値: 0.0

1.0

行列値を操作することによって、オブジェクトの回転、拡大縮小、傾斜、および移動 (平行移動) を行うことができます。 たとえば、第 3 行の第 1 列にある値 (OffsetX 値) を 100 に変更した場合は、その値を使用し、オブジェクトを x 軸に沿って 100 単位移動できます。 第 2 行の第 2 列にある値を 3 に変更した場合は、この値を使用し、オブジェクトを現在の高さの 3 倍に引き伸ばすことができます。 両方の値を変更した場合、オブジェクトは x 軸に沿って 100 単位移動し、オブジェクトの高さは 3 倍に引き伸ばされます。 Windows Presentation Foundation (WPF) はアフィン変換のみをサポートするため、右の列の値は常に 0、0、1 です。

Windows Presentation Foundation (WPF) では行列値を直接操作できますが、基になる行列構造体の構成方法がわからなくてもオブジェクトを変換できる、いくつかの Transform クラスも提供されています。 たとえば、変換行列を操作する代わりに、ScaleTransform クラスを使用し、ScaleX プロパティと ScaleY プロパティを設定してオブジェクトをスケーリングできます。 同様に、RotateTransform クラスを使用すると、Angle プロパティを設定するだけでオブジェクトを回転できます。

変換クラス

Windows Presentation Foundation (WPF) には、一般的な変換操作用に次の 2-D Transform クラスが用意されています。

クラス

説明

例

図

RotateTransform

指定した Angle だけ要素を回転します。

方法 : オブジェクトを回転させる

図の回転

ScaleTransform

指定した ScaleX および ScaleY の量だけ要素をスケーリングします。

方法 : 要素をスケーリングする

図のスケーリング

SkewTransform

指定した AngleX および AngleY の量だけ要素を傾斜させます。

方法 : 要素を傾斜させる

図の傾斜

TranslateTransform

指定した X および Y の量だけ要素を移動 (平行移動) します。

方法 : 要素を変換する

図の変換

より複雑な変換を作成するために、Windows Presentation Foundation (WPF) は次の 2 つのクラスを提供します。

クラス

説明

例

TransformGroup

複数の TransformGroup オブジェクトを、変換プロパティに適用できる単一の Transform にグループ化します。

方法 : オブジェクトに複数の変換を適用する

MatrixTransform

他の Transform クラスによって提供されないカスタム変換を作成します。 MatrixTransform を使用する場合は、Matrix を直接操作します。

方法 : MatrixTransform を使用してカスタム変換を作成する

Windows Presentation Foundation (WPF) は 3-D 変換も提供します。 詳細については、Transform3D クラスを参照してください。

一般的な変換プロパティ

オブジェクトを変換する方法の 1 つとして、適切な Transform 型を宣言してオブジェクトの変換プロパティに適用する方法があります。 さまざまな型のオブジェクトが、異なる種類の変換プロパティを持ちます。 一般的に使用されるいくつかの Windows Presentation Foundation (WPF) 型とその変換プロパティを次の表に示します。

型

変換プロパティ

Brush

Transform, RelativeTransform

ContainerVisual

Transform

DrawingGroup

Transform

FrameworkElement

RenderTransform, LayoutTransform

Geometry

Transform

TextEffect

Transform

UIElement

RenderTransform

変換と座標系

オブジェクトを変換する場合は、オブジェクトを変換するだけでなく、オブジェクトが存在する座標空間を変換します。 既定では、変換の中心 (0,0) はターゲット オブジェクトの座標系の基点です。 唯一の例外は TranslateTransform です。TranslateTransform は、中心の位置に関係なく変換効果が同じであるため、中心を設定するためのプロパティはありません。

次の例では、RotateTransform を使用して、FrameworkElement の一種である Rectangle 要素をその既定の位置 (0, 0) を中心に 45°回転します。 回転の効果を次の図に示します。

点 (0,0) を中心として 45°回転した四角形要素

(0,0) を軸に 45 度回転した FrameworkElement

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

既定では、この要素は左上隅 (0, 0) を中心に回転します。 RotateTransform、ScaleTransform、および SkewTransform の各クラスは、変換が適用される点を指定できる CenterX プロパティと CenterY プロパティを提供します。

次の例でも、RotateTransform を使用して Rectangle 要素を 45°回転していますが、CenterX プロパティと CenterY プロパティは RotateTransform の中心が (25, 25) になるように設定されています。 回転の効果を次の図に示します。

点 (25, 25) を中心として 45°回転した四角形要素

(25, 25) を軸に 45 度回転した Geometry

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

FrameworkElement の変換

FrameworkElement に変換を適用するには、Transform を作成して、FrameworkElement クラスが提供する 2 つのプロパティのいずれかに適用します。

  • LayoutTransform – レイアウト パスの前に適用される変換。 変換の適用後に、レイアウト システムは要素の変換後のサイズおよび位置を処理します。

  • RenderTransform – 要素の外観を変更する変換。レイアウト パスの完了後に適用されます。 LayoutTransform プロパティの代わりに RenderTransform プロパティを使用すると、パフォーマンスを向上できます。

どちらのプロパティを使用すればよいでしょうか。 パフォーマンスを向上させるために、可能な場合 (特にアニメーション化された Transform オブジェクトを使用する場合) は必ず、RenderTransform プロパティを使用してください。 拡大縮小、回転、または傾斜を行うときに、要素の変換後のサイズに合わせるために要素の親が必要になる場合は、LayoutTransform プロパティを使用します。 LayoutTransform プロパティと共に使用した場合、TranslateTransform オブジェクトは、要素に影響していないように見えます。 これは、レイアウト システムが処理の一部として平行移動された要素を元の位置に戻すためです。

Windows Presentation Foundation (WPF) のレイアウトの詳細については、「レイアウト システム」の概要を参照してください。

例 : FrameworkElement を 45°回転する

次の例では、RotateTransform を使用して、ボタンを時計回りに 45°回転します。 このボタンは、他にも 2 つのボタンを持つ StackPanel 内に存在します。

既定では、RotateTransform は点 (0,0) を中心として回転します。 この例では中心の値を指定しないため、ボタンはその左上隅の点 (0, 0) を中心として回転します。 RotateTransform は、RenderTransform プロパティに適用されます。 変換の結果を次の図に示します。

左上隅から時計回りに 45°回転

RenderTransform を使用して変換されたボタン

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

次の例でも RotateTransform を使用してボタンを時計回りに 45 度回転していますが、ボタンの RenderTransformOrigin を (0.5, 0.5) にも設定しています。 RenderTransformOrigin プロパティの値は、ボタンのサイズに対して相対的です。 その結果、回転はボタンの左上隅ではなく中心に適用されます。 変換の結果を次の図に示します。

中心を軸に時計回りに 45°回転

中心の周りで変換されたボタン

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

RenderTransform プロパティの代わりに LayoutTransform プロパティを使用して、ボタンを回転する例を次に示します。 これにより、変換がボタンのレイアウトに影響し、レイアウト システムで完全パスをトリガーします。 ボタンはサイズが変更されたため、結果として回転し位置が変わります。 変換の結果を次の図に示します。

LayoutTransform を使用したボタンの回転

LayoutTransform を使用して変換されたボタン

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

変換のアニメーション化

Transform クラスは、Animatable を継承するため、アニメーション化することができます。 Transform をアニメーション化するには、互換性のある種類のアニメーションをアニメーション化するプロパティに適用します。

次の例では、Storyboard と DoubleAnimation を、RotateTransform で使用して、Button がクリックされたときにその場で回転させます。

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

サンプル全体については、2-D 変換のサンプルを参照してください。 アニメーションの詳細については、「アニメーションの概要」を参照してください。

Freezable の機能

Transform クラスは Freezable クラスを継承しているため、Transform オブジェクトのリソースとしての宣言、複数のオブジェクトでの共有、読み取り専用に設定することによるパフォーマンスの向上、複製、スレッド セーフの設定など、特殊な機能を備えています。 Freezable オブジェクトのさまざまな機能の詳細については、「Freezable オブジェクトの概要」を参照してください。

参照

参照

Transform

Matrix

その他の技術情報

変換に関する方法のトピック

2-D 変換のサンプル