UIElement.RenderTransformOrigin プロパティ

  • リファレンス

定義

名前空間:
Microsoft.UI.Xaml
編集

UIElement の境界を基準にして RenderTransform によって宣言された、可能なレンダリング変換の原点を取得または設定します。

public:
 property Point RenderTransformOrigin { Point get(); void set(Point value); };
Point RenderTransformOrigin();

void RenderTransformOrigin(Point value);
public Point RenderTransformOrigin { get; set; }
var point = uIElement.renderTransformOrigin;
uIElement.renderTransformOrigin = point;
Public Property RenderTransformOrigin As Point
<uiElement RenderTransformOrigin="x,y"/>

プロパティ値

Point

レンダー変換の原点。 既定値は、値 0,0 の Point です。

例

この XAML の例では、最初の XAML の 要素に RenderTransformOrigin を設定する方法を示します。 最初に既定の CompositeTransform で実行されるアニメーションでは、RenderTransformOrigin を使用して、既定の 0,0 座標の原点ではなく、円の中心に適用するようにスケール変換と回転変換の両方を変更できます。 これにより、円が中心を回転し、所定の位置に縮小しているように見えます。

注意

アニメーションを開始するには、 Resources からアニメーションを取得し、 Begin を呼び出す必要があります。そのコードは表示されません。

<Ellipse x:Name="e1" RenderTransformOrigin=".5,.5" Height="100" Width="100" Loaded="e1_Loaded_1">
    <Ellipse.Fill>
        <LinearGradientBrush>
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Green" Offset="1"/>
        </LinearGradientBrush>
    </Ellipse.Fill>
    <Ellipse.RenderTransform>
        <CompositeTransform />
    </Ellipse.RenderTransform>
    <Ellipse.Resources>
        <Storyboard x:Name="esb1" >
            <DoubleAnimation RepeatBehavior="3x" Duration="0:0:3" From="0" To="360" Storyboard.TargetName="e1" 
              Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" />
            <DoubleAnimation RepeatBehavior="1x" Duration="0:0:7" From="1" To="0" Storyboard.TargetName="e1" 
              Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" />
            <DoubleAnimation RepeatBehavior="1x" Duration="0:0:7" From="1" To="0" Storyboard.TargetName="e1" 
              Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" />
        </Storyboard>
    </Ellipse.Resources>
</Ellipse>

注釈

RenderTransformOrigin を使用すると、 RenderTransform 変換の詳細を変更することなく、特定の要素に対する変換の効果を作成または変更できます。 RenderTransformOrigin に指定する Point 値は、実際のピクセル メジャーに基づいていません。 代わりに、値 0,0 は UIElement レンダリング領域全体の左上隅を参照し、1,1 は右下を参照する論理ポイントです。 その後、 値は UIElement の現在の座標空間に要素化することで、X,Y 座標に評価されます。

一部の変換では、原点は重要ではありません。 たとえば、RenderTransformOrigin では、RenderTransform プロパティに適用される TranslateTransform の動作は変更されません。

一部の変換型には、変換の原点を指定するための独自のプロパティがあります。 たとえば、 RotateTransform には CenterX と CenterY があります。 UIElement を使用している場合、ビジュアル デザイン ツールでこれらの他のプロパティが非表示になることがあるため、すべての変換元の変更に RenderTransformOrigin のみを使用し、変換固有の原点を既定値のままにします。 ツールでは、特定の変換の XAML 要素を定義して TransformGroup を作成するのではなく、RenderTransform の単一の CompositeTransform 値にすべての変換効果を適用することもできます。 独自の XAML を記述する場合、またはコードで変換を定義する場合は、RenderTransform に変換を適用する場合は、変換固有の元の値ではなく、常に RenderTransformOrigin を使用するように、これらの同じプラクティスに従う必要があります。そうしないと、値が互いにオフセットされます。

一般的な手法は、RenderTransformOrigin を 0.5,0.5 に設定し、要素の中心に原点を配置することです。 次に、 RotateTransform を適用して、中心を中心に要素を回転できます。

FlowDirection を RightToLeft に変更すると、UIElement の RenderTransformOrigin の X 座標の意味が変更されます。0 が右端になります。

RenderTransform と RenderTransformOrigin で生成できるのと同じ視覚効果の一部は、プロジェクションと PlaneProjection でも実現できます。 たとえば、PlaneProjection.RotationZ を変更することで、UIElement を中心に回転させることができます。

適用対象

こちらもご覧ください