TranslateTransform Object

  • Article

Translates (moves) an object in the 2-D x-y coordinate system.

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

Properties

Name, X, Y

Methods

Equals, FindName, GetHost, GetValue, SetValue

Remarks

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.

TranslateTransform defines an axis-aligned translation along the x- and y- axes. The following illustration shows the transformation matrix for a translation by offset (dx, dy).

TranslateTransform matrix

TranslateTransform matrix

Transforms can alter the display of text in your application to create a decorative effect. The following illustration shows text translated, or moved, along the x- and y-axis.

TextBlock using a TranslateTransform

TextBlock using a TranslateTransform

Examples

The following JavaScript example uses a TranslateTransform to offset text. In this example, a slightly offset copy of text below the primary text creates a shadow effect.

XAML 
<!-- Offset the text using a TranslateTransform. -->
<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Black"
  Text="Translated Text">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Coral"
  Text="Translated Text"/>

The example below shows how to increase the X and Y property values of a TranslateTransform applied to a Rectangle every time the 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. -->
      <TranslateTransform x:Name="myTranslateTransform" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>
JavaScript 
function handleMouseButtonDown(sender, mouseEventArgs)
{
    // Retrieve a reference to the TranslateTransform object.
    var translateTransform = sender.findName("myTranslateTransform");
    // Increase the X and Y properties.
    translateTransform.X = translateTransform.X + 15;
    translateTransform.Y = translateTransform.Y + 15;
}

See Also

Transform Overview
Transform