Horizontales oder vertikales Drehen eines UIElement

In diesem Beispiel wird gezeigt, wie sie eine ScaleTransformUIElement horizontale oder vertikale Drehung verwenden. In diesem Beispiel wird ein Button Steuerelement (ein Typ von UIElement) durch Anwenden einer ScaleTransform Eigenschaft auf seine RenderTransform Eigenschaft gedreht.

Abbildung zum Drehen einer Schaltfläche

Die folgende Abbildung zeigt die Schaltfläche zum Drehen.

Das UIElement, das gedreht werden soll

Im Folgenden ist der Code dargestellt, mit dem die Schaltfläche erstellt wird.

<Button Content="Flip me!" Padding="5">
</Button>

Abbildung, um eine Schaltfläche horizontal zu drehen

Um die Schaltfläche horizontal zu drehen, erstellen Sie ScaleTransform eine ScaleX Eigenschaft auf -1. Wenden Sie ScaleTransform auf die RenderTransform-Eigenschaft an.

<Button Content="Flip me!" Padding="5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

gekippt.
Die Schaltfläche nach dem Anwenden von ScaleTransform

Abbildung zum Drehen einer Schaltfläche an seiner Stelle

Wie Sie aus der vorherigen Abbildung sehen können, wurde die Schaltfläche umgedreht und auch verschoben. Das liegt daran, dass die Schaltfläche von der oberen linken Ecke gedreht wurde. Um die Schaltfläche an Ort und Stelle zu kippen, möchten Sie die ScaleTransform Zentrieren und nicht die Ecke anwenden. Eine einfache Möglichkeit zum Anwenden von ScaleTransform auf den Mittelpunkt der Schaltfläche besteht darin, die Eigenschaft RenderTransformOrigin der Schaltfläche auf 0,5, 0,5 festzulegen.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

Die Schaltfläche mit RenderTransformOrigin von 0,5, 0,5

Abbildung zum vertikalen Drehen einer Schaltfläche

Um die Schaltfläche vertikal zu drehen, legen Sie die Eigenschaft ScaleY des ScaleTransform-Objekts anstelle seiner Eigenschaft ScaleX fest.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleY="-1" />
  </Button.RenderTransform>
</Button>

Die vertikal gedrehte Schaltfläche

Weitere Informationen

• Übersicht über Transformationen