Question

I am using Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C# to develop silverlight application based on ASP.Net. I am very confused about what are the function of “TranslateTransform” and “RenderTransformOrigin” in the following code snippet?

BTW: I roughly understand RenderTransformOrigin means move an UI element in x-axis and y-axis by some offset, is that correct? Move the whole UI element?

        <Grid Margin="-1,0,100,0" x:Name="controlsContainer" Height="35" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Bottom">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform Y="0"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Rectangle Margin="0,0,0,0" Height="35" VerticalAlignment="Top" Fill="#97000000" Stroke="#00000000" RenderTransformOrigin="0.5,0.5"/>
            <VideoPlayer:mediaControl Height="35" Margin="1,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" x:Name="mediaControls" Visibility="Visible"/>
        </Grid>

Answer 1

Your understanding of RenderTransformOrigin is not quite correct.

RenderTransformOrigin accepts a point that defines the origin or center point around which RenderTransforms such as RotateTransform is applied.

The interesting thing with the point defined by RenderTransformOrigin is that it is not in absolute coordinates. What does that mean? Well lets say you have an element that is 100 x 100 pixels in size if you wanted to apply your transformations around the center point, for example rotate 45 degrees around the center, you would not use the absolute coordinates of 50, 50 but rather 0.5, 0.5 which basically says the origin of the element is 0.5 or half way across and 0.5 down.

While typical values for the origin would be between 0 and 1, where 0 in the X axis is the left of the element and 1 the right, and 0 in the Y axis is the top of the element and 1 is the bottom of the element, you can also set the origin to a point outside the element. Like 1.5, 0.5 which would set the origin hlaf way down the element and half the element width outside to the right of the element.

TranslateTransform, does a translation or a move of the element, if you translate an element 45,60 what this means is move the element 45 units to the right and 60 down.

Here are a few examples you can play with, that might help make what I said clearer.

    <!-- Rectangle rotated around the left top corner -->
    <Rectangle Width="100" Height="100" Fill="Red" RenderTransformOrigin="0,0">
        <Rectangle.RenderTransform>
            <RotateTransform Angle="45" />
        </Rectangle.RenderTransform>
    </Rectangle>

    <!-- Rectangle rotated around the center point -->
    <Rectangle Width="100" Height="100" Fill="Blue" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <RotateTransform Angle="45" />
        </Rectangle.RenderTransform>
    </Rectangle>

    <!-- Rectangle rotated around the bottom right corner -->
    <Rectangle Width="100" Height="100" Fill="Yellow" RenderTransformOrigin="1,1">
        <Rectangle.RenderTransform>
            <RotateTransform Angle="45" />
        </Rectangle.RenderTransform>
    </Rectangle>

    <!-- Rectangle translated 50 units to the right 70 units up, the origin does not matter here-->
    <Rectangle Width="100" Height="100" Fill="Green" RenderTransformOrigin="0,0">
        <Rectangle.RenderTransform>
            <TranslateTransform X="50" Y="-70" />
        </Rectangle.RenderTransform>
    </Rectangle>