Share via

Gewusst wie: Skalieren eines Elements

  • Artikel

Dieses Beispiel zeigt, wie Sie mit ScaleTransform ein Element skalieren können.

Verwenden Sie die ScaleX- und ScaleY-Eigenschaften, um die Größe des Elements um den von Ihnen angegebenen Faktor zu ändern. Ein ScaleX-Wert von 1,5 zum Beispiel streckt das Element auf 150 Prozent seiner ursprünglichen Breite. Ein ScaleY-Wert von 0,5 verkleinert die Höhe eines Elements um 50 Prozent.

Verwenden Sie die CenterX- und CenterY-Eigenschaften, um den Punkt festzulegen, der den Mittelpunkt der Skalierungsoperation bildet. Standardmäßig wird eine ScaleTransform am Punkt (0,0) zentriert, was der oberen linken Ecke des Rechtecks entspricht. Das bedeutet, dass das Element verschoben wird und größer erscheint, da durch Anwenden einer Transform der Koordinatenbereich geändert wird, in dem sich das Objekt befindet.

Im folgenden Beispiel wird ScaleTransform verwendet, um die Größe eines 50 x 50 cm großen Bildes zu verdoppeln Rectangle. Der ScaleTransform-Wert hat einen Wert von 0 (Standard) für CenterX und CenterY.

Beispiel

<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

Normalerweise legen Sie CenterX und CenterY als den Mittelpunkt des Objekts fest, das skaliert wird: (Width/2, Height/2).

Das folgende Beispiel zeigt ein weiteres Rectangle, das in der Größe verdoppelt ist. Allerdings hat dieses ScaleTransform einen Wert von 25 für CenterX und CenterY, was der Mitte des Rechtecks entspricht.

<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
  Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

Die folgende Abbildung zeigt den Unterschied zwischen den beiden ScaleTransform-Vorgängen. Die gepunktete Linie stellt die Größe und die Position des Rechtecks vor der Skalierung dar.

2x scales with different center points
Zwei ScaleTransform-Vorgänge mit identischen ScaleX- und ScaleY-Werten aber unterschiedlichen Mittelpunkten

Das vollständige Beispiel finden Sie unter Beispiele für 2D-Transformationen.

Siehe auch