ScaleTransform

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Scales an object in the two-dimensional x-y coordinate system.

<ScaleTransform   .../>

Methods

Equals, FindName (DependencyObject), GetHost, GetValue, SetValue

Properties

CenterX (ScaleTransform), CenterY (ScaleTransform), Name (DependencyObject), ScaleX, ScaleY

Managed Equivalent

ScaleTransform

Remarks

Use a ScaleTransform object to stretch or shrink an object horizontally or vertically. The ScaleX property specifies the amount to stretch or shrink an object along the x-axis, and the ScaleY property specifies the amount to stretch or shrink an object along the y-axis. Scale operations are centered on the point specified by the CenterX and CenterY properties.

You can offset the local (0,0) position for an object on a Canvas by using the Canvas.Left and Canvas.Top properties, but this does not count as a transform; the object retains its own local (0,0) position in this case for transform purposes. For more information about this concept, see Object Positioning (Silverlight 1.0).

You can apply multiple transforms with a TransformGroup object. You can create custom transforms with a MatrixTransform object.

Transforms can alter the display of text in your application to create a decorative effect. The following illustration shows the second line of text scaled by 150% along the x-axis, and the third line of text scaled by 150% along the y-axis.

TextBlock using a ScaleTransform

Note:
Scaling text is not the same as increasing the font size of text. Font sizes are calculated independently of each other to provide the best resolution at different sizes. Scaled text, on the other hand, preserves the proportions of the original-sized text.

For more information on basic concepts, see Transforms. Note that the Transforms topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

The following example uses a ScaleTransform object to scale text from its original size.

<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="Scaled Text" />

<!-- Scale the text width by using a ScaleTransform. -->
<TextBlock
  Canvas.Top="40"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="Scaled Text">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
  </TextBlock.RenderTransform>
</TextBlock>

<!-- Scale the text height by using a ScaleTransform. -->
<TextBlock
  Canvas.Top="80"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="Scaled Text">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.0" ScaleY="1.5" />
  </TextBlock.RenderTransform>
</TextBlock>

The following example shows how to increase the ScaleX and ScaleY property values of a ScaleTransform applied to a Rectangle object every time the Rectangle is clicked.

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="200">
  <Rectangle MouseLeftButtonDown="handleMouseButtonDown"
    Width="50" Height="50"
    Fill="RoyalBlue">
    <Rectangle.RenderTransform>

      <!-- If you give the transform a name, you can access it easily
 from code. -->
      <ScaleTransform x:Name="myScaleTransform" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

function handleMouseButtonDown(sender, mouseEventArgs)
{
    // Retrieve a reference to the ScaleTransform object.
    var scaleTransform = sender.findName("myScaleTransform");

    // Increase ScaleX and ScaleY by 25 percent.
    scaleTransform.ScaleX = scaleTransform.ScaleX * 1.25;
    scaleTransform.ScaleY = scaleTransform.ScaleY * 1.25;
}

See Also

Reference

Transform