変換の概要Transforms overview

UI 要素の相対座標系を変更して、Windows ランタイム API で変換を使う方法について説明します。Learn how to use transforms in the Windows Runtime API, by changing the relative coordinate systems of elements in the UI. 変換を使うと、スケーリング、回転、x-y 空間内での平行移動など、個々の XAML 要素の外観を調整できます。This can be used to adjust the appearance of individual XAML elements, such as scaling, rotating, or transforming the position in x-y space.

変換とは何ですか。What is a transform?

変換とは、座標空間の間で点をマップする、つまり、変換する方法を定義することです。A transform defines how to map, or transform, points from one coordinate space to another coordinate space. 変換が UI 要素に適用された場合、その UI 要素の外観が UI の一部として画面にレンダリングされる方法が変更されます。When a transform is applied to a UI element, it changes how that UI element is rendered to the screen as part of the UI.

平行移動、回転、スケーリング、スキュー (せん断) という 4 つの種類の変換を考えてみます。Think of transforms in four broad classifications: translation, rotation, scaling and skew (or shear). グラフィックス API を使って UI 要素の外観を変更する目的で、最も簡単なのは通常、一度に 1 つの演算のみを定義する変換を作成することです。For the purposes of using graphics APIs to change the appearance of UI elements, it's usually easiest to create transforms that define only one operation at a time. そのため、Windows ランタイムでは、これらの変換の種類ごとに個別のクラスが定義されています。So the Windows Runtime defines a discrete class for each of these transform classifications:

これらのうちで、UI のシナリオとして最もよく使うと思われるのは、TranslateTransformScaleTransform です。Of these, you're likely to use TranslateTransform and ScaleTransform most often for UI scenarios.

変換を組み合わせることができ、これをサポートする 2 つの Windows ランタイム クラスがあります。CompositeTransform TransformGroupします。You can combine transforms, and there are two Windows Runtime classes that support this: CompositeTransform and TransformGroup. CompositeTransform では、変換が、回転、スキュー、回転、平行移動の順に適用されます。In a CompositeTransform, transforms are applied in this order: scale, skew, rotate, translate. 変換を別の順序で適用する場合は、CompositeTransform ではなく、TransformGroup を使います。Use TransformGroup instead of CompositeTransform if you want the transforms applied in a different order. 詳しくは、「CompositeTransform」をご覧ください。For more info, see CompositeTransform.

変換とレイアウトTransforms and layout

XAML レイアウトでは、変換はレイアウト パスの完了後に適用されます。利用可能なスペースの計算や他のレイアウトに関する決定は、変換が適用される前に行われています。In XAML layout, transforms are applied after the layout pass is complete, so available space calculations and other layout decisions have been made before the transforms are applied. レイアウトが最優先されるため、レイアウト時にスペースを割り当てる、Grid セルなどのレイアウト コンテナー内にある要素を変換した場合に、予期しない結果になる可能性があります。Because layout comes first, you'll sometimes get unexpected results if you transform elements that are in a Grid cell or similar layout container that allocates space during layout. 変換された要素は、途中で切れたり隠されたりことがあります。親コンテナー内のスペースを分割するとき、変換後のサイズを計算していなかったスペースに描画されるためです。The transformed element may appear truncated or obscured because it's trying to draw into an area that didn't calculate the post-transform dimensions when dividing space within its parent container. 変換結果を試し、いくつかの設定の調整が必要になる場合があります。You may need to experiment with the transform results and adjust some settings. たとえば、アダプティブ レイアウトやスター サイズ指定に頼るのではなく、Center プロパティを変更したり、レイアウト スペースの固定ピクセル値を宣言したりすることで、親が十分なスペースを確実に割り当てるようにすることが必要になる場合があります。For example, instead of relying on adaptive layout and star sizing, you may need to change the Center properties or declare fixed pixel measurements for layout space to make sure the parent allots enough space.

移行に注意してください。 Windows Presentation Foundation (WPF) が、 LayoutTransformレイアウト パスの前に変換を適用するプロパティ。Migration note: Windows Presentation Foundation (WPF) had a LayoutTransform property that applied transforms prior to the layout pass. ただし、Windows ランタイム XAML では LayoutTransform のプロパティがサポートされていません。But Windows Runtime XAML doesn't support a LayoutTransform property. (Microsoft Silverlight にも、このプロパティはありませんでした。)(Microsoft Silverlight didn't have this property either.)

UI 要素への変換の適用Applying a transform to a UI element

変換をオブジェクトに適用するときは、通常、適用して UIElement.RenderTransform プロパティを設定します。When you apply a transform to an object, you typically do so to set the property UIElement.RenderTransform. このプロパティを設定すると、オブジェクトは、文字どおりのピクセル単位では変更されません。Setting this property does not literally change the object pixel by pixel. このプロパティにより、そのオブジェクトが存在するローカル座標空間内で変換が適用されます。What the property really does is apply the transform within the local coordinate space in which that object exists. その後、レンダリング ロジックとレイアウト後処理により、結合された座標空間がレンダリングされます。これにより、オブジェクトの外観が変わり、そのレイアウト位置も変わる可能性があります (TranslateTransform が適用された場合)。Then the rendering logic and operation (post-layout) renders the combined coordinate spaces, making it look like the object has changed appearance and also potentially its layout position (if TranslateTransform was applied).

既定では、レンダリングされる各変換の中心点はターゲット オブジェクトのローカル座標系の原点 (0,0) になります。By default, each render transform is centered at the origin of the target object's local coordinate system—its (0,0). その唯一の例外は、中心点を設定するプロパティのない TranslateTransform です。平行移動の結果は、どこを中心点としても同じであるためです。The only exception is a TranslateTransform, which has no center properties to set because the translation effect is the same regardless of where it is centered. しかしその他の各変換には、CenterXCenterY の値を設定するプロパティがあります。But the other transforms each have properties that set CenterX and CenterY values.

使用して変換を使用するたびに UIElement.RenderTransformに別のプロパティがあることに注意してください UIElement です。変換の動作方法に影響します。RenderTransformOriginします。Whenever you use transforms with UIElement.RenderTransform, remember that there's another property on UIElement that affects how the transform behaves: RenderTransformOrigin. RenderTransformOrigin で宣言するのは、変換全体を要素の既定点 (0,0) に適用するか、その要素の相対座標空間内のその他の原点に適用するかです。What RenderTransformOrigin declares is whether the whole transform should apply to the default (0,0) point of an element or to some other origin point within the relative coordinate space of that element. 一般的な要素の場合、(0,0) では変換が左上隅に適用されます。For typical elements, (0,0) places the transform to the top left corner. 求める効果によっては、変換の CenterXCenterY の値を調整するのではなく、RenderTransformOrigin を変更することを選ぶこともできます。Depending on what effect you want, you might choose to change RenderTransformOrigin rather than adjusting the CenterX and CenterY values on transforms. RenderTransformOriginCenterX / CenterY の値の両方を適用する場合、まったく予期しない結果になる可能性があることに注意してください。特に、いずれかの値をアニメーション化している場合です。Note that if you apply both RenderTransformOrigin and CenterX / CenterY values, the results can be pretty confusing, especially if you're animating any of the values.

ヒット テストの目的で、変換が適用されたオブジェクトは、x-y スペースでのその外観と一貫した、予期された方法で入力に応答し続けます。For hit-testing purposes, an object to which a transform is applied continues to respond to input in an expected way that's consistent to its visual appearance in x-y space. たとえば、TranslateTransform を使って、UI で Rectangle を横方向に 400 ピクセル移動した場合は、Rectangle が視覚的に表示される位置をユーザーが押すと、その RectanglePointerPressed イベントに応答します。For example, if you've used a TranslateTransform to move a Rectangle 400 pixels laterally in the UI, that Rectangle responds to PointerPressed events when the user presses the point where the Rectangle appears visually. 平行移動前に Rectangle があった位置をユーザーが押した場合、false イベントが発生することはありません。You won't get false events if the user presses the area where the Rectangle was before being translated. ヒット テストに影響を与える z インデックスについて考えた場合、変換の適用による違いはありません。x-y スペース内のある位置の入力イベントをどの要素が処理するかを制御する z インデックスは、コンテナー内での子の宣言順に従って評価されます。For any z-index considerations that affect hit testing, applying a transform makes no difference; the z-index that governs which element handles input events for a point in x-y space is still evaluated using the child order as declared in a container. その順序は、通常、XAML で要素を宣言する順序と同じです。ただし、Canvas オブジェクトの子要素については、Canvas.ZIndex 添付プロパティを子要素に適用して、順序を調整できます。That order is usually the same as the order in which you declare the elements in XAML, although for child elements of a Canvas object you can adjust the order by applying the Canvas.ZIndex attached property to child elements.

その他の変換プロパティOther transform properties

  • Brush.Transform Brush.RelativeTransform:これらの影響を与える方法、 ブラシ座標領域内の空間を使用する、ブラシforegrounds や背景などのビジュアルのプロパティの設定に適用されます。Brush.Transform, Brush.RelativeTransform: These influence how a Brush uses coordinate space within the area that the Brush is applied to set visual properties such as foregrounds and backgrounds. これらの変換は、ほとんどの一般的なブラシ (通常は SolidColorBrush で単色を設定する) には関連していませんが、ImageBrush または LinearGradientBrush で領域に描画するときには有用な場合があります。These transforms aren't relevant for the most common brushes (which are typically setting solid colors with SolidColorBrush) but might be occasionally useful when painting areas with an ImageBrush or LinearGradientBrush.
  • Geometry.Transform:このプロパティを使用してそのジオメトリを使用する前にジオメトリへの変換を適用する場合があります、 Path.Data プロパティの値。Geometry.Transform: You might use this property to apply a transform to a geometry prior to using that geometry for a Path.Data property value.

変換をアニメーション化Animating a transform

変換オブジェクトをアニメーション化することができます。Transform objects can be animated. Transform をアニメーション化するには、アニメーション化するプロパティに互換性のある種類のアニメーションを適用します。To animate a Transform, apply an animation of a compatible type to the property you want to animate. これは、通常、DoubleAnimation オブジェクトまたは DoubleAnimationUsingKeyFrames オブジェクトを使ってアニメーションを定義していることを意味します。なぜなら、すべての変換プロパティは、型 Double であるためです。This typically means you're using DoubleAnimation or DoubleAnimationUsingKeyFrames objects to define the animation, because all of the transform properties are of type Double. UIElement.RenderTransform 値に使われる変換に影響を与えるアニメーションは、再生時間が 0 以外であっても、依存型アニメーションとは見なされません。Animations that affect a transform that's used for a UIElement.RenderTransform value are not considered to be dependent animations, even if they have a nonzero duration. 依存型アニメーションについて詳しくは、「ストーリーボードに設定されたアニメーション」をご覧ください。For more info about dependent animations, see Storyboarded animations.

プロパティをアニメーション化して、最終的な外観という点で同様の効果を生み出す場合、たとえば、TranslateTransform を適用する代わりに、FrameworkElementWidthHeight をアニメーション化する場合、このようなアニメーションは、ほとんど常に依存型アニメーションとして扱われます。If you animate properties to produce an effect similar to a transform in terms of the net visual appearance—for example, animating the Width and Height of a FrameworkElement rather than applying a TranslateTransform—such animations are almost always treated as dependent animations. アニメーションを有効にする必要があるため、パフォーマンスに大きな問題が発生する可能性があります。特に、ユーザーの操作をサポートしながら、そのオブジェクトをアニメーション化する場合です。You'd have to enable the animations and there could be significant performance issues with the animation, especially if you're trying to support user interaction while that object is being animated. そのため、望ましいのは、変換を使ってアニメーション化することです。この場合は、他のどのプロパティもアニメーション化されず、アニメーションが依存型アニメーションとして扱われることはありません。For that reason it's preferable to use a transform and animate it rather than animating any other property where the animation would be treated as a dependent animation.

変換をターゲット設定するには、既にある TransformRenderTransform の値にする必要があります。To target the transform, there must be an existing Transform as the value for RenderTransform. 通常は、適切な種類の変換の要素を、場合によってはその変換にプロパティを設定せずに、最初の XAML に配置します。You typically put an element for the appropriate transform type in the initial XAML, sometimes with no properties set on that transform.

通常は、間接的なターゲット設定の手法を使って変換のプロパティにアニメーションを適用します。You typically use an indirect targeting technique to apply animations to the properties of a transform. 間接的なターゲット設定の構文について詳しくは、「ストーリーボードに設定されたアニメーション」と「プロパティ パス構文」をご覧ください。For more info about indirect targeting syntax, see Storyboarded animations and Property-path syntax.

コントロールの既定のスタイルで、表示状態の動作の一部として変換のアニメーションを定義する場合があります。Default styles for controls sometimes define animations of transforms as part of their visual-state behavior. たとえば、ProgressRing の表示状態で、アニメーション化した RotateTransform 値を使って、リングのドットを "回転" させます。For example, the visual states for ProgressRing use animated RotateTransform values to "spin" the dots in the ring.

ここでは、変換をアニメーション化する方法の簡単な例を示します。Here's a simple example of how to animate a transform. この例では、RotateTransformAngle をアニメーション化して、その視覚的な中心点の周りで Rectangle を回転させます。In this case, it's animating the Angle of a RotateTransform to spin a Rectangle in place around its visual center. また、この例では、RotateTransform に名前を付けません。間接的なアニメーションのターゲット設定には不要なためです。しかしその代わりに、変換には名前を付けませんが、変換が適用される要素に名前を付けることで、(UIElement.RenderTransform).(RotateTransform.Angle) などの間接的なターゲット設定を使うことができます。This example names the RotateTransform so doesn't need indirect animation targeting, but you could alternatively leave the transform unnamed, name the element that the transform's applied to, and use indirect targeting such as (UIElement.RenderTransform).(RotateTransform.Angle).

<StackPanel Margin="15">
  <StackPanel.Resources>
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
       Storyboard.TargetName="myTransform"
       Storyboard.TargetProperty="Angle"
       From="0" To="360" Duration="0:0:5" 
       RepeatBehavior="Forever" />
    </Storyboard>
  </StackPanel.Resources>
  <Rectangle Width="50" Height="50" Fill="RoyalBlue"
   PointerPressed="StartAnimation">
    <Rectangle.RenderTransform>
      <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</StackPanel>
void StartAnimation (object sender, RoutedEventArgs e) {
    myStoryboard.Begin();
}

実行時に、座標の基準のアカウンティングAccounting for coordinate frames of reference at run time

UIElement という名前のメソッドを持つ TransformToVisual、生成することができます、 変換2 つの UI 要素の座標のフレームの参照を相互に関連付けます。UIElement has a method named TransformToVisual, which can generate a Transform that correlates the coordinate frames of reference for two UI elements. このメソッドを使って要素をアプリの既定の参照座標系に比較できます。この場合は最初のパラメーターとしてルート ビジュアルを渡します。You can use this to compare an element to the app's default coordinate frame of reference if you pass the root visual as the first parameter. この方法が役立つことがあるのは、別の要素から入力イベントをキャプチャする場合や、実際にレイアウト パスを要求せずにレイアウト動作を予測しようとする場合です。This can be useful if you've captured an input event from a different element, or if you are trying to predict layout behavior without actually requesting a layout pass.

ポインター イベントから取得したイベント データを使うと、GetCurrentPoint メソッドにアクセスできます。このメソッドで、参照座標系をアプリの既定のものではなく特定の要素のものに変更するように、relativeTo パラメーターを指定できます。Event data obtained from pointer events provides access to a GetCurrentPoint method, where you can specify a relativeTo parameter to change the coordinate frame of reference to a specific element rather than the app default. これにより、平行移動変換が内部で適用され、戻り値となる PointerPoint オブジェクトの作成時に x-y 座標データが変換されます。This approach simply applies a translate transform internally and transforms the x-y coordinate data for you when it creates the returned PointerPoint object.

数学的変換を記述します。Describing a transform mathematically

変換は、変換マトリックスの観点から説明できます。A transform can be described in terms of a transformation matrix. 3×3 マトリックスは、2 次元の x-y 平面での変換を記述するために使われます。A 3×3 matrix is used to describe the transformations in a two-dimensional, x-y plane. アフィン変換マトリックスでは、平行移動前の任意の数の線形変換 (回転やスキュー (せん断) など) を 1 つのマトリックスの乗算にまとめることができます。Affine transformation matrices can be multiplied to form any number of linear transformations, such as rotation and skew (shear), followed by translation. アフィン変換マトリックスの最後の列は (0, 0, 1) に等しいため、最初の 2 列のメンバーのみを数学的記述で指定する必要があります。The final column of an affine transformation matrix is equal to (0, 0, 1), so you need to specify only the members of the first two columns in the mathematical description.

変換の数学的記述が役立つことがあるのは、数学的な背景知識がある場合や、やはりマトリックスを使って座標空間の変換を記述するグラフィックス プログラミング手法に精通している場合です。The mathematical description of a transform might be useful to you if you have a mathematical background or a familiarity with graphics-programming techniques that also use matrices to describe transformations of coordinate space. 変換-派生クラスでは、express 3 × 3 のマトリックスの観点から直接変換することができます。MatrixTransformします。There's a Transform-derived class that enables you to express a transformation directly in terms of its 3×3 matrix: MatrixTransform. MatrixTransformが、 マトリックスプロパティで、6 つのプロパティを持つ構造を保持します。M11 M12 M21 m22... OffsetX OffsetYします。MatrixTransform has a Matrix property, which holds a structure that has six properties: M11, M12, M21, M22, OffsetX and OffsetY. Matrix プロパティには Double 値が使われ、各プロパティはアフィン変換マトリックスの 6 つの該当する値 (列 1 および 2) に対応します。Each Matrix property uses a Double value and corresponds to the six relevant values (columns 1 and 2) of an affine transformation matrix.

M11M11 M21M21 00
M12M12 M22M22 00
OffsetXOffsetX offsetYOffsetY 11

TranslateTransformScaleTransformRotateTransform、または SkewTransform の各オブジェクトで記述できる変換は、MatrixTransformMatrix 値で同様に記述できます。Any transform that you could describe with a TranslateTransform, ScaleTransform, RotateTransform, or SkewTransform object could be described equally by a MatrixTransform with a Matrix value. ただし、一般的に使われるのは、TranslateTransform などです。それらの変換クラスのプロパティは、Matrix でベクター成分を設定するよりも、概念化が簡単なためです。But you typically just use TranslateTransform and the others because the properties on those transform classes are easier to conceptualize than setting the vector components in a Matrix. また、変換の個別のプロパティをアニメーション化することも簡単です。Matrix は実際には構造体であり、DependencyObject ではありません。したがって、アニメーション化された個々の値をサポートすることはできません。It's also easier to animate the discrete properties of transforms; a Matrix is actually a structure and not a DependencyObject, so it can't support animated individual values.

変換演算の適用を可能にする XAML 設計ツールには、結果を MatrixTransform としてシリアル化するものもあります。Some XAML design tools that enable you to apply transformation operations will serialize the results as a MatrixTransform. この場合に最善と思われる方法は、Matrix の値を XAML で直接操作しようとすることではなく、もう一度同じ設計ツールを使って変換結果を変更し、もう一度 XAML でシリアル化することです。In this case it may be best to use the same design tool again to change the transformation effect and serialize the XAML again, rather than trying to manipulate the Matrix values yourself directly in the XAML.

3-D 変換3-D transforms

Windows 10 では、XAML に新しいプロパティである UIElement.Transform3D が導入されました。このプロパティを使用すると、UI で使用する 3D 効果を作成できます。In Windows 10, XAML introduced a new property, UIElement.Transform3D, that can be used to create 3D effects with UI. そのためには、PerspectiveTransform3D を使用して共有 3D 視点、つまり "カメラ" をシーンに追加し、CompositeTransform を使用する場合のように、CompositeTransform3D を使用して 3D 空間の要素を変換します。To do this, use PerspectiveTransform3D to add a shared 3D perspective or "camera" to your scene, and then use CompositeTransform3D to transform an element in 3D space, like you would use CompositeTransform. 3D 変換を実装する方法の説明については、UIElement.Transform3D のページをご覧ください。See UIElement.Transform3D for a discussion of how to implement 3D transforms.

1 つのオブジェクトにのみ適用されるもっと簡単な 3D 効果については、UIElement.Projection プロパティを使用できます。For simpler 3D effects that only apply to a single object, the UIElement.Projection property can be used. このプロパティの値として PlaneProjection を使用することは、固定された視点の変換と 1 つ以上の 3D 変換を要素に適用することに相当します。Using a PlaneProjection as the value for this property is equivalent to applying a fixed perspective transform and one or more 3D transforms to the element. この種類の変換については、「XAML UI 用の 3-D 遠近効果」でより詳しく説明しています。This type of transform is described in more detail in 3-D perspective effects for XAML UI.

関連トピックRelated topics