介绍
重新想象 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