天天看點

零元學Expression Blend 4 - Chapter 11 用執行個體了解布局容器系列-「Border」

将教大家以實做案例認識Blend 4 的布局容器,此章介紹的布局容器是Blend 4 裡的專情王子-「Border」。

?

本系列将教大家以實做案例認識Blend 4 的布局容器,此章介紹的布局容器是Blend 4 裡的專情王子-「Border」。

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

<專情王子?查理B>

Border是Blend裡最簡單的布局容器,可以使用Border制作一個帶有邊框的布局容器。

Border最重要的特色是,Border内隻允許容納一種子物件。

01

運用上一章的範例,在主要工作區放入一個Border

零元學Expression Blend 4 - Chapter 11 用執行個體了解布局容器系列-「Border」

接着,把範例所做的ScrollViewer拉進剛剛的Border裡面

零元學Expression Blend 4 - Chapter 11 用執行個體了解布局容器系列-「Border」

可以測試一下,Border是不是隻能放入一個子物件。

會發現,Border隻能放入一個子物件,但是子物件卻不受這個限制;

讓我們從原始碼來看:

在我們的範例裡Border包含了一個ScrollViewer,不過StackPanel卻包含了數個Button。

這邊我們可以從Properties設定Border的長相。

設定Border的邊框粗細Properties->Appearance->BroderThickness

接着改變邊框顔色Properties->Brushes->BorderBrush

看,我們的ScrollViewer有了新的邊框

零元學Expression Blend 4 - Chapter 11 用執行個體了解布局容器系列-「Border」

02

接下來要教大家如何做Border的變化運用,隻需要一點小技巧

若是你不喜歡Border預設的四角方框框,記得把下面的設定技巧學起來喔!

開啟一個新專案後,在主要工作區放入一個Border

接着設定Properties->Appearance->CornerRadius,打上「20」後看看Border的變化

Border的四個角變成圓角,如下圖

零元學Expression Blend 4 - Chapter 11 用執行個體了解布局容器系列-「Border」

若是要使其中幾個角,變為原角的做法隻需要做下面的設定:

在CornerRadius打上「20 , 0 , 50 ,100」,會變為下圖的樣子

零元學Expression Blend 4 - Chapter 11 用執行個體了解布局容器系列-「Border」

由上圖得知,可以分别設定四個角的半徑弧度,分别是以順時針方向由左上到左下輸入數值。

還可以配合BroderThickness加上BorderBrush的設定,做出陰影邊框的效果

零元學Expression Blend 4 - Chapter 11 用執行個體了解布局容器系列-「Border」

本篇的教學就到此。

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

一步一步邁向HIE之路

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

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

繼續閱讀