1. 程式人生 > >零元學Expression Blend 4 - Chapter 13 用實例了解布局容器系列-「Pathlistbox」I

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

清空 path ets arc 結合 des log box alt

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


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

?

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

?

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

?

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

01

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

?

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

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

如下圖

技術分享圖片

?

接著,在AssetsSearch鍵入PathlistBox

技術分享圖片

?

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

PathlistBox裏

技術分享圖片

?

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