Freigeben über

Gewusst wie: Horizontales oder vertikales Kippen eines UIElement

  • Artikel

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 Taste zum Umdrehen.

A button with no transform
Das UIElement, das gedreht werden soll

Im Folgenden finden Sie den Code, der die Schaltfläche erstellt.

<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 die ScaleTransform Eigenschaft der Schaltfläche RenderTransform an.

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

A button flipped horizontally about (0,0)
Die Schaltfläche nach dem Anwenden der ScaleTransform

Abbildung zum Drehen einer Schaltfläche an seiner Stelle

Wie Sie aus der vorherigen Abbildung sehen können, wurde die Schaltfläche gekippt, aber sie wurde auch verschoben. Das liegt daran, dass die Schaltfläche von der oberen linken Ecke gekippt 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 des ScaleTransform Zentrierens der Schaltflächen besteht darin, die Eigenschaft der Schaltfläche RenderTransformOrigin 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>

A button flipped horizontally about its center
Die Schaltfläche mit einem RenderTransformOrigin von 0,5, 0,5

Abbildung zum vertikalen Drehen einer Schaltfläche

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

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

A button flipped vertically about its center
Die vertikal gekippte Schaltfläche

Weitere Informationen