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

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

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

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

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

01

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

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

这边要注意的一点：

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

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

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

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

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

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

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

02

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

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

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

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

03

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

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

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

按下Play观看效果

别忘记要加上ControlStoryboardAction的Trigger喔!

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

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

本篇的教学就到此。

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

?

一步一步迈向HIE之路

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

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