windows phone (15) UI變換上

在wp中只要是繼承自UIElement 的任何對象都可以應用變換，當然包含Textblock，Rectangle等所有的元素，下面我們使用Textblock進行案例示範，這裡會介紹到7中變換分別是：

TransLateTransForm
移動位置，包含水平移動和垂直移動

ScaleTransform
縮放變換 對UI進行放大縮小 包含X軸上的縮放和Y軸上的縮放

RotateTransform
旋轉 根據定義的旋轉點設定角度進行旋轉

SkewTransform
對UI進行一定角度的傾斜

MatrixTransfrom 矩陣變換，一句標準矩陣表示的變換

TransformGroup 複合變換按照指定順序將多個變換複合為一個變換

CompositeTransform 組合變換按照固定順序組合一系列變換

 

 這裡使用變換需要用到UIElement定義的RenderTransform屬性進行設定變換

 

TransLateTransForm

 程式碼範例：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <TextBlock x:Name="tb1" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan"></TextBlock>            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan">                <TextBlock.RenderTransform>                    <TranslateTransform X="-2" Y="3"></TranslateTransform>                </TextBlock.RenderTransform>            </TextBlock>        </Grid>

 從上面xaml檔案中可以看到定義的移動位置，X表示在x軸上移動多少，此值為正表示向右移動相應位置，為負表示向左移動相應位置；Y表示在Y軸上移動多少，同理Y值為正向上移動相應位置，為負向下移動相應位置；見下：

 

 

ScaleTransform

程式碼範例：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <TextBlock x:Name="tbShow"  VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan">                <TextBlock.RenderTransform>                    <ScaleTransform ScaleX="2"  ScaleY="2" CenterX="20" CenterY="30" ></ScaleTransform>                </TextBlock.RenderTransform>            </TextBlock>        </Grid>

在這裡ScaleTransform設定了四個屬性，CenterX 和CenterY表示設定變換的點這裡的點座標是（20 30），ScaleX和ScaleY表示的是在X和Y方向上縮放的倍數，這裡可以是小數，當設定的數值大於0時會實現縮放功能，但是等於0的時候文字就消失不見了，都小於0的時候效果是文字進行左右和上下倒置

上面代碼的效果 ，使textblock元素高和寬都增大兩倍

 

 當我們把ScaleX和ScaleY都改為負值的時候會是這樣子

 

 

RotateTransform

 

程式碼範例：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <TextBlock x:Name="tb1" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" Text="變換文字樣本1"  Foreground="Cyan">                <TextBlock.RenderTransform>                   <RotateTransform Angle="30" CenterX="1" CenterY="1"></RotateTransform>                </TextBlock.RenderTransform>            </TextBlock>            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字樣本2"  Foreground="Cyan">                <TextBlock.RenderTransform>                   <RotateTransform Angle="-30" CenterX="1" CenterY="1"></RotateTransform>                </TextBlock.RenderTransform>            </TextBlock>        </Grid>

 這裡的CenterX 和CenterY也表示定義的變換點，Angle表示定義的角度，上面可以看出角度是分正負值的，當為0時也就是沒角度，無任何變換，實現的效果：

 

SkewTransform

 

 程式碼範例：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan">                <TextBlock.RenderTransform>                    <SkewTransform AngleX="20" AngleY="20"></SkewTransform>                </TextBlock.RenderTransform>            </TextBlock>        </Grid>

SkewTransform 表示基於某個變換點，在X軸和Y軸上的傾斜角度，上面設定的兩個屬性AngleX表示在X軸上的傾斜角度,AngleY表示在Y軸上的傾斜角度,變換點預設為（0 0）；就像上一個範例程式碼一樣，角度也是分正負值的，等於0時沒有任何角度變換，：

 

話說這個還是比較實用的；

你會發現基於某個點的變換，他們都會跑出Grid內容地區；好了寫到這裡下一篇繼續···

 

 

 

 

 

                                                                                                                                                                         
跬步積千裡