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

目录
相关文章
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
384 0
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
387 7
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
1825 1
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
916 0
|
存储 C# 数据格式
WPF动画教程(PointAnimationUsingPath的使用)
WPF动画教程(PointAnimationUsingPath的使用)
307 0
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
482 0
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
501 0
|
API C# 索引
WPF中的动画——(一)基本概念
原文:WPF中的动画——(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。
1336 0
|
C# 测试技术
WPF中的动画——(二)From/To/By 动画
原文:WPF中的动画——(二)From/To/By 动画 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画:     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
1193 0
|
Go C#
Motion Paths in WPF 4 using Expression Blend 4
原文 Motion Paths in WPF 4 using Expression Blend 4 Posted by: Pravinkumar Dabade , on 3/19/2011, in Category WPF  Views: 65576  Abstract: I...
1384 0