проблема преобразования координации в Silverlight

Question

Я использую Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C # для разработки приложения silverlight на основе ASP.Net. Я очень озадачен тем, что представляют собой функции "TranslateTransform" и "RenderTransformOrigin" в следующем фрагменте кода?

Кстати: я примерно понимаю, что RenderTransformOrigin означает перемещение элемента пользовательского интерфейса по оси x и оси y на некоторое смещение, это правильно? Переместить весь элемент интерфейса?

        <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 принимает точку, которая определяет исходную точку или центральную точку, вокруг которой применяется RenderTransform, например RotateTransform.

Интересной вещью с точкой, определенной RenderTransformOrigin, является то, что она не находится в абсолютных координатах. Что это значит? Хорошо, скажем, у вас есть элемент размером 100 x 100 пикселей, если вы хотите применить свои преобразования вокруг центральной точки, например, поверните на 45 градусов вокруг центра, вы бы не использовали абсолютные координаты 50, 50, а точнее 0.5, 0.5, который в основном говорит, что происхождение элемента составляет 0,5 или на полпути поперек и на 0,5 вниз.

В то время как типичные значения для начала координат будут находиться в диапазоне от 0 до 1, где 0 на оси X - это левая часть элемента, а 1 - правая, а 0 на оси Y - верхняя часть элемента, а 1 - нижняя элемента, вы также можете установить точку начала за пределами элемента. Как и 1.5, 0.5, который установил бы начало координат вниз по элементу и на половину ширины элемента снаружи справа от элемента.

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.