Dela via

Gör så här: Skala ett element

Det här exemplet visar hur du använder en ScaleTransform för att skala ett element.

Använd egenskaperna ScaleX och ScaleY för att ändra storlek på elementet efter den faktor du anger. Till exempel sträcker ett ScaleX-värde på 1,5 elementet till 150 procent av dess ursprungliga bredd. Ett ScaleY värde på 0,5 krymper höjden på ett element med 50 procent.

Använd egenskaperna CenterX och CenterY för att ange den punkt som är i mitten av skalningsåtgärden. Som standard centreras en ScaleTransform vid punkten (0,0), vilket motsvarar rektangelns övre vänstra hörn. Detta innebär att elementet flyttas och även att det visas större, eftersom du ändrar koordinatutrymmet där objektet finns när du använder en Transform.

I följande exempel används en ScaleTransform för att fördubbla storleken till 50 gånger 50 Rectangle. ScaleTransform har värdet 0 (standardvärdet) för både CenterX och CenterY.

Exempel

<!-- 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>

Vanligtvis anger du CenterX och CenterY till mitten av objektet som skalas: (Width/2, Height/2).

I följande exempel visas en annan Rectangle som har fördubblats i storlek. Den här ScaleTransform har dock värdet 25 för både CenterX och CenterY, vilket motsvarar rektangelns mitt.

<!-- 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>

Följande bild visar skillnaden mellan de två ScaleTransform åtgärderna. Den streckade linjen visar rektangelns storlek och position före skalning.

2x skalor med olika mittpunkter
Två ScaleTransform-åtgärder med identiska ScaleX- och ScaleY-värden men olika centra

Det fullständiga exemplet finns i 2D Transforms Sample.

Se även