TranslateTransform

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

Translates (moves) an object in the two-dimensional x-y coordinate system.

<TranslateTransform   .../>

Methods

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

Properties

Name (DependencyObject), X (TranslateTransform), Y (TranslateTransform)

Managed Equivalent

TranslateTransform

Remarks

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.

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

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

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-axes.

TextBlock that uses a TranslateTransform

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 TranslateTransform object to offset text. In this example, a slightly offset copy of text below the primary text creates a shadow effect.

<!-- Offset the text by 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 following example shows how to increase the X and Y property values of a TranslateTransform 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>
      <TranslateTransform x:Name="myTranslateTransform" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

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

Reference

Transform