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

本章将延续上一章的范例,步骤解析。

本章将延续上一章的范例,步骤解析。

若是对Pathlistbox基本属性还不认识的朋友,请返回上一章,小猴子良心建议:先求精、再求广!

01

开启一个新专案後,在主要工作区放入一个Ellipse,并调整到适当的位置

接着,建立我们的文字「I Love Blend 4」

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

这边要注意的一点:

若要做出范例的排列方式,每个字元必独立在自己的textBlock内

如果不懂这个意思,表示你还不懂Pathlistbox喔!

来看看下面的例子就知道:

若直接把整串「I Love Blend 4」打在一个textBlock内,我们来看看会发生什麽事

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

文字就没办法照我们范例想要的方式,排成圆形路径

而是以整串textBlock的中心点,去对应Pathlistbox路径的起始点

当然,这个强调点是针对此范例去做加强提醒

02

接着,我们建立一个Pathlistbox後,把刚刚建立「I Love Blend 4」的所有textBlock置入

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

textBlock置入Pathlistbox後,在选取PathlistBox的状态下,Properties会多出Layout Path的属性设定

在Layout Path里有个同心圆的小圈圈,请把它拉到我们所绘的Ellipse上(上一章有详细步骤)

现在,你的「I Love Blend 4」应该会变这样:

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

03

接着我们要进入动画设计,让文字可以绕着圆形旋转

关於动画版面的切换以及基本操作,这边就不多做介绍了,动画入门教学篇已有详细教学

在录制状态下,把时间轴拉到2秒的位子後,调整PathlistBox的Properties->Layout Paths->Start(0%->99%)

按下Play观看效果

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

别忘记要加上ControlStoryboardAction的Trigger喔!

范例设定为MouseEnter/Play+MouseLeftButtonDown/Stop

很简单的范例以及步骤解析,希望对你有帮助!要记得举一反三喔~

本篇的教学就到此。

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

?

一步一步迈向HIE之路

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

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

 
05-11 13:02