[ Expression Blend 4 ] Expression Blend的初心筆記Ch.9–一個蘿蔔一個坑 - 了解群組容器元件[StackPanel]

  • 3176
  • 0
  • 2011-03-11

[ Expression Blend 4 ] Expression Blend的初心筆記Ch.9–一個蘿蔔一個坑 - 了解群組容器元件[Stack Panel]
如同HTML有各種標籤,Blend中的容器元件也是,今天要介紹"Stack Panel"堆疊面板,


如同HTML有各種標籤,Blend中的容器元件也是,今天要介紹"StackPanel"堆疊面板,堆疊面板顧名思義專門用來堆疊元件用,以HTML標籤為例,類似<ol><ul>等序列清單。

A.首先Crtl+Shift+N開啟新專案"prj_stack_panel",點選左邊的工具列容器元件的"StackPanel"在舞台上拉出一個Stackpanel,取名為nav。
B.看到右邊的Layout視窗,主要不同的選項多了一個"Orientation / 方向",有Vertical(垂直)Horizontal(水平)兩個值,是要設定在堆疊面板中子元件的堆疊方向。
new_stackpanel

堆疊方向預設為Vertical(垂直),我們在nav裡面利用長方型(M)工具拉出兩個長方型,來看看子元件堆疊的效果,可以看到堆疊效果如下圖。
stack

A.左方元件與時間軸面板中可以看到我們拉出兩個方形元件。
B.上方標示為B的方形元件:直接在nav中拉出方形後,可以看到方型設定如左下Layout,有固定寬度的長方形。
C.上方標示為C的方形元件:接著拉出第二個方型時,Layout設定如右下,寬度為auto,由與邊界的距離控制,直接垂直堆疊在B方形的下方。
D.可以從紫色的部分看出其設定值的不同,在預設的狀態下,我們拉出的元件會呈現垂直堆疊的狀態,其他部分則依照我們實際拉出的位置設定其值。

同時選取兩個方形,A我們將其寬高同時設定為50,四邊Margin邊界設定為0,水平垂直的對齊設定置中,可以看到B.Orientation(方向)設定Vertical(垂直),方形堆疊的方式如下圖。
stack_list

接著我們直接將Orientation(方向)改為Horizontal(水平),可以看到方形直接如下圖成為水平堆疊的狀態。
stack_list_h

上面兩個動作我們可以看出StackPanel最主要的堆疊功能設定,垂直與水平兩種效果。上兩種是在子物件寬高固定的情況,如果希望可以配合StackPanel的寬度做縮放,我們修正數值如下。在水平對齊的狀態,將兩個方形的高度設定為自動,此時方形會隨nav物件撐滿高度,nav變更大小時,子物件的高度也會跟著縮放,同樣的道理在水平堆疊的狀態下,將寬度設為自動也可以得到延展的效果。
 V_auto

當我們把nav縮的比子物件小時,發現高度會依照nav大小縮放,但寬度的部份固定,超出的範圍不顯示
view

接著我們回到上一步,來看看Margin對子物件的影響。選取兩個方形物件,在邊界的部分填上15,可以發現如下圖,會發現margin的間距,是跟離最近的物件或母物件的間隔,所以堆疊的第二個子物件,可以看出他是與第一個之間有區隔,這樣的效果可以應用在導覽列按鈕的區隔。
margin

StackPanel就是這麼簡單,但是堆疊的觀念很重要喔,在之後的排版中,有很多會用到他的部分!!!
下一次讓我們來做個導覽列看看吧!!!