Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Translates (moves) an object in the 2-D x-y coordinate system.
| XAML |
<TranslateTransform .../>
|
| Scripting |
To create an object using scripting, see CreateFromXAML.
|
Properties
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
.gif)
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
.jpg)
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;
}
|