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中打开,添加一些代码。代码大家下源码研究下吧,我这里就不啰嗦了,都是简单的代码

目录
相关文章
|
9月前
|
C#
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
139 0
|
8月前
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
117 7
|
9月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
763 1
|
9月前
|
C# 开发者 Windows
全面指南:WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用,从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性,开发者需关注无障碍设计原则。这不仅是法律要求,更是社会责任,旨在让技术更人性化,惠及包括视障、听障及行动受限等用户群体。
218 0
|
9月前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
445 0
|
9月前
|
前端开发 C# 容器
WPF/C#:实现导航功能
WPF/C#:实现导航功能
200 0
|
9月前
|
存储 C# 数据格式
WPF动画教程(PointAnimationUsingPath的使用)
WPF动画教程(PointAnimationUsingPath的使用)
96 0
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
258 0
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
277 0
|
C# 索引
WPF简单模拟QQ登录背景动画
原文:WPF简单模拟QQ登录背景动画 介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图   大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.
1306 0