Getting Started with Windows 8 development (10) Basic transformations and matrix transformations and the AppBar application bar

There are several basic transformations and matrix transformations in Windows 8 as well as the usage methods in Silverlight.

Includes: RotateTransform: Rotation transform

ScaleTransform: Scaling transforms

SkewTransform: Tilt Transform

TranslateTransform: Moving Transformations

TransformGroup: Transform Group

MatrixTransform: Matrix Transform

The meaning and use of these transformations can be seen in two articles I have written before:

Silverlight Practical Tips Series: 5 basic Transformations in 53.Silverlight RotateTransform, ScaleTransform, SkewTransform, TranslateTransform, TransformGroup

Silverlight Practical Tips Series: 54. Explain the matrix transformation MatrixTransform in Silverlight, and realize all the other transformations

The AppBar application bar is a message bar that is ejected from the Windows 8 program under the right-click Program or when the finger slides up from below. In this column can do some custom operations such as: Uninstall the program, add information, search and other operations.

Basic Transformations and Matrix transformations

<!--RotateTransform transform--> <image height= "horizontalalignment=" "left" verticalalignment= "top"   
        Margin= "48,49,0,0" name= "Image11" stretch= "Fill" width= "" "Source=" Iphone_001.png "opacity=". 3 "/> <image height= "A" horizontalalignment= "left" verticalalignment= "the Top" margin= "48,49,0,0" name=   
                "Image1" stretch= "Fill" width= "source=" "Iphone_001.png" > <Image.RenderTransform> <rotatetransform centerx= "0" centery= "0" angle= "></RotateTransform> </imag" E.rendertransform> </Image> <!--scaletransform transform--> <image Heig ht= "horizontalalignment=" "left" verticalalignment= "Top" margin= "139,49,0,0" name= "Image21" Stret Ch= "Fill" width= "source=" Iphone_002.png "opacity=". 3 "/> <image" height= "horizontalalignment=" left "Verticalalignment=" top"Margin=" 139,49,0,0 "name=" Image2 "stretch=" Fill "width=" "source=" Iphone_002.png "> <Image.RenderTransform> <scaletransform centerx= "0" centery= "0" scalex= "0.6" scaley= "0.6 "></ScaleTransform> </Image.RenderTransform> </Image> &L t;!
               --skewtransform transform--> <image height= "horizontalalignment=" "left" verticalalignment= "top"   
        Margin= "226,49,0,0" name= "Image31" stretch= "Fill" width= "" "Source=" Iphone_003.png "opacity=". 3 "/> 
        <image height= "horizontalalignment=" "left" verticalalignment= "the Top" margin= "226,49,0,0" name= "Image3"   
                Stretch= "Fill" width= "source=" Iphone_003.png > <Image.RenderTransform> <skewtransform centerx= "0" centery= "0" anglex= "" angley= "0" ></SkewTransform> </image . Rendertransform>  
        </Image> <!--translatetransform transform--> <image height= "Horizontal" Alignment= "left" verticalalignment= "Top" margin= "331,49,0,0" name= "image41" stretch= "Fill" width= "5 0 "source=" iphone_004.png "opacity=". 3 "/> <image height=" horizontalalignment= "left" VerticalAlignment   
            = "Top" margin= "331,49,0,0" name= "Image4" stretch= "Fill" "width=" source= "Iphone_004.png" > <Image.RenderTransform> <translatetransform x= "Ten" y= "&GT;&LT;/TRANSLATETRANSFO" Rm> </Image.RenderTransform> </Image> <!--TransformGroup Transform- -> <image height= "horizontalalignment=" left "verticalalignment=" the Top "margin=" 426,49,0, 0 "name=" image51 "stretch=" Fill "width=" source= "Iphone_005.png" opacity= ". 3"/> <image height= "HorizontalAlignment"= "Left" verticalalignment= "Top" margin= "426,49,0,0" name= "Image5" stretch= "Fill" width= "source="   
                    "Iphone_005.png" > <Image.RenderTransform> <TransformGroup>   
                <scaletransform scaley= "-1"/> <translatetransform y=   
       
       
        </TransformGroup> </Image.RenderTransform> </Image>
               <!--RotateTransform transform--> <image height= "horizontalalignment=" "left" verticalalignment= "top" Margin= "48,249,0,0" name= "image1166" stretch= "Fill" width= "" source= "Iphone_001.png" opacit Y= ". 3"/> <image height= "horizontalalignment=" left "verticalalignment=" top "margin=" 48, 249,0,0 "Name=" image166 "stretch=" Fill "width=" source= "Iphone_001.png" > <image.   
 Rendertransform>               <matrixtransform matrix= "0 1-1 0 0 0" ></MatrixTransform> </image.rendertrans Form> </Image> <!--scaletransform transform--> <image height= "Horiz" Ontalalignment= "left" verticalalignment= "Top" margin= "139,249,0,0" name= "image2166" Stretch = "Fill" width= "source=" "Iphone_002.png" opacity= ". 3"/> <image "height=" horizontalalignment= "left" Verticalalignment= "Top" margin= "139,249,0,0" name= "image266" stretch= "Fill" width= "Sour" Ce= "Iphone_002.png" > <Image.RenderTransform> <matrixtransform matrix= "0.6 0   
       
        0 0.6 0 0 "></MatrixTransform> </Image.RenderTransform> </Image>
               <!--SkewTransform transform--> <image height= "horizontalalignment=" "left" verticalalignment= "top" Margin= "226,249,0,0 "Name=" image3166 "stretch=" Fill "width=" "source=" Iphone_003.png "opacity=" ". 3"/> <image height= "horizontalalignment=" "left" verticalalignment= "the Top" margin= "226,249,0,0" name= "Image3"   
                "Stretch=" Fill "width=" source= "Iphone_003.png" > <Image.RenderTransform> <matrixtransform matrix= "1 0 1 1 0 0" ></MatrixTransform> </image.rendertran Sform> </Image> <!--translatetransform transform--> <image height= "50" Horizontalalignment= "left" verticalalignment= "Top" margin= "331,249,0,0" name= "image4166" Str Etch= "Fill" width= "source=" Iphone_004.png "opacity=". 3 "/> <image height=" horizontalalignment= "Lef" T "verticalalignment=" "Top" margin= "331,249,0,0" name= "image466" stretch= "Fill" width= " Urce= "Iphone_004.png" &GT   
            <Image.RenderTransform> <matrixtransform matrix= "1 0 0 1" ></MatrixTransform>   
        </Image.RenderTransform> </Image> <!--transformgroup transform--> <image height= "A" horizontalalignment= "left" verticalalignment= "the Top" margin= "426,249,0,0" name= "image5166" stretch= "Fill" width= "source=" Iphone_005.png "opacity=". 3 "/> <image Height
               = "Horizontalalignment=" "left" verticalalignment= "Top" margin= "426,249,0,0" name= "image566" Stretch= "Fill" width= "source=" Iphone_005.png > <Image.RenderTransform> & Lt   
        MatrixTransform matrix= "1 0 0-1 0 0" ></MatrixTransform> </Image.RenderTransform> </Image> <textblock horizontalalignment= "left" margin= "10,121,0,0" textwrapping= "W Rap"Text=" uses a variety of ways to rotate the picture "verticalalignment=" Top "height=" width= "206"/> <textblock Ho
                   Rizontalalignment= "left" margin= "10,321,0,0" textwrapping= "Wrap" text= "to rotate a picture in a matrixtransform way" Verticalalignment= "height=" width= "206"/> <textblock horizontalalignment= "left" Ma  Rgin= "550,271,0,0" textwrapping= "Wrap" text= "" Name= "Tbtext" verticalalignment= "Top" Width= "232"/>