Share via

ScaleTransform Object

  • Article
  • 11/08/2007

Scales an object in the 2-D x-y coordinate system.

XAML
<ScaleTransform .../>
Scripting
To create an object using scripting, see CreateFromXAML.

Properties

CenterX, CenterY, Name, ScaleX, ScaleY

Methods

Equals, FindName, GetHost, GetValue, SetValue

Remarks

Use a ScaleTransform 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.

The local 0,0 for an object can be offset on a Canvas using Canvas.Left and Canvas.Top, but this does not count as a transform; the object retains its own local 0,0 in this case for transform purposes. For details on this concept, see Object Layout in Silverlight.

Multiple transforms can be applied with a TransformGroup. Custom transforms can be created with a MatrixTransform.

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

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 in order to provide the best resolution at different sizes. Scaled text, on the other hand, preserves the proportions of the original-sized text.

Examples

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

XAML 
<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="Scaled Text" />
<!-- Scale the text width 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 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 example below shows how to increase the ScaleX and ScaleY property values of a ScaleTransform applied to a Rectangle every time that Rectangle is clicked.

XAML 
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  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>
JavaScript 
function handleMouseButtonDown(sender, mouseEventArgs)
{
    // Retrieve a reference to the ScaleTransform object.
    var scaleTransform = sender.findName("myScaleTransform");
    // Increase ScaleX and ScaleY by 25%.
    scaleTransform.ScaleX = scaleTransform.ScaleX * 1.25;
    scaleTransform.ScaleY = scaleTransform.ScaleY * 1.25;
}

See Also

Transform Overview
Transform