次の方法で共有


UIElement.RenderTransformOrigin プロパティ

定義

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"/>

プロパティ値

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

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

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

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

適用対象

こちらもご覧ください