TranslateTransform

Silverlight

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

<TranslateTransform   .../>

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

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

Translated text creates text shadow.

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.

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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;
}

Community Additions

ADD
Show: