Question

我使用Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C＃开发基于ASP.Net的silverlight应用程序。我对以下代码片段中“TranslateTransform”和“RenderTransformOrigin”的功能有什么困惑？

BTW：我粗略地了解RenderTransformOrigin意味着在x轴和y轴上移动一个UI元素，这是正确的吗？移动整个UI元素？

        <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

您对RenderTransformOrigin的理解并不完全正确。

RenderTransformOrigin接受一个点，该点定义应用RenedTransforms（如RotateTransform）的原点或中心点。

RenderTransformOrigin定义的点的有趣之处在于它不是绝对坐标。那是什么意思？好吧，假如你想要在中心点周围应用变换，你有一个100 x 100像素的元素，例如围绕中心旋转45度，你会不使用绝对坐标50,50但更确切地说是0.5, 0.5，它基本上表示元素的原点是0.5或半中并且0.5下来。

虽然原点的典型值介于0和1之间，其中X轴中的0是元素的左边，1是右边的，Y轴中的0是元素的顶部，1是底部对于元素，您还可以将原点设置为元素外部的点。像1.5, 0.5一样，它将原点hlaf设置在元素下方，将元素宽度设置为元素右边的一半。

TranslateTransform，对元素进行平移或移动，如果你翻译元素45,60，这意味着将元素向右移动45个单位，向下移动60个单位。

以下是您可以使用的一些示例，这可能有助于使我说得更清楚。

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

Answer 2

RenderTransformOrigin与RotateTransform最相关 - 它决定了旋转中心。

TranslateTransform将在X / Y轴上移动网格一定数量的像素。在这种情况下，它不会做任何事情，因为Y是0而X是默认值0。在这种情况下，我的猜测是视觉状态下的动画或动画将修改TranslateTransform.Y，你所看到的是Y = 0的初始值。

Silverlight中的协调转换问题

2 个答案: