windows phone (15) UI變換上

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

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">

                    <ScaleTransform ScaleX="2"  ScaleY="2" CenterX="20" CenterY="30" ></ScaleTransform>

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

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

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

RotateTransform

            <TextBlock x:Name="tb1" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" Text="變換文字示例1"  Foreground="Cyan">

                   <RotateTransform Angle="30" CenterX="1" CenterY="1"></RotateTransform>

            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字示例2"  Foreground="Cyan">

                   <RotateTransform Angle="-30" CenterX="1" CenterY="1"></RotateTransform>

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

SkewTransform

                    <SkewTransform AngleX="20" AngleY="20"></SkewTransform>

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

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

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

本文轉自shenzhoulong  51CTO部落格，原文連結：http://blog.51cto.com/shenzhoulong/839246，如需轉載請自行聯系原作者