控制項 UI RenderTransform, Projection, Clip, UseLa
介紹
重新想象 Windows 8 Store Apps 之 控制項 UI
RenderTransform - 變換(用於做位移,旋轉,縮放,扭曲等變換)
Projection - 映射
Clip - 剪裁併顯示 UIElement 的指定地區
UseLayoutRounding - 是否使用完整像素布局
樣本
1、示範 RenderTransform 的應用
Controls/UI/RenderTransform.xaml
<Page x:Class="XamlDemo.Controls.UI.RenderTransform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid Margin="120 0 0 0"> <!-- RenderTransform - 變換(用於做位移,旋轉,縮放,扭曲等變換) --> <Grid HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"> <Rectangle.RenderTransform> <!--RotateTransform - 旋轉變換(順時針)--> <!-- Angle - 旋轉角度。預設值 0 CenterX - 旋轉中心點的 X 軸座標。預設值 0 CenterY - 旋轉中心點的 Y 軸座標。預設值 0 --> <RotateTransform Angle="15" CenterX="100" CenterY="50" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Margin="400 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <!-- RenderTransformOrigin - 位置變換的中心點 --> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="15" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Margin="800 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"> <Rectangle.RenderTransform> <!--TranslateTransform - 平移變換--> <!-- X - 水平方向上移動的距離。預設值 0 Y - 垂直方向上移動的距離。預設值 0 --> <TranslateTransform X="100" Y="10" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Margin="0 200 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"> <Rectangle.RenderTransform> <!--ScaleTransform - 縮放變換--> <!-- ScaleX - X 軸方向上縮放的倍數。預設值 1 ScaleY - Y 軸方向上縮放的倍數。預設值 1 CenterX - 縮放中心點的 X 軸座標。預設值 0 CenterY - 縮放中心點的 Y 軸座標。預設值 0 --> <ScaleTransform ScaleX="1.1" ScaleY="1.3" CenterX="100" CenterY="50" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Margin="400 200 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"> <Rectangle.RenderTransform> <!--SkewTransform - 扭曲變換(典型應用:在 二維 對象中類比 三維 深度)--> <!-- CenterX - 扭曲中心點的 X 軸座標。預設值 0 CenterY - 扭曲中心點的 Y 軸座標。預設值 0 AngleX - X 軸扭曲角度,Y 軸繞原點旋轉(逆時針)。CenterX 對此值所產生的呈現結果沒有影響。預設值 0 AngleY - Y 軸扭曲角度,X 軸繞原點旋轉(順時針)。CenterY 對此值所產生的呈現結果沒有影響。預設值 0 --> <SkewTransform AngleX="30" AngleY="5" CenterX="0" CenterY="0" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Margin="800 200 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"> <Rectangle.RenderTransform> <!--TransformGroup - 多個 Transform 組成的複合變換--> <TransformGroup> <TranslateTransform X="100" Y="10" /> <RotateTransform Angle="15" CenterX="100" CenterY="50" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </Grid> <!-- CompositeTransform - 將多種變換方式合而為一 CenterX - 變換中心點的 X 座標 CenterY - 變換中心點的 Y 座標 Rotation - 順時針旋轉角度 ScaleX - 沿 X 軸方向上的縮放比例 ScaleY - 沿 Y 軸方向上的縮放比例 SkewX - X 軸扭曲角度 SkewY - Y 軸扭曲角度 TranslateX - 沿 X 軸方向上的平移距離 TranslateY - 沿 Y 軸方向上的平移距離 --> <Grid Margin="0 400 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"> <Rectangle.RenderTransform> <CompositeTransform SkewX="30" Rotation="60" ScaleX="0.6" ScaleY="0.3" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <!-- MatrixTransform - 仿射矩陣轉換 |X| |M11(預設值 1) M21(預設值 0) 0| |Y| = |x y 1| * |M12(預設值 0) M22(預設值 1) 0| |1| |OffsetX(預設值 0) OffsetY(預設值 0) 1| X = x * M11 + y * M12 + OffsetX Y = x * M21 + y * M22 + OffsetY 利用 MatrixTransform 實現平移、旋轉、縮放、扭曲的 Demo 詳見 http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html --> <Grid Margin="400 400 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" /> <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"> <Rectangle.RenderTransform> <!-- m11, m12, m21, m22, offsetX, offsetY --> <MatrixTransform Matrix="1, 0.5, 0, 1, 30, 10" /> </Rectangle.RenderTransform> </Rectangle> </Grid> </Grid> </Grid></Page>