Share via

How to: Translate an Element

  • Article

This example shows how to translate (move) an element by using a TranslateTransform.

The TranslateTransform class is especially useful for moving elements inside panels that do not support absolute positioning. For example, by applying a TranslateTransform to the RenderTransform property of an element, you can move an element within a StackPanel or DockPanel.

Use the X property of the TranslateTransform to specify the amount, in pixels, to move the element along the x-axis. Use the Y property to specify the amount, in pixels, to move the element along the y-axis. Finally, apply the TranslateTransform to the RenderTransform property of the element.

The following example uses a TranslateTransform to move an element 50 pixels to the right and 50 pixels down.

Example

<Rectangle Height="50" Width="50" 
  Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
    <TranslateTransform X="50" Y="50" />
  </Rectangle.RenderTransform>
</Rectangle>

For the complete sample, see 2-D Transforms Sample.