零元學Expression Blend 4 - Chapter 13 用實例了解佈局容器系列-「Pathlistbox」I


本系列將教大家以實做案例認識Blend 4 的佈局容器,此章介紹的佈局容器是Blend 4 裡的-「Pathlistbox」

 

本系列將教大家以實做案例認識Blend 4 的佈局容器,此章介紹的佈局容器是Blend 4 裡的-「Pathlistbox

 

就是要讓不會的新手都看的懂!

 

<先來瞭解Pathlistbox的基本功能>

01

開啟一個新專案後,在主要工作區放入一個Ellipse,接著我們放入TextBlock,並打入你要的文字

 

為了要看出功能特別的地方,這裡要直接多做一個動作:

選取已經打入文字的TextBlock後,直接複製並貼上數個(不用管位置,讓數個TextBlock重疊即可)

如下圖

13-1

 

接著,在AssetsSearch鍵入PathlistBox

13-2

 

再來,我們直接放在左上角後,把剛剛的TextBlock全選,放入PathlistBox裡

13-3

 

02

選取PathlistBox的狀態下,Properties會多出Layout Path的屬性設定

在Layout Path裡有個同心圓的小圈圈,請把它拉到我們所繪的Ellipse

如下圖

13-4

 

這時候,你的畫面應該會變成範例圖片這樣

13-6

 

Capacity:用來調整顯示項目數量的上限

13-5

項目數跟剛剛比是不是變多了?

 

當然你也要有這麼多項目數才行,意思是:Capacity並不會自動生出項目,而是由以現有的項目數下去做調整

【舉例說明】

  置入PathlistBox的TextBlock總共有8個,你可以設定顯示數量為5,在畫面上的TextBlock就只會顯示五個

  但你若是設定顯示數量為9,畫面上的TextBlock一樣只會顯示8個

 

Padding:是設定項目間的間距(數字越小距離越近)

 

Orientation:是設定項目的方向

如下圖(本來設定為None,範例改為OrientToPath)

13-7

 

Start:設定項目排列起始位子,預設為0%,即為12點鐘方向

 

 

<PathlistBox應用實例>

瞭解PathlistBox的基本操作後,來看看到底可以用在甚麼地方

 

來製作一個小花!

01

清空主要工作區後,放入一個大小適中的Ellipse,為PathlistBox等等的路徑

再來,我們要製作PathlistBox的內容項目

一樣運用大小適中Ellipse拉出花瓣,並更改為漸層色彩後,複製4個起來(這時我們有5個花瓣)

13-8

 

02

一樣在左上置入一個PathlistBox後,把剛剛所做的五個花瓣放入PathlistBox裡面

接著在花瓣路徑Ellipse上,拉入LayoutPath內的同心圓小圈圈

13-9

 

03

運用Padding以及Orientation調整花瓣

13-10

 

04

我們直接選取PathlistBox所附著的路徑(Ellipse),把花朵往上移一點

(花瓣會跟著路徑變化喔!試試變化案例裡的路徑Ellipse看看?)

 

加上花蕊、莖和葉,就大功告成啦!!!

13-11

 

記得要結合先前教學的動畫或其它功能喔!才能做到整合以及實做。

 

PathlistBox還可以做出很多效果,就請慢慢去發掘嚕!

往後有機會,我會再利用各種布局容器,製作更多的範例

 

 

記得結合之前所學喔!(想知道如何做出來,請看下章教學)

當您看到不錯效果的作品,若您不嫌棄的話請給我圖片或位置,讓我來試著分部解析並且分享給大家喔!

 

 

本篇的教學就到此。

 

 

(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)

一步一步邁向HIE之路

 

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您