Handleiding: Hoe een element te schalen

In dit voorbeeld ziet u hoe u een ScaleTransform gebruikt om een element te schalen.

Gebruik de eigenschappen ScaleX en ScaleY om het formaat van het element te wijzigen op basis van de factor die u opgeeft. Een ScaleX waarde van 1,5 strekt het element bijvoorbeeld uit tot 150 procent van de oorspronkelijke breedte. Een ScaleY waarde van 0,5 verkleint de hoogte van een element met 50 procent.

Gebruik de eigenschappen CenterX en CenterY om het punt op te geven dat het midden van de schaalbewerking is. Standaard wordt een ScaleTransform gecentreerd op het punt (0,0), dat overeenkomt met de linkerbovenhoek van de rechthoek. Dit heeft het effect van het verplaatsen van het element en ook van het groter maken, omdat wanneer u een Transformtoepast, u de coördinaatruimte waarin het object zich bevindt, wijzigt.

In het volgende voorbeeld wordt een ScaleTransform gebruikt om de grootte van een 50 bij 50 Rectanglete verdubbelen. De ScaleTransform heeft een waarde van 0 (de standaardinstelling) voor zowel CenterX als CenterY.

Voorbeeld

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

Normaal gesproken stelt u CenterX en CenterY in op het midden van het object dat wordt geschaald: (Width/2, Height/2).

In het volgende voorbeeld ziet u nog een Rectangle die is verdubbeld in grootte; deze ScaleTransform heeft echter een waarde van 25 voor zowel CenterX als CenterY, die overeenkomt met het midden van de rechthoek.

<!-- 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 de volgende afbeelding ziet u het verschil tussen de twee ScaleTransform bewerkingen. De stippellijn toont de grootte en positie van de rechthoek voordat deze wordt geschaald.

Twee ScaleTransform-bewerkingen met identieke ScaleX- en ScaleY-waarden, maar verschillende centra

Zie 2D Transforms Samplevoor het volledige voorbeeld.

Zie ook

• Transform
• ScaleTransform
• Overzicht van transformaties
• Handleidingonderwerpen