#774 – Translate Transforms

You can use a translation transform to translate, or move, a user interface element in the X or Y dimensions.  You specify translation values separately in both X and Y dimensions, expressed in device independent units.

You specify translation using a TranslateTransform element, setting values for the X and Y properties.  Both properties default to a value of 0.

A LayoutTransform will ignore translation transforms (since the element will be moved around during the layout process anyway).  So you only use translation transforms with a RenderTransform.

Here’s an example that uses a couple of Sliders to dynamically change the X and Y values of a TranslateTransform.

    <StackPanel Orientation="Vertical">
        <TextBlock Text="Jack Kerouac" FontWeight="Bold" HorizontalAlignment="Center"
                   Padding="10,5" Background="PaleGoldenrod" Margin="5">
            <TextBlock.RenderTransform>
                <TranslateTransform  X="{Binding ElementName=sliX, Path=Value}" Y="{Binding ElementName=sliY, Path=Value}"/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Text="Born 12 Mar, 1922" HorizontalAlignment="Center"
                   Padding="10,5" Background="Thistle"/>

        <Slider Name="sliX" Minimum="0" Maximum="300" Margin="10"/>
        <Slider Name="sliY" Minimum="0" Maximum="300" Margin="10"/>
    </StackPanel>