Windows Dev Center

Erweitern Minimieren

UIElement.RenderTransformOrigin Property

Ruft den Ursprungspunkt einer beliebigen von RenderTransform deklarierten Rendertransformation in Bezug auf die Grenzen des UIElement ab oder legt diesen fest.

Syntax


public Point RenderTransformOrigin { get; set; }


<uiElement RenderTransformOrigin="x,y"/>

XAML Values

x

Der X-Wert des Point, der den Transformationsursprung angibt. In der Regel liegt dies zwischen 0 und 1.

y

Der Y-Wert eines Point, der den Transformationsursprung angibt. In der Regel liegt dies zwischen 0 und 1.

Eigenschaftswert

Typ: Point

Der Ursprungspunkt der Rendertransformation. Standardwert ist ein Point mit dem Wert 0,0.

Hinweise

RenderTransformOrigin ermöglich die Erstellung oder Änderung des Effekts einer Transformation für ein bestimmtes Element, ohne dass die Einzelheiten der RenderTransform-Transformation geändert werden müssen. Der Wert Point, den Sie für RenderTransformOrigin angeben, basiert nicht auf tatsächlichen Pixelmaßen. Es handelt sich vielmehr um einen logischen Punkt, wobei sich ein Wert 0,0 auf die obere linke Ecke des gesamten UIElement-Renderbereichs bezieht, und 1,1 auf die untere rechte Ecke. Der Wert wird dann in einer x- und y-Koordinate ausgewertet, indem er als Faktor auf den aktuellen UIElement-Koordinatenraum übertragen wird.

Für einige Transformationen ist der Ursprung nicht von Bedeutung. Beispielsweise ändert RenderTransformOrigin nicht das Verhalten von TranslateTransform, das auf die RenderTransform-Eigenschaft angewendet wird.

Einige Transformationstypen verfügen über eigene Eigenschaften zum Festlegen des Ursprungs der Transformation. Beispielsweise verfügt RotateTransform über CenterX und CenterY. Wenn Sie mit UIElement arbeiten, werden die anderen Eigenschaften gelegentlich durch visuelle Entwurfstools ausgeblendet, sodass Sie nur RenderTransformOrigin für alle Transformationsursprungsänderungen verwenden und transformationsspezifische Ursprünge als Standardwerte beibehalten. Tools können möglicherweise auch alle Transformationseffekte auf einen einzelnen CompositeTransform-Wert für RenderTransform anwenden, anstatt XAML-Elemente für die spezifischen Transformationen zu definieren und eine TransformGroup-Klasse zu erstellen. Wenn Sie eigenes XAML schreiben oder Transformationen im Code definieren, sollten Sie bei der Anwendung von Transformationen auf RenderTransform immer RenderTransformOrigin verwenden statt der transformationsspezifischen Ursprungswerte, da die Werte sich sonst gegenseitig versetzen.

Eine allgemeine Vorgehensweise ist die Festlegung von RenderTransformOrigin auf 0,5, 0,5, wodurch der Ursprung in der Elementmitte platziert wird. Sie können RotateTransform anwenden, um das Element um den Mittelpunkt zu drehen.

Das Ändern von FlowDirection zu RightToLeft ändert die Bedeutung der x-Koordinate eines RenderTransformOrigin für ein UIElement; 0 ist der rechte Rand.

Einige der gleichen visueller Effekte, die Sie mit RenderTransform und RenderTransformOrigin erzeugen können, können mit Projection und PlaneProjection auch erzielt werden. Sie können z. B. ein UIElement um seinen Mittelpunkt drehen, indem Sie PlaneProjection.RotationZ ändern.

Beispiele

Dieses XAML-Beispiel zeigt, wie RenderTransformOrigin für das Element in der ursprünglichen XAML festgelegt wird. Eine Animation, die anfänglich auf einer CompositeTransform ausgeführt wird, kann den RenderTransformOrigin verwenden, um die Skalierungs- und Rotationstransformationen zu ändern, die auf den Mittelpunkt des Kreises statt auf den Koordinatenursprung 0,0 angewendet werden sollen. Dadurch entsteht der Eindruck, als ob der Kreis um seinen Mittelpunkt kreist und an bestimmten Stellen kleiner wird.

Hinweis  Um die Animation starten, müssen Sie diese von Resources abrufen und Begin aufrufen; dieser Code wird nicht angezeigt.


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

Anforderungen

Mindestens unterstützter Client

Windows 8

Mindestens unterstützter Server

Windows Server 2012

Namespace

Windows.UI.Xaml
Windows::UI::Xaml [C++]

Metadaten

Windows.winmd

Siehe auch

UIElement
TranslateTransform
3D-Effekte für Windows Store-Apps durch XAML
Beispiel für zweidimensionale XAML-Transformationen

 

 

Anzeigen:
© 2015 Microsoft