windows phone (15) UI变换上
来源:互联网 发布:网络主播钱小佳 编辑:程序博客网 时间:2024/06/07 23:01
在wp中只要是继承自UIElement 的任何对象都可以应用变换,当然包含Textblock,Rectangle等所有的元素,下面我们使用Textblock进行案例演示,这里会介绍到7中变换分别是:
TransLateTransForm移动位置,包含水平移动和垂直移动
ScaleTransform缩放变换 对UI进行放大缩小 包含X轴上的缩放和Y轴上的缩放
RotateTransform旋转 根据定义的旋转点设置角度进行旋转
SkewTransform对UI进行一定角度的倾斜
MatrixTransfrom 矩阵变换,一句标准矩阵表示的变换
TransformGroup 复合变换按照指定顺序将多个变换复合为一个变换
CompositeTransform 组合变换按照固定顺序组合一系列变换
这里使用变换需要用到UIElement定义的RenderTransform属性进行设置变换
代码示例:
<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值为正向上移动相应位置,为负向下移动相应位置;效果图见下:
代码示例:
<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都改为负值的时候会是这样子
代码示例:
<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时也就是没角度,无任何变换,实现的效果:
代码示例:
<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>
话说这个还是比较实用的;
你会发现基于某个点的变换,他们都会跑出Grid内容区域;好了写到这里下一篇继续···
跬步积千里
- windows phone (15) UI变换上
- windows phone (16) UI变换 下
- windows phone:变换
- Windows Phone UI 风格
- 在windows phone上画图
- Windows Phone 7 -UI设计入门
- Windows Phone 7 UI 异常处理
- Windows phone UI流畅度优化
- windows phone 后台遍历 UI 元素
- windows phone:在Windows Phone上使用QQConnect OAuth2
- Windows Phone上的相机景深计算器
- Windows Phone 7上的扑克魔术
- Windows Phone 上的触控手势
- Windows Phone 上的触控手势
- 在 Windows Phone 7.5 上使用压缩
- Windows Phone平台上的Socket通信
- Windows Phone开发:常用控件(上)
- 《Windows Phone 7 UI设计及人机交互指南》翻译稿
- Myeclipse10 激活方式(MyEclipse10Crack.rar)
- Ajax+Js+Dom+Json无刷新分页技术
- Linux架设SVN版本控制
- 微信4.0:更新来源于新“教材”Path
- mysql-administrator的安装与使用(图文)
- windows phone (15) UI变换上
- 电脑网络连接异常的一个解决方法(ipconfig命令)
- 分享几本hadoop,Cassandra,MongoDB电子书
- WP7开发应用程序的能力
- java设计模式-终结者者模式
- 2010 Microsoft Office Excel 多列合并
- Android应用资源---绘制资源类型(Drawable)(一)
- 五种方法让你的软文像新闻
- 承载和使用WCF服务(三) 使用 Internet 信息服务进行承载