原文:零元学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(上一章有详细教学噜!)

?

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

?

03 制作幽浮光线

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

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

范例Fill颜色为:

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

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

?

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

?

04 Checked时的状态

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

?

05 回到一般编辑模式

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

这边请发挥您的创造力~

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

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

?

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

?

?

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

?

?

?

本篇的教学就到此。

?

?

?

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

?

?

一步一步迈向HIE之路

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

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

 

零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I

    原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变 ...

  2. 零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II

    原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例. ? ...

  3. 零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I

    原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置 ...

  4. 零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II

    原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析. 本章将延续上一章的范例,步骤解析 ...

  5. 零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

    原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend ...

  6. 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

    原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...

  7. 零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」

    原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Bl ...

  8. 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I

    原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...

  9. 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

    原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器 ...

随机推荐

  1. hdu 4644 BWT (kmp)

    看完题目你非常easy想到,这个题目的关键点就是怎样把给出的数组还原成原数组. 还原的原数组之后无论是AC自己主动机 还是 kmp都能够解决 - -尽管我认为kmp会超时的感觉. 那么怎样还原这个字符 ...

  2. while 常见程序逻辑

    1. 查找 List L; Position P = L; while (P && P->Element != Key) { P = P->Next; } return P ...

  3. AndroidClipSquare安卓实现方形头像裁剪

    安卓实现方形头像裁剪 实现思路.界面可见区域为2层View 最顶层的View是显示层,主要绘制半透明边框区域和白色裁剪区域,代码比較easy. 第二层继承ImageView,使用ImageView的M ...

  4. 带你轻松看源代码---AsyncTask(异步任务)

    本文出自博客Vander丶CSDN博客,如需转载请标明出处,尊重原创谢谢 博客地址:http://blog.csdn.net/l540675759/article/details/62893318 写 ...

  5. eclipse配置本地服务

    1.下载安装eclipse 2.下载tomcat文件,并解压 3.下载tomcat插件 com.sysdeo.eclipse.tomcat_3.3.0 将com.sysdeo.eclipse.tomc ...

  6. BFKit:对常用 UIButton,UIColor,UIDevice,UIFont ,UIImage 等开发类进行了扩展

    BFKit对常用于开发的类进行了扩展,整合了多个常用的控件和开发所需要的功能,是一个通用性的类库.集成后可以帮助更快的App开发.有兴趣的同学可以看看哦. http://code4app.com/io ...

  7. 浅谈CAS(Compare and Swap) 原理

    浅谈CAS原理java并发编程也研究了一段时间了,对CAS的原理总是不太理解,今天再研究了一下,记录一些自己的理解.    说到CAS,再java中的某些情况下,甚至jdk1.5以后的大多数情况,并发 ...

  8. three.js 初学小示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CUDA+OpenCV 绘制朱利亚(Julia)集合图形

    Julia集中的元素都是经过简单的迭代计算得到的,很适合用CUDA进行加速.对一个600*600的图像,需要进行360000次迭代计算,所以在CUDA中创建了600*600个线程块(block),每个 ...

  10. Math对象重新整理

    注意:Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法.这是它与Date,String对象的区别. Math对象的属性 --Math对象包含的属性大 ...