Windows 8開發入門（十）基本變換和矩陣變換以及AppBar應用程式欄

在Windows 8中有幾種基本變換和矩陣變換和Silverlight中的使用方法都是一樣。

包括：　 RotateTransform:旋轉變換

ScaleTransform：縮放變換

SkewTransform：傾斜變換

TranslateTransform：移動變換

TransformGroup：變換組

MatrixTransform：矩陣變換

這些變換的意義和使用都可以看我之前寫過的兩篇文章：

Silverlight實用竅門系列： 53.Silverlight中的5種基本變換RotateTransform、ScaleTransform、SkewTransform、TranslateTransform 、TransformGroup

Silverlight實用竅門系列：54.詳解Silverlight中的矩陣變換MatrixTransform， 實現其餘各種變換

AppBar應用程式欄是在Windows 8程式在右擊程式下方或者手指從下往上滑動彈出的 一個訊息列。在這個欄裡可以做一些自訂的操作如：卸載程式，添加資訊，搜尋等操作。

基本變換 和矩陣變換

<!--RotateTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="48,49,0,0" Name="image11"        Stretch="Fill"  Width="50" Source="iPhone_001.png"  Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="48,49,0,0" Name="image1"        Stretch="Fill"  Width="50" Source="iPhone_001.png" >               <Image.RenderTransform>                   <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>               </Image.RenderTransform>           </Image>                  <!--ScaleTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="139,49,0,0" Name="image21"        Stretch="Fill" Width="50" Source="iPhone_002.png"  Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="139,49,0,0" Name="image2"        Stretch="Fill" Width="50" Source="iPhone_002.png">               <Image.RenderTransform>                   <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"></ScaleTransform>               </Image.RenderTransform>           </Image>                  <!--SkewTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="226,49,0,0" Name="image31"        Stretch="Fill" Width="50" Source="iPhone_003.png" Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="226,49,0,0" Name="image3"        Stretch="Fill" Width="50" Source="iPhone_003.png" >               <Image.RenderTransform>                   <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"></SkewTransform>               </Image.RenderTransform>           </Image>                  <!--TranslateTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="331,49,0,0" Name="image41"        Stretch="Fill" Width="50" Source="iPhone_004.png" Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="331,49,0,0" Name="image4"        Stretch="Fill" Width="50" Source="iPhone_004.png" >               <Image.RenderTransform>                   <TranslateTransform X="10" Y="50"></TranslateTransform>               </Image.RenderTransform>           </Image>                  <!--TransformGroup變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="426,49,0,0" Name="image51"        Stretch="Fill" Width="50" Source="iPhone_005.png" Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="426,49,0,0" Name="image5"        Stretch="Fill" Width="50" Source="iPhone_005.png" >               <Image.RenderTransform>                   <TransformGroup>                       <ScaleTransform ScaleY="-1"/>                       <TranslateTransform Y="100"/>                   </TransformGroup>               </Image.RenderTransform>           </Image>                         <!--RotateTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="48,249,0,0" Name="image1166"                Stretch="Fill"  Width="50" Source="iPhone_001.png"  Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="48,249,0,0" Name="image166"                Stretch="Fill"  Width="50" Source="iPhone_001.png" >               <Image.RenderTransform>                   <MatrixTransform Matrix="0 1 -1 0 0 0"></MatrixTransform>               </Image.RenderTransform>           </Image>                  <!--ScaleTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="139,249,0,0" Name="image2166"                Stretch="Fill" Width="50" Source="iPhone_002.png"  Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="139,249,0,0" Name="image266"                Stretch="Fill" Width="50" Source="iPhone_002.png">               <Image.RenderTransform>                   <MatrixTransform Matrix="0.6 0 0 0.6 0 0"></MatrixTransform>               </Image.RenderTransform>           </Image>                  <!--SkewTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="226,249,0,0" Name="image3166"                Stretch="Fill" Width="50" Source="iPhone_003.png" Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="226,249,0,0" Name="image366"                Stretch="Fill" Width="50" Source="iPhone_003.png" >               <Image.RenderTransform>                   <MatrixTransform Matrix="1 0 1 1 0 0"></MatrixTransform>               </Image.RenderTransform>           </Image>                  <!--TranslateTransform變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="331,249,0,0" Name="image4166"               Stretch="Fill" Width="50" Source="iPhone_004.png" Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="331,249,0,0" Name="image466"               Stretch="Fill" Width="50" Source="iPhone_004.png" >               <Image.RenderTransform>                   <MatrixTransform Matrix="1 0 0 1 10 50"></MatrixTransform>               </Image.RenderTransform>           </Image>                  <!--TransformGroup變換-->           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="426,249,0,0" Name="image5166"               Stretch="Fill" Width="50" Source="iPhone_005.png" Opacity=".3"/>           <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"               Margin="426,249,0,0" Name="image566"               Stretch="Fill" Width="50" Source="iPhone_005.png" >               <Image.RenderTransform>                   <MatrixTransform Matrix="1 0 0 -1 0 0"></MatrixTransform>               </Image.RenderTransform>           </Image>           <TextBlock HorizontalAlignment="Left" Margin="10,121,0,0"                   TextWrapping="Wrap" Text="採用多種方式對圖片進行旋轉"                   VerticalAlignment="Top" Height="16" Width="206"/>           <TextBlock HorizontalAlignment="Left" Margin="10,321,0,0"                   TextWrapping="Wrap" Text="採用MatrixTransform方式對圖片進行旋轉"                   VerticalAlignment="Top" Height="16" Width="206"/>           <TextBlock HorizontalAlignment="Left" Margin="550,271,0,0"                   TextWrapping="Wrap" Text="" Name="tbText"                   VerticalAlignment="Top" Width="232"/>