[Windows Store App 開發筆記] 控制物件的縮放平移 PART2
前言
http://www.dotblogs.com.tw/harrys86016/archive/2013/11/29/131985.aspx
前一篇說到控制項的的四種變形，有實作的人會發現，每個控制項只能做一種變形，無法連續定義兩種變形在RenderTransform底下。
那麼要如何做到多重變形呢，這邊介紹兩種方法。
實作
1. 第一個其實就是利用TransformGroup把你的變形方法包起來
其餘的部分都和第一篇介紹的一樣
如下的xaml：
1: <Rectangle.RenderTransform>
2: <TransformGroup>
3: <TranslateTransform x:Name="Translate" X="50" Y="50"/>
4: <RotateTransform x:Name="Rotate" Angle="-30"/>
5: <ScaleTransform x:Name="Scale" ScaleX="1.2" ScaleY="1.2"/>
6: </TransformGroup>
7: </Rectangle.RenderTransform>
2. 第二個是利用CompositeTransform，這個方法比較簡單且便利
如下的xaml：
1: <Rectangle.RenderTransform>
2: <CompositeTransform ScaleX="1.5" ScaleY="1.5" SkewX="10" SkewY="10"/>
3: </Rectangle.RenderTransform>
註：TransformGroup的好處是你可以對不同的變形定義不同的中心，利用CenterX和CenterY即可
完整的xaml：
1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
2: <Grid.ColumnDefinitions>
3: <ColumnDefinition Width="*"/>
4: <ColumnDefinition Width="*"/>
5: </Grid.ColumnDefinitions>
6: <Grid Grid.Row="0" Grid.Column="0">
7: <TextBlock Text="TransformGroup" FontSize="30"/>
8: <Rectangle Width="300" Height="150" Fill="White" ></Rectangle>
9: <Rectangle Width="300" Height="150" Fill="Red" Opacity="0.5" RenderTransformOrigin="0.5, 0.5">
10: <Rectangle.RenderTransform>
11: <TransformGroup>
12: <TranslateTransform x:Name="Translate" X="50" Y="50"/>
13: <RotateTransform x:Name="Rotate" Angle="-30"/>
14: <ScaleTransform x:Name="Scale" ScaleX="1.2" ScaleY="1.2"/>
15: </TransformGroup>
16: </Rectangle.RenderTransform>
17: </Rectangle>
18: </Grid>
19: <Grid Grid.Row="0" Grid.Column="1">
20: <TextBlock Text="CompositeTransform" FontSize="30"/>
21: <Rectangle Width="300" Height="150" Fill="White" ></Rectangle>
22: <Rectangle Width="300" Height="150" Fill="Red" Opacity="0.5" RenderTransformOrigin="0.5, 0.5">
23: <Rectangle.RenderTransform>
24: <CompositeTransform ScaleX="1.5" ScaleY="1.5" SkewX="10" SkewY="10"/>
25: </Rectangle.RenderTransform>
26: </Rectangle>
27: </Grid>
28: </Grid>
執行結果：
下一篇會介紹如何在程式中偵測手勢來控制物件的變形喔，敬請期待!!!