silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)

这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。

1.新建一个usercontrol,命名为menu.

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第1张图片

2.按照下图设置一下属性。宽度为1000,高度为40,边框宽度为2,圆角为10。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第2张图片

3.按照下图设置border的background。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第3张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第4张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第5张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第6张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第7张图片

4.选择渐变工具,设置渐变方向。(渐变工具)

5.给border加上阴影特效。边框颜色设置为透明。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第8张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第9张图片

6.在border内画出1个按钮,命名为title1.高和宽分别为30,160.

7.按照下图分别设置brushs。

background

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第10张图片

borderbrush

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第11张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第12张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第13张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第14张图片

foreground

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第15张图片

8.将按钮复制5个,排列在border内,然后合并到stackpanel内。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第16张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第17张图片

9.新建一个canvas,然后在其中使用矩形工具,画一个圆角矩形。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第18张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第19张图片

10.使用矩形工具绘制出一下图形。途中白色为矩形绘制的背景,黑色为一个视频。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第20张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第21张图片

11.然后将最外面的canvas命名为canvas1,然后visibility设置为collapsed.

12.按照上面步骤设置其他5个界面。下面给出我做的效果,大家参考下。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第22张图片

这边有一个richtextbox,说一下怎么修改他的样式。

1.先创建一个空的模板edit a copy

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第23张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第24张图片

2.下面说一下怎么修改左边的滑动条样式。选中如图所示的元素,然后编辑样式。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第25张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第26张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第27张图片

3.选中verticalscrollbar,然后继续编辑样式。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第28张图片

4.按照下图开始设置属性。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第29张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第30张图片

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第31张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第32张图片

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第33张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第34张图片

5.选中verticalsmalldecrease,然后选择edit current,编辑样式。设置一下样式,样式就是改变颜色,大家自己设置下不同颜色就知道哪个属性操控的那块。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第35张图片

6.其他的都是按照这个步骤,大家有不明白的可以看源码,或者留言。

TITLE 3的界面

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第36张图片

TITLE 4的界面

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第37张图片

下面开始我们动画的设置。

1.新建一个stroyboard,选中border,在oS出和1S初添加关键帧。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第38张图片

2.在0s处将border的transfrom的ration设置为-90(这边是立体变形),然后在1S处将border的transfrom的ration设置为0

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第39张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第40张图片

3.选中canvas1,在0S处和1S处设置关键帧。然后1S和0S处得属性都设置如下

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第41张图片

4.接着新建一个stroyboard,命名为canvast1.在0s,0.8S,1.6S处添加关键帧。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第42张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第43张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第44张图片

5.继续新建一个stroyboard,命名为canvast1out,在0s,0.8S,1.6S处添加关键帧。

silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第45张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第46张图片silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)_第47张图片

6.用同样的属性,分别对canvas2,3,4,5,6做动画。

7。完成后,在VS中打开,添加一些代码。代码大家下源码研究下吧,我这里就不啰嗦了,都是简单的代码

你可能感兴趣的:(silverlight)