Freigeben über

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

  • Artikel

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 eine RotateTransform verwendet, um eine Button im Uhrzeigersinn um 45 Grad 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 wird auf die RenderTransform-Eigenschaft angewendet.

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

A button transformed using RenderTransform
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>

Das folgende Beispiel verwendet ebenfalls eine RotateTransform, um einen Button um 45 Grad im Uhrzeigersinn zu drehen, setzt aber zusätzlich die RenderTransformOrigin der Schaltfläche auf (0,5, 0,5). 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.

A button transformed about its center
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 in der Übersicht über Transformationen.

Siehe auch