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