Windows 8 Store Apps Learning (14) Control UI

Control UI RenderTransform, projection, Clip, Usela

Introduced

Re-imagine the Windows 8 Store Apps Control UI

RenderTransform-Transformations (for displacement, rotation, scaling, distortion, etc.)

Projection-Mapping

Clip-trims and displays the specified area of the UIElement

UseLayoutRounding-Use full pixel layout

Example

1. Demo RenderTransform Application

Controls/ui/rendertransform.xaml

<page x:class= "XamlDemo.Controls.UI.RenderTransform" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/pres Entation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" Using:XamlDemo.Controls.UI "XMLN" S:d= "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/ markup-compatibility/2006 "mc:ignorable=" D "> <grid background=" Transparent "> <grid Margin
                
            = "0 0 0" > <!--rendertransform-transform (for displacement, rotation, scaling, distortion, etc.)--> <grid horizontalalignment= "left" verticalalignment= "top" > <rectangle Widt H= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/> <rectangle width= "20 0 "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" > <rectangle.rendert
    
                        Ransform><!--RotateTransform-rotational transformation (clockwise)--> <!--Angle-rotation angle. The default value is 0 CenterX-the x-coordinate of the rotation center point. The default value is 0 centery-the Y-coordinate of the rotation center point. Default value 0--> <rotatetransform angle= "centerx=" centery= ""/&G
    
                    T </Rectangle.RenderTransform> </Rectangle> </Grid> <grid margin= "0 0 0" horizontalalignment= "left" verticalalignment= "top" > <rectangle width= "the" Height = "strokedasharray=" "3,1" stroke= "Blue" strokethickness= "3"/> <!--Rendertra Nsformorigin-The center point of the position transformation--> <rectangle width= height= "fill=" Yellow = "Red" strokethickness= "3" opacity= "0.3" rendertransformorigin= "0.5,0.5" > <rectangle.rendertrans
   Form>                     <rotatetransform angle= "/>" </Rectangle.RenderTransform> </Rectangle> </Grid> <grid margin= "0 0 0" horizontalalignment= "left "Verticalalignment=" Top > <rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" S trokethickness= "3"/> <rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness = "3" opacity= "0.3" > <Rectangle.RenderTransform> <!--Translate Transform-Translational Transformation--> <!--X-the distance moved horizontally. The default value is 0 Y-the distance to move in the vertical direction.
    
                    The default value is 0--> <translatetransform x= "y="/>
                
</Rectangle.RenderTransform> </Rectangle> </Grid>            <grid margin= "0 0 0" horizontalalignment= "left" verticalalignment= "Top" > <rectang Le width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/> <rectangle Wi Dth= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" > <rectangle.
                            Rendertransform> <!--ScaleTransform-Scaling Transformation--> <!-- A multiple of the scalex-x axis in the direction of the zoom. The default value is a multiple of the scaling in the SCALEY-Y Axis 1. Default value 1 CenterX-Scales the x-coordinate of the center point. The default value is 0 centery-coordinates the Y axis of the center point of the zoom. Default value 0--> <scaletransform scalex= "1.1" scaley= "1.3" centerx= "Ce"
            ntery= "/>" </Rectangle.RenderTransform> </Rectangle> </Grid> <grid margin= "400 200 0 0 "horizontalalignment=" left "verticalalignment=" top "> <rectangle width=" height= " Kedasharray= "3,1" stroke= "Blue" strokethickness= "3"/> <rectangle width= "" height= "fill=" Yel
    
                        Low "stroke=" Red "strokethickness=" 3 "opacity=" 0.3 "> <Rectangle.RenderTransform>
                            <!--SkewTransform-distorted transformations (typical applications: simulating three-dimensional depths in two-dimensional objects)--> <!-- CenterX-Distorts the x-coordinate of the center point. The default value of 0 centery-distorts the Y-coordinate of the center point. The default value is 0 anglex-x axis skew angle, the Y axis rotates around the origin (counterclockwise). CenterX has no effect on the rendering results produced by this value. The default value is 0 angley-y axis skew angle, the x-axis rotates around the origin (clockwise). CenterY has no effect on the rendering results produced by this value. The default value is 0--> <skewtransform anglex= "angley=" 5 "centerx=" 0 "centery= "0"/> </Rectangle.RenderTransform> </Rectangle>;/grid> <grid margin= "0 0" horizontalalignment= "left" verticalalignment= "Top" >
                <rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
                    <rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
                        <Rectangle.RenderTransform> <!--composite transformation--> of TransformGroup-Multiple Transform compositions
                            <TransformGroup> <translatetransform "x=" y= "ten"/> <rotatetransform angle= "centerx=" "centery="/> &LT;/TRANSFO Rmgroup> </Rectangle.RenderTransform> </Rectangle> ;/grid> <!--Compositetransform-transforms a variety of ways into one CenterX-transform center point
                   X coordinates CenterY-Transformation Center point Y-coordinate rotation-clockwise rotation angle ScaleX-scaling along the x-axis ScaleY-Skewx-x axis distortion angle skewy-y axis distortion angle along the y-axis direction Tran Slatex-the translation distance along the x-axis direction Translatey-the translation distance along the y-axis direction--> <grid margin= "0 40 0 0 0 "horizontalalignment=" left "verticalalignment=" top "> <rectangle width=" height= " Edasharray= "3,1" stroke= "Blue" strokethickness= "3"/> <rectangle width= "" height= "fill=" Yell
                        ow "stroke=" Red "strokethickness=" 3 "opacity=" 0.3 "> <Rectangle.RenderTransform> <compositetransform skewx= "rotation=" scalex= "0.6" scaley= "0.3"/> </rectan Gle.
                Rendertransform> </Rectangle> </Grid> <!-- MatrixTransform-AffineMatrix Transformation |             X| |
                M11 (default value 1) M21 (default value 0) 0| | y| = |x y 1| * |
                M12 (default value 0) M22 (default value 1) 0|             |1| |
                
                OffsetX (default value 0) OffsetY (default value 0) 1| x = x * M11 + y * M12 + OffsetX y = x * M21 + y * M22 + OffsetY use Matrix
            Transform to achieve translation, rotation, scaling, distortion of the Demo see http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html--> <grid margin= "0 0" horizontalalignment= "left" verticalalignment= "top" > <rectangle Wi Dth= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/> <rectangle width= " "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" > <rectangle.rende
                Rtransform> <!--M11, M12, M21, M22, OffsetX, OffsetY        --> <matrixtransform matrix= "1, 0.5, 0, 1, a"/> </re Ctangle.
    rendertransform> </Rectangle> </Grid> </Grid> </Grid> </Page>