开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II

简介: 原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox。
+关注继续查看
原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II


延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox。
看Blend如何把CheckBox变成飞碟!

?

延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox。

看Blend如何把CheckBox变成飞碟!

?

?

?

灵感取自经典动画!「怪兽大战外星人」!!!!!!

?

?

?

本章需要两张图片,一为幽浮、另一个是怪兽毛毛虫

(是的!它就是「怪兽大战外星人」里的毛毛虫怪,实在太可爱了>"<)

如果你手边没有类似的图片,又想跟着一步一步做的话,小猴子已经帮你准备好噜!!

请点此下载

?

01 置入Import Adobe Photoshop File

首先,请把小猴子已经帮你准备好的Photoshop档案置入Blend里面

该怎麽置入,先前已经有教过噜!

(复习请点此)

?

02 转换成控制项

接着,请把幽浮转换成控制项->CheckBox

右键Make Into Control->CheckBox(上一章有详细教学噜!)

clip_image001

?

转换完成後,请记得删除不需要用到的Content Presenter

?

03 制作幽浮光线

预先做好Checked状态时变化的光线

使用Pen绕着原本的光线,绘出一样的区域,并且调整Fill(忘记Pen吗?点我复习)

范例Fill颜色为:

0%???? #33FFF500?????? Alpha 20%

100% #A5FFFFFF?????? Alpha 65%

clip_image003

?

请记得在Normal时的Opacity调为 0%

clip_image004

?

04 Checked时的状态

Checked时光线亮起,所以在时间轴设定1秒Opacity100%

clip_image006

?

05 回到一般编辑模式

离开样版编辑模式後,我们来设计怪兽毛虫的动画

这边请发挥您的创造力~

动画设计完成後,请置入ControlStoryboardAction->Trigger

记得这边最重要是EventName别设置错喔!

18-1

?

因为是配合CheckBox,触发条件就非MouseLeftButtonDown噜!而是选择Checked,才能配合刚刚我们所设置的CheckBox样版。

?

?

本篇范例的图片仅供教学之用,若有侵权请告知。

?

?

?

本篇的教学就到此。

?

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

?

?

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
在ECS实例上安装MySQL
在ECS实例上安装MySQL,步骤如下
104 0
WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果
原文:WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果 本篇文章阅读的基础是在读者对于WPF有一定的了解并且有WPF相关的编码经验,对于Blend的界面布局有基础的知识.
989 0
【全面解禁!真正的Expression Blend实战开发技巧】序章
原文:【全面解禁!真正的Expression Blend实战开发技巧】序章   从silverlight2开始我也和大家一样一直在跟随微软的脚步,从sl2~sl4一步一步过来,总结了不少心得体会。由于各种原因,始终没有机会把他全面的介绍和讲解出来。
879 0
零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析。
1139 0
零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」
原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」。
1103 0
零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷,也是...
1060 0
零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧
原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧 本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作的图来进行,教你如何将图做X、Y、Z空间的延伸。
1187 0
Win10年度更新开发必备:VS2015 Update 3正式版下载汇总
微软在06月27日发布了Visual Studio 2015 Update 3 。在MSDN中微软也提供下载,而且MSDN的Visual Studio 2015 Update 3与官方免费下载的文件是一致的,只是文件名不一样,除TFS除外。
1310 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载