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

简介: 原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
原文: silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)

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

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

img_a31dd97b3487e9d60c7581953138aa4b.jpe

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

img_6308265334a4dc59ec565d18fd48af85.jpe

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

img_27c8d19324b0cacc1cc25dbd818c9d7a.jpeimg_5909f3332e94445cb1489010c35eba87.jpeimg_bf03613582192cd8d31613a3e8de8484.jpeimg_a97b3867be6a9473e74b8f4cff437edb.jpeimg_0b94f3a2b030dd6f2a16f8494b0d5319.jpe

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

img_d1c213876ac8ec6679ee8ad178330840.jpe

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

img_6039f52fa5140367715e08b97f15a636.jpeimg_e23aba35e9ce489679bcf5c5aa5dfd5a.jpe

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

img_ba6c558ee38874a4931899dbac5f0f55.jpe

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

background

img_8e67c20226fec952dd5ff3d0ca2ad1ec.jpe

borderbrush

img_aef406c7f1c91d34711a91287507968b.jpeimg_ae46ca6b439289922950d2ded9132010.jpeimg_ec2c9dbf4458f8d6707030ed06a4d345.jpeimg_15c6c70059f869269ced166d59078bf0.jpe

foreground

img_4b5c08da9f131f9ca78dcc2cbdb58d74.jpeimg_35959b91c1a9c9c005096a0cb77b18ee.jpe

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

img_a89e887c5bfd77c72efc16e4cfb457fe.jpeimg_85629622f1926debceb332e9d9e3a54a.jpe

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

img_99948b691d2f160f29af4550c0b3b65e.jpeimg_05b6ff433e6e9fdaae4d7d161af82e77.jpe

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

img_d947486e5b3e18dc9cbbdc3e186fab65.jpeimg_0672331d6460fca30f7f6fc0d95b936c.jpe

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

img_b7b0ae8651b7342cf7dc04450127cfe7.jpe

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

img_19f4d365fbf0bb31b90a2f14343249da.jpe

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

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

img_1e4baf4e98292c98ee14c7db54364248.jpeimg_11f6cbc2a1bdedfe93b717cd98241f6b.jpe

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

img_fee474ac75955c09dac112a3e30cff98.jpeimg_e0b118bce60c42cd95f3dcb7912563c6.jpeimg_7a3ccdc97028ccdb25f9381016368ef9.jpe

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

img_c93471938a2c7b3db5aa62336e43f068.jpe

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

img_eced044be5f6988feaf4dbb35c8aa154.jpeimg_eba0a390dd1002c3058780be6a96ef9e.jpe

img_14dfdffca6e9f710b6075bff2c056a4c.jpeimg_47ffa8fb36329d1fa6c9cc2cd4375af6.jpe

img_ffe8da1171d88ed3d9a20617ae8371bd.jpeimg_975bbce24555c54259c6a2edcdffd0f0.jpe

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

img_c12e2ec2106fca5e0e9fbd06f0363903.jpeimg_33e13a14c88aa15944ee36138e21df9e.jpe

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

TITLE 3的界面

img_5e308b2d19a5e8483229c5d9bfe228bb.jpe

TITLE 4的界面

img_f0f9fcea974c0db52975c575ffac11b8.jpe

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

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

img_402ffcf6249809cc4530f4b2caee1906.jpe

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

img_8d47799bce3f165fd63dded2ecc5f697.jpeimg_2cb1d5697b20d9bf8f6601dc1f22e9ff.jpe

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

img_62d9013c8dcf28b7031cf0872073ce19.jpe

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

img_d0474e954ec937599634d9c5359c2203.jpeimg_c826a4f24ee109da7c9742410b6a6ef8.jpeimg_2c10ef04aa85222e3b2d79b93e374e8a.jpe

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

img_22a457c8201ab2efdcd24e1b7b8825ea.jpeimg_0a6986bb167abebab03327dff86bf055.jpeimg_05c8466c6a36b7f7b41483035fcd4bb3.jpe

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

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

目录
相关文章
|
C# 开发者 Windows
全面指南:WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用,从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性,开发者需关注无障碍设计原则。这不仅是法律要求,更是社会责任,旨在让技术更人性化,惠及包括视障、听障及行动受限等用户群体。
451 0
|
前端开发 C# 容器
WPF/C#:实现导航功能
WPF/C#:实现导航功能
441 0
|
C# Windows
WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效
原文:WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效 不管在消费者的心中腾讯是一个怎么样的模仿者抄袭者的形象,但是腾讯在软件交互上的设计一直是一流的.正如某位已故的知名产品经理所说的:设计并非外观怎样,感觉如何.
1339 2
|
C#
WPF和Expression Blend开发实例:Loading动画
原文:WPF和Expression Blend开发实例:Loading动画 今天来点实际的,项目中可以真实使用的,一个Loading的动画,最后封装成一个控件,可以直接使用在项目中,先上图: 整个设计比较简单,就是在界面上画18个Path,然后通过动画改变OpacityMask的值来实现一种动态的效果.
1310 1
|
C#
WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果
原文:WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果 本篇文章阅读的基础是在读者对于WPF有一定的了解并且有WPF相关的编码经验,对于Blend的界面布局有基础的知识.
1260 0
|
C#
WPF Blend 一个动画结束后另一个动画开始执行(一个一个执行)
原文:WPF Blend 一个动画结束后另一个动画开始执行(一个一个执行) 先说明思路:一个故事版Storyboard,两个双精度动画帧DoubleAnimation。 一个一个执行的原理:控制动画开始时间(例如第一个动画用时2秒,第二个动画就第2秒起开始执行。
1364 0
|
C# Windows
为WPF和Silverlight的Grid添加边框线(zz)
原文:为WPF和Silverlight的Grid添加边框线(zz)   Grid是WPF和Silverlight中的一个重要的布局元素,其他的布局元素还有StackPanel, Canvas, Border等等。
1495 0
|
C#
潜移默化学会WPF(绚丽篇)--热烈欢迎RadioButton,改造成功,改造成ImageButton,新版导航
原文:潜移默化学会WPF(绚丽篇)--热烈欢迎RadioButton,改造成功,改造成ImageButton,新版导航 本样式 含有  触发器 和 动画    模板  ,多条件触发器,还有布局   本人博客园地址  http://www.
1775 0
|
C#
WPF和Expression Blend开发实例:Adorner(装饰器)应用实例
原文:WPF和Expression Blend开发实例:Adorner(装饰器)应用实例 装饰器-- 表示用于修饰 UIElement 的 FrameworkElement 的抽象类 简单来说就是,在不改变一个UIElement结构的情况下,将一个Visual对象加到它上面.
1145 0
|
C#
WPF特效-实现3D足球效果
原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下:  每个面加载不同贴图。                                                          ...
1026 0