変換の概要

更新 : 2007 年 11 月

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

このトピックには次のセクションが含まれています。

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

変換とは

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

メモ :
Microsoft と同様に、Windows Presentation Foundation (WPF) は行優先の行列を使用します。ベクタは、列ベクタではなく行ベクタとして表されます。

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

2-D 変換行列

行列値を操作することによって、オブジェクトの回転、拡大縮小、傾斜、および移動 (平行移動) を行うことができます。たとえば、第 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 クラスが用意されています。

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

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

一般的な変換プロパティ

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

変換と座標系

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

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

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

<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°回転した四角形要素

<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°回転

<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 を使用したボタンの回転

<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 オブジェクトの概要」を参照してください。

参照

処理手順

2-D 変換のサンプル

参照

Transform

Matrix

その他の技術情報

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