Windows 8 Store Apps学习(14) 控件UI

控件 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>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索windows
，控件
， windows store app
， store
，变换
， clip
apps
，以便于您获取更多的相关知识。

时间： 2024-04-19 08:11:23

Windows 8 Store Apps学习(14) 控件UI的相关文章

Windows 8 Store Apps学习(15) 控件 UI: 字体继承

控件 UI: 字体继承, Style, ControlTemplate, SystemReso 介绍重新想象 Windows 8 Store Apps 之控件 UI 字体继承 - 继承父辈的 Font 相关的信息 Style - 样式 ControlTemplate - 控件模板系统资源 - 系统内置的样式资源 VisualState - 视图状态 VisualStateManager - 视图状态管理器示例 1.演示字体继承 Controls/UI/FontInherit.xaml

Windows 8 Store Apps学习(16) 控件基础: 依赖属性等等

控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试介绍重新想象 Windows 8 Store Apps 之控件基础 DependencyProperty - 依赖属性 AttachedProperty - 附加属性控件的继承关系路由事件和命中测试示例 1.开发一个具有 DependencyProperty 和 AttachedProperty 的自定义控件 MyControls/themes/generic.xaml <ResourceDictionary x

Windows 8 Store Apps学习(17) 控件基础: Measure等

控件基础: Measure, Arrange, GeneralTransform, Visua 介绍重新想象 Windows 8 Store Apps 之控件基础 Measure() 和 Arrange() - xaml 的 layout 系统 GeneralTransform - 通过 UIElement.TransformToVisual() 获取元素的位置信息 VisualTree - 可视树示例 1.演示 xaml 的 layout 系统 Controls/Basic/Measur

Windows 8 Store Apps学习(3) 内容控件

ToolTip, Frame, AppBar, ContentControl 介绍重新想象 Windows 8 Store Apps 之内容控件 ToolTip - 提示框控件 Frame - 框架控件,用于导航内容 AppBar - 应用程序栏控件 ContentControl ContentPresenter - ContentPresenter 用来呈现 ContentControl 的 Content 重新想象 Windows 8 Store Apps 之容器控件 Border - 边

Windows 8 Store Apps学习(7) 布局控件

Canvas, Grid, StackPanel, VirtualizingS 介绍重新想象 Windows 8 Store Apps 之布局控件 Canvas - 绝对定位式布局 Grid - 网格式布局 StackPanel - 流式布局 VirtualizingStackPanel - 仅能用于 ItemsControl WrapGrid - 仅能用于 ItemsControl VariableSizedWrapGrid - 用于 Wrap 子元素集合示例 1.Canvas 的 Dem

Windows 8 Store Apps学习(6) 媒体控件

Image, MediaElement 介绍重新想象 Windows 8 Store Apps 之媒体控件 Image - 图片控件 MediaElement - 播放视频或音频的控件示例 1.Image 的 Demo ImageDemo.xaml <Page x:Class="XamlDemo.Controls.ImageDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&q

Windows 8 Store Apps学习(5) 集合控件

ComboBox, ListBox, FlipView, ItemsContr 介绍重新想象 Windows 8 Store Apps 之集合控件 ComboBox - 下拉框 ListBox - 列表框 FlipView - 滑动视图控件 ItemsControl ItemsPresenter - ItemsPresenter 用来呈现 ItemsControl 的 Items 示例 1.ComboBox 的 Demo ComboBoxDemo.xaml <Page x:Class="

Windows 8 Store Apps学习(4) 提示控件和范围控件

提示控件: ProgressRing; 范围控件: ProgressBar, Slider 介绍重新想象 Windows 8 Store Apps 之提示控件 ProgressRing - 进度圈控件重新想象 Windows 8 Store Apps 之范围控件 ProgressBar - 进度条控件 Slider - 滑动条控件示例 1.ProgressRing 的 Demo ProgressRingDemo.xaml <Page x:Class="XamlDemo.Control

Windows 8 Store Apps学习(2) 按钮控件

Button, HyperlinkButton, RepeatButton 介绍重新想象 Windows 8 Store Apps 之按钮控件 Button - 按钮控件 HyperlinkButton - 超链按钮 RepeatButton - 按住后会重复执行单击操作的按钮 ToggleButton - 可切换状态的按钮 RadioButton - 单选框控件 CheckBox - 复选框控件 ToggleSwitch - 状态切换控件示例 1.Button 的 Demo ButtonD