零元學Expression Blend 4 - Chapter 13 用實例了解布局容器系列-「Pathlistbox」I
本系列將教大家以實做案例認識Blend 4 的布局容器，此章介紹的布局容器是Blend 4 裏的-「Pathlistbox」
?
本系列將教大家以實做案例認識Blend 4 的布局容器，此章介紹的布局容器是Blend 4 裏的-「Pathlistbox」
?
就是要讓不會的新手都看的懂!
?
<先來了解Pathlistbox的基本功能>
01
開啟一個新專案後，在主要工作區放入一個Ellipse，接著我們放入TextBlock，並打入你要的文字
?
為了要看出功能特別的地方，這裏要直接多做一個動作：
選取已經打入文字的TextBlock後，直接復制並貼上數個(不用管位置，讓數個TextBlock重疊即可)
如下圖
?
接著，在Assets的Search鍵入PathlistBox
?
再來，我們直接放在左上角後，把剛剛的TextBlock全選，放入
?
02
選取PathlistBox的狀態下，Properties會多出Layout Path的屬性設定
在Layout Path裏有個同心圓的小圈圈，請把它拉到我們所繪的Ellipse上
如下圖
?
這時候，你的畫面應該會變成範例圖片這樣
?
Capacity：用來調整顯示項目數量的上限
項目數跟剛剛比是不是變多了?
?
當然你也要有這麼多項目數才行，意思是：Capacity並不會自動生出項目，而是由以現有的項目數下去做調整
【舉例說明】
? 置入PathlistBox的TextBlock總共有8個，你可以設定顯示數量為5，在畫面上的TextBlock就只會顯示五個
? 但你若是設定顯示數量為9，畫面上的TextBlock一樣只會顯示8個
?
Padding：是設定項目間的間距(數字越小距離越近)
?
Orientation：是設定項目的方向
如下圖(本來設定為None，範例改為OrientToPath)
?
Start：設定項目排列起始位子，預設為0%，即為12點鐘方向
?
?
<PathlistBox應用實例>
了解PathlistBox的基本操作後，來看看到底可以用在甚麼地方
?
來制作一個小花!
01
清空主要工作區後，放入一個大小適中的Ellipse，為PathlistBox等等的路徑
再來，我們要制作PathlistBox的內容項目
一樣運用大小適中Ellipse拉出花瓣，並更改為漸層色彩後，復制4個起來(這時我們有5個花瓣)
?
02
一樣在左上置入一個PathlistBox後，把剛剛所做的五個花瓣放入PathlistBox裏面
接著在花瓣路徑Ellipse上，拉入LayoutPath內的同心圓小圈圈
?
03
運用Padding以及Orientation調整花瓣
?
04
我們直接選取PathlistBox所附著的路徑(Ellipse)，把花朵往上移一點
(花瓣會跟著路徑變化喔!試試變化案例裏的路徑Ellipse看看?)
?
加上花蕊、莖和葉，就大功告成啦!!!
?
記得要結合先前教學的動畫或其它功能喔!才能做到整合以及實做。
?
PathlistBox還可以做出很多效果，就請慢慢去發掘嚕!
往後有機會，我會再利用各種布局容器，制作更多的範例
?
?
記得結合之前所學喔!(想知道如何做出來，請看下章教學)
當您看到不錯效果的作品，若您不嫌棄的話請給我圖片或位置，讓我來試著分部解析並且分享給大家喔!
?
?
本篇的教學就到此。
?
?
(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您
零元學Expression Blend 4 - Chapter 13 用實例了解布局容器系列-「Pathlistbox」I