70-511 Rozdział 3 - Graficzny interfejs użytwkonika - transformacje

Transformacje to obiekty, które umożliwiają zmianę kształtu przez zmianę jego współrzędnych.
Rodzaje transformacji:

RotateTransform
Obrócenie kształtem wokół współrzędnych X,Y o zadany kąt. Przykład poniżej prezentuje zwyczajny prostokąt (niebieski) oraz czerwony po nałożeniu transformacji:

Code:

        <Rectangle Fill="Blue" Width="50" Height="50" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Center"></Rectangle>

        <Rectangle Fill="Red" Width="50" Height="50" Margin="80" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Rectangle.RenderTransform>
                <RotateTransform CenterX="25" CenterY="25" Angle="45" />
            </Rectangle.RenderTransform>
        </Rectangle>

Efekt:

ScaleTransform
Skalowanie kształtu:

Code:

        <Rectangle Fill="Blue" Width="50" Height="50" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Center"></Rectangle>

        <Rectangle Fill="Red" Width="50" Height="50" Margin="150" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Rectangle.RenderTransform>
                <ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2.5" />
            </Rectangle.RenderTransform>
        </Rectangle>

Efekt:

SkewTransform
Pochylenie kształtu w pionie i poziomie:

Code:

        <Rectangle Fill="Blue" Width="50" Height="50" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Center"></Rectangle>

        <Rectangle Fill="Red" Width="50" Height="50" Margin="150" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="50"></SkewTransform>
            </Rectangle.RenderTransform>
        </Rectangle>

Efekt:

TranslateTransform
Przesuwa układ współrzędnych o zadane X i Y:

Code:

        <Rectangle Fill="Blue" Width="50" Height="50" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Center"></Rectangle>

        <Rectangle Fill="Red" Width="50" Height="50" Margin="150" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Rectangle.RenderTransform>
                <TranslateTransform X="50" Y="90" />
            </Rectangle.RenderTransform>
        </Rectangle>

Efekt:

TransformGroup
Pozwala nałożyć na obiekt kilka transformacji jednocześnie:

Code:

        <Rectangle Fill="Blue" Width="50" Height="50" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Center"></Rectangle>

        <Rectangle Fill="Red" Width="50" Height="50" Margin="150" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="50" Y="40" />
                    <SkewTransform AngleX="30" AngleY="20" />
                    <RotateTransform Angle="15" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>

Efekt:

MatrixTransform
Tworzy macierz 3x3, która pozwala na definiowanie własnych transformacji:

Code:

        <Button Width="50" Height="50">
            <Button.RenderTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix>1 0 0 1 10 10</Matrix>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
        </Button>

Efekt:

Więcej o macierzy można znaleźć na stronie http://msdn.microsoft.com/en-us/library/system.windows.media.matrixtransform.aspx



Wszystkie transformacje domyślnie mają miejsce w lewym górnym rogu transformowanego kształtu. Współrzędne tego punktu określone są jako (0,0). Prawy dolny róg ma współrzędne (1,1). Aby zmienić punkt rozpoczęcia transformacji należy ustawić właściwość RenderTransformOrigin="0.5,0.5"



Rzut elementu - Flipping
Aby "rzucić" elementem należy skorzystać z ScaleTransform. Jeżeli chcemy rzucić kształtem horyzontalnie, ustawiamy właściwość ScaleX na -1, jeżeli chcemy rzucić wertykalnie ScaleY na -1. Rzucenie w obydwu kierunkach jest możliwe po ustawieniu ScaleX i ScaleY na -1.Przykład:

Code:

        <Button Height="50" Width="100" VerticalAlignment="Top">
            <Button.RenderTransform>
                <ScaleTransform ScaleX="-1"></ScaleTransform>
            </Button.RenderTransform> Flipped Button
        </Button>

Efekt:

Przycinanie - Clipping
Przycinanie nie zmniejsza obszaru zajmowanego przez kształt, a jedynie zmniejsza widoczną powierzchnię do powierzchni przycinającej figury. Przykład:

Code:

        <Rectangle Width="100" Height="100" Fill="Blue">
            <Rectangle.Clip>
                <EllipseGeometry RadiusX="30" RadiusY="30" Center="30, 50" />
            </Rectangle.Clip>
        </Rectangle>

Efekt: