[Win8]Windows8开发笔记(五):变换与投射以及制作旋转的头像
2013-03-28 09:33
316 查看
变换可以让UI元素扭曲旋转等,不用改变逻辑的几何形状和位置,就像是用放大镜看物体一样。
Transform类型的属性都可以应用变换。
主要分以下三种:RotateTransform、ScaleTransform、TranslateTransform,都继承自Transform类。
下面新建一个项目TransformTest来实战一下。
先在屏幕上放一个按钮:
接下来是给这个按钮加上旋转变化。
Angle便是指定旋转角度,默认的旋转点是左上角,可以用centerX和centerY来实现。
下面来看看ScaleTransform缩放变换。
可以看见这样就会出现了button的缩放:
同理,可以使用一下代码实现平移变换。
当然这样的效果就是:
可以看见button的位置没有变化,变的是RenderTransform。这一点非常重要。
接下来看一下投射的概念,我们新建一张图片来做演示。
改变其中的Projection属性:
这样我们添加一个定时器就可以实现头像的3D旋转展示了。
先用x:name给控件属性添加名字:
然后跳转到MainPage.xaml.cs后台代码区域,在下面的OnNavigatedTo方法下添加如下代码:
Transform类型的属性都可以应用变换。
主要分以下三种:RotateTransform、ScaleTransform、TranslateTransform,都继承自Transform类。
下面新建一个项目TransformTest来实战一下。
先在屏幕上放一个按钮:
接下来是给这个按钮加上旋转变化。
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="200" Width="400"> <Button.RenderTransform> <RotateTransform Angle="45"></RotateTransform> </Button.RenderTransform> </Button> </Grid>
Angle便是指定旋转角度,默认的旋转点是左上角,可以用centerX和centerY来实现。
下面来看看ScaleTransform缩放变换。
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="200" Width="400"> <Button.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="1.5"></ScaleTransform> </Button.RenderTransform> </Button> </Grid>
可以看见这样就会出现了button的缩放:
同理,可以使用一下代码实现平移变换。
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="200" Width="400"> <Button.RenderTransform> <TranslateTransform X="100" Y="-200"></TranslateTransform> </Button.RenderTransform> </Button> </Grid>
当然这样的效果就是:
可以看见button的位置没有变化,变的是RenderTransform。这一点非常重要。
接下来看一下投射的概念,我们新建一张图片来做演示。
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Image HorizontalAlignment="Center" VerticalAlignment="Center" Height="400" Width="400" Source="头像.jpg"/> </Grid>
改变其中的Projection属性:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Image HorizontalAlignment="Center" VerticalAlignment="Center" Height="400" Width="400" Source="头像.jpg"> <Image.Projection> <PlaneProjection RotationY="45"> </PlaneProjection> </Image.Projection> </Image> </Grid>
这样我们添加一个定时器就可以实现头像的3D旋转展示了。
先用x:name给控件属性添加名字:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Image HorizontalAlignment="Center" VerticalAlignment="Center" Height="400" Width="400" Source="头像.jpg"> <Image.Projection> <PlaneProjection x:Name="pro" RotationY="45"/> </Image.Projection> </Image> </Grid>
然后跳转到MainPage.xaml.cs后台代码区域,在下面的OnNavigatedTo方法下添加如下代码:
protected override void OnNavigatedTo(NavigationEventArgs e) { DispatcherTimer timer = new DispatcherTimer(); timer.Interval = TimeSpan.FromMilliseconds(10); timer.Tick += timer_Tick; timer.Start(); } void timer_Tick(object sender, object e) { pro.RotationY += 1; }运行项目就可以看见旋转的头像了。
相关文章推荐
- [Win8]Windows8开发笔记(四):画刷介绍以及如何实现实现歌词动态变色显示
- [Win8]Windows8开发笔记(三):代码读取图片动态生成页面
- 微信开发笔记:获取用户openid,以及用户头像昵称等信息
- [Win8]Windows8开发笔记(七):页面样式的相关介绍
- [Win8]Windows8开发笔记(十一):动画故事版 StoryBoard的入门介绍
- [Win8]Windows8开发笔记(十):FlipView和自定义值转换器
- [Win8]Windows8开发笔记(二):三种基础的布局控件
- [Win8]Windows8开发笔记(十二):动画中Transition的使用
- [Win8]Windows8开发笔记(六):页面导航的基础与深入
- [Win8]Windows8开发笔记(十一):动画故事版 StoryBoard的入门介绍
- [Win8]Windows8开发笔记(八):数据绑定的基础
- [Win8]Windows8开发笔记(一):猜数字大小的游戏
- [Win8]Windows8开发笔记(九):ListView的使用和数据绑定
- [Win8]Windows8开发笔记(八):数据绑定的基础
- [Win8]Windows8开发笔记(七):页面样式的相关介绍
- 基于STM32的GPS定位系统开发,以及Ucenter使用笔记
- android开发笔记————简易随机器的制作
- 【iOS开发】仿QQ音乐头像旋转
- iPhone开发笔记(一):NavBar+TarBar以及其他
- Android开发笔记之广播知识的回顾和总结以及使用