Gewusst wie: Horizontales oder vertikales Kippen eines UIElement

In diesem Beispiel wird gezeigt, wie mit ScaleTransform ein UIElement horizontal oder vertikal gekippt wird. In diesem Beispiel wird ein Button-Steuerelement (ein UIElement-Typ) gekippt, indem ScaleTransform auf die zugehörige RenderTransform-Eigenschaft angewendet wird.

Beispiel

In der folgenden Abbildung ist die zu kippende Schaltfläche dargestellt.

Das zu kippende UIElement

Im Folgenden wird der Code dargestellt, durch den die Schaltfläche erstellt wird.

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

Um die Schaltfläche horizontal zu kippen, erstellen Sie eine ScaleTransform, und legen Sie die zugehörige ScaleX-Eigenschaft auf -1 fest. Wenden Sie die ScaleTransform auf die RenderTransform-Eigenschaft der Schaltfläche an.

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

Die Schaltfläche nach Anwendung von ScaleTransform

Wie in der vorherigen Abbildung zu sehen ist, wurde die Schaltfläche gekippt und gleichzeitig verschoben. Dies ist darauf zurückzuführen, dass die Schaltfläche ausgehend von der linken oberen Ecke gekippt wurde. Um die Schaltfläche an der gleichen Position zu kippen, müssen Sie ScaleTransform auf den Mittelpunkt anstatt auf eine Ecke anwenden. Eine einfache Möglichkeit, um ScaleTransform auf den Mittelpunkt der Schaltfläche anzuwenden, besteht darin, die RenderTransformOrigin-Eigenschaft 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 dem Wert 0,5, 0,5 für RenderTransformOrigin

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

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

Die vertikal gekippte Schaltfläche

Siehe auch

Konzepte

Übersicht über Transformationen