Gewusst wie: Angeben des Ursprungs einer Transformation mithilfe von relativen Werten

In diesem Beispiel wird gezeigt, wie mithilfe von relativen Werten der Ursprung einer RenderTransform-Eigenschaft angegeben wird, die auf ein FrameworkElement angewendet wird.

Beim Drehen, Skalieren oder Neigen eines FrameworkElement-Objekts mithilfe der RenderTransform-Eigenschaft wird die Transformation durch die Standardeinstellung auf die linke obere Ecke des Elements angewendet. Wenn Sie von der Mitte des Elements aus drehen, skalieren oder neigen möchten, können Sie dies ändern, indem Sie für den Mittelpunkt der Transformation den Mittelpunkt des Elements festlegen. Für diese Lösung müssen Sie jedoch die Größe des Elements kennen. Einfacher lässt sich eine Transformation auf den Mittelpunkt eines Elements anwenden, wenn statt der Festlegung eines Werts für den Mittelpunkt der Transformation selbst die RenderTransformOrigin-Eigenschaft des Elements auf (0.5, 0.5) festgelegt wird.

Beispiel

Im folgenden Beispiel wird ein RotateTransform verwendet, um ein Button-Steuerelement um 45 Grad im Uhrzeigersinn zu drehen. Da in dem Beispiel kein Mittelpunkt angegeben ist, dreht sich die Schaltfläche um den Punkt (0, 0), die obere linke Ecke. Die RotateTransform-Klasse wird auf die RenderTransform-Eigenschaft angewendet.

In der folgenden Abbildung wird das Transformationsergebnis für das folgende Beispiel angezeigt.

Eine Drehung um 45 Grad im Uhrzeigersinn unter Verwendung der RenderTransform-Eigenschaft

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

Im folgenden Beispiel wird außerdem eine RotateTransform verwendet, um eine Button um 45 Grad im Uhrzeigersinn zu drehen. In diesem Beispiel wird jedoch der RenderTransformOrigin der Schaltfläche auf (0.5, 0.5) festgelegt. Dadurch erfolgt die Drehung um den Mittelpunkt der Schaltfläche, nicht um die obere linke Ecke.

In der folgenden Abbildung wird das Transformationsergebnis für das folgende Beispiel angezeigt.

Eine Drehung um 45 Grad unter Verwendung der RenderTransform-Eigenschaft mit einem RenderTransformOrigin von (0.5, 0.5)

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

Weitere Informationen zum Transformieren von FrameworkElement-Objekten finden Sie unter Übersicht über Transformationen.

Siehe auch

Referenz

Transform

Konzepte

Übersicht über Transformationen

Weitere Ressourcen

Gewusst-wie-Themen zu Transformationen