Gewusst wie: Skalieren eines Elements

Aktualisiert: November 2007

Dieses Beispiel zeigt, wie eine ScaleTransform verwendet wird, um ein Element zu skalieren.

Mithilfe der ScaleX- und ScaleY-Eigenschaften können Sie die Größe des Elements um den von Ihnen angegebenen Faktor ändern. Beispielsweise wird das Element durch einen ScaleX-Wert von 1,5 auf 150 Prozent der ursprünglichen Breite gestreckt. Bei einem ScaleY-Wert von 0,5 verringert sich die Höhe des Elements um 50 Prozent.

Verwenden Sie die CenterX- und die CenterY-Eigenschaft, um den Mittelpunkt der Skalierung anzugeben. 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 eine ScaleTransform verwendet, um die Größe eines 50x50 großen Rectangle zu verdoppeln. Die ScaleTransform verfügt über einen Wert von 0 (Standardwert) für sowohl CenterX als auch 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>

In der Regel legen Sie CenterX und CenterY als Mittelpunkt des skalierten Objekts fest: (Width/2, Height/2).

Im folgenden Beispiel ist ein weiteres Rectangle dargestellt, dessen Größe verdoppelt wird, allerdings hat die ScaleTransform hier einen Wert von 25 für sowohl CenterX als auch CenterY, was dem Mittelpunkt 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>

In der folgenden Abbildung wird der Unterschied zwischen den beiden ScaleTransform-Vorgängen veranschaulicht. Die punktierte Linie stellt die Größe und die Position des Rechtecks vor der Skalierung dar.

Zwei ScaleTransform-Vorgänge mit demselben ScaleX- und ScaleY-Wert aber unterschiedlichen Mittelpunkten

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

Siehe auch

Konzepte

Übersicht über Transformationen

Referenz

Transform

ScaleTransform

Weitere Ressourcen

Gewusst-wie-Themen zu Transformationen