Freigeben über

Vorgehensweise: Skalieren eines Elements

  • Artikel

In diesem Beispiel wird gezeigt, wie Sie ein ScaleTransform verwenden, um ein Element zu skalieren.

Verwenden Sie die eigenschaften ScaleX und ScaleY, um die Größe des Elements um den angegebenen Faktor zu ändern. Beispielsweise erweitert ein ScaleX-Wert von 1,5 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 eigenschaften CenterX und CenterY, um den Punkt anzugeben, der der Mittelpunkt des Skalierungsvorgangs ist. Standardmäßig wird ein ScaleTransform an dem Punkt (0,0) zentriert, der der oberen linken Ecke des Rechtecks entspricht. Dies hat den Effekt, das Element zu verschieben und es auch zu vergrößern, da Sie beim Anwenden einer Transformden Koordinatenbereich ändern, in dem sich das Objekt befindet.

Im folgenden Beispiel wird ScaleTransform verwendet, um die Größe eines 50 x 50 cm großen Rectangle-Elements zu verdoppeln. Die ScaleTransform hat einen Wert von 0 (der 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 auf die Mitte des Objekts fest, das skaliert wird: (Width/2, Height/2).

Das folgende Beispiel zeigt ein weiteres Rectangle-Elementmit verdoppelter Größe. Allerdings hat dieses ScaleTransform-Element 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 punktierte Linie stellt die Größe und die Position des Rechtecks vor der Skalierung dar.

Doppelte Skalierungen mit unterschiedlichen Mittelpunkten
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.

Weitere Informationen