windows phone (15) UI变换上

简介: 原文:windows phone (15) UI变换上在wp中只要是继承自UIElement 的任何对象都可以应用变换,当然包含Textblock,Rectangle等所有的元素,下面我们使用Textblock进行案例演示,这里会介绍到7中变换分别是:TransLateTransForm 移动...
原文: 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内容区域;好了写到这里下一篇继续···

 

 

 

 

 

                                                                                                                                                                          跬步积千里

 

目录
相关文章
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
310 1
|
IDE 程序员 编译器
C#编程学习09:vs2015的windows窗体应用程序创建及英文界面变换为中文界面的方法
C#编程学习09:vs2015的windows窗体应用程序创建及英文界面变换为中文界面的方法
C#编程学习09:vs2015的windows窗体应用程序创建及英文界面变换为中文界面的方法
|
Web App开发 安全 Linux
Windows 10 大更新:界面更流畅、新 UI、字体商店,还有这些新功能……
Windows 10 大更新:界面更流畅、新 UI、字体商店,还有这些新功能……
278 0
windows 2019 无UI版的常见问题
windows 2019 无UI版的常见问题
|
UED Windows
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
235 0
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
|
Android开发 iOS开发 Windows
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
不久前,随着最后一家WP手机厂商惠普宣布取消今后Windows Phone的研发计划,以及微软官方声明对WP8.1系统今后所有升级维护的终止,WP手机,作为曾经和安卓手机、苹果手机并驾齐驱的三大智能手机之一,正式寿终正寝。
1806 0
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
|
XML 开发框架 前端开发
Windows Phone快速入门需掌握哪些能力
在此之前,先普及下Windows Phone的概念和开发工具的介绍。 Windows Phone是微软公司开发的手机操作系统,它将微软旗下的Xbox Live游戏、Xbox Music音乐与独特的视频体验集成至手机中。2012年6月21日,微软正式发布Windows Phone 8,采用和Windows 8相同的Windows NT内核,同时也针对市场的Windows Phone 7.5发布Windows Phone 7.8。
308 0
Windows Phone快速入门需掌握哪些能力
|
移动开发 Android开发 开发者
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
在Build 2014大会上,微软正式发布了传闻已久的Windows Phone 8.1系统,所有的Windows Phone 8手机都可以升级,微软这次可谓是十分厚道。虽然并非迭代升级,但WP 8.1还是拥有很多重大更新,对于微软进一步完善移动平台拥有积极的意义。下面,就一起来了解一下WP 8.1的主要新特性。
352 0
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
|
编解码 安全 Linux
flutter 在windows和linux上运行IOS UI模拟器
之前发视频总是有人留言,我用的什么模拟器,今天给大家说一下 我一般用的是device_preview这个插件,这个插件的闲置是只能做UI上的模拟,并没有真正的运行环境。 近似您的应用程序在另一台设备上的外观和性能。
486 0
|
Windows
windows 2019 无UI版的常见问题
windows 2019 无UI版的常见问题
3407 0
windows 2019 无UI版的常见问题