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 应用程序开发:一分钟入门
本文介绍 Windows Presentation Foundation (WPF),这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架,支持 XAML 语言,方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例,并深入探讨常见问题及解决方案,包括数据绑定、控件样式与模板、布局管理等方面,帮助开发者高效掌握 WPF 开发技巧。
624 65
|
SQL 中间件 C#
一个使用 WPF 开发的管理系统
一个使用 WPF 开发的管理系统
430 4
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
|
网络协议 网络安全 C#
基于 WPF 开发的简约,功能强大的终端模拟器
基于 WPF 开发的简约,功能强大的终端模拟器 前言今天大姚给大家推荐一款基于 WPF 开发的简约,功能强大的终端模拟器:ModengTerm。项目介绍ModengTerm是一款基于 WPF 开发的简约,功能强大的终端模拟器,可以用来连接SSH服务器,串口,TCP服务器,Windows命令行等。项目功能支持与SSH服务器,串口,Windows命令行进行交互。可以保存会话信息,方便下次直接登录。支持将终端内容导出为txt和html格式。根据关键字/正则表达式进行历史记录的查找。同步输入功能、历史记录、度可定制化的颜色主题、实时记录日志功能等。项目源码运行设置ModengTerm为启动项目运行:
435 0
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
容器 C# Docker
WPF与容器技术的碰撞:手把手教你Docker化WPF应用,实现跨环境一致性的开发与部署
【8月更文挑战第31天】容器技术简化了软件开发、测试和部署流程,尤其对Windows Presentation Foundation(WPF)应用程序而言,利用Docker能显著提升其可移植性和可维护性。本文通过具体示例代码,详细介绍了如何将WPF应用Docker化的过程,包括创建Dockerfile及构建和运行Docker镜像的步骤。借助容器技术,WPF应用能在任何支持Docker的环境下一致运行,极大地提升了开发效率和部署灵活性。
966 1
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
|
存储 开发框架 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(9) -- 实现系统动态菜单的配置和权限分配
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(9) -- 实现系统动态菜单的配置和权限分配
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(8) -- 使用Converter类实现内容的转义处理
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(8) -- 使用Converter类实现内容的转义处理
|
C# 开发者 Windows
全面指南:WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用,从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性,开发者需关注无障碍设计原则。这不仅是法律要求,更是社会责任,旨在让技术更人性化,惠及包括视障、听障及行动受限等用户群体。
606 0