2016年3月16日 星期三

[UWP-C#] Grid 格子控制項

Grid
這是最常使用的Layout元件之一,當你新增一個新的頁面時,預設的顯示畫面元件就是Grid。

假設你沒設定Grid的大小的話,它會自動充滿父類別。

舉例來說,我們新增一個頁面,並且在預設的Grid裡面,在加入一個我們的Grid,並設定背景顏色。



此時你會看到全部的區塊都變成綠色了,因為你沒有特別指定大小,因此會自動充滿父類別。



















接著你可以將長或寬指定為特定數值,假設我們將寬設定為50,你應該會看到這樣的畫面。



















我們指定了寬,而高並沒有指定,因此他還是填滿父類別,而寬則是我們指定的50。

最後,試著也把高指定50,你應該會看到一個置中的綠色方塊。

它預設的水平與垂直對齊是置中,因此若是你想要讓他在左上角顯示的話,

記得將它的水平與垂直對齊修正成左上。



知道它的基本特性後,我們來談談格子吧,既然稱為格子控制項,代表你可以像是格子一樣的擺放你的元件。

我們先將綠色Grid刪除,留下預設的Grid,並針對它來做一些設定。

我們可以定義行(Column)與列(Row),行就是左右,而列則是上下。

舉例來說,假設我們想要這整個Grid左右切成三等份,就是要定義行(Column),



定義的方式就像上面寫的一樣,在你的Grid中加入Grid.ColumnDefinitions,並在裡面定義每一行的寬度,而我們定義成*的話代表,那一行佔全部*的幾*,也就是說,總共定義了3個*,美一行佔了1個*,也就是平均3等分。


















當然你也可以其中幾個改成佔的比率高一些,將中間的寬改為2*就會像這樣。


















此時全部變成4*,第一格佔了1/4,第二格2/4,第三格則是1/4。

當然你也可以直接將實際的值打進去,像是第一行我們想要寬等於50,第二行也是。

就直接輸入50即可,實際值與*可以混用,假設有四行,前兩行為實際值,後兩行為*。



它會先將實際值的部分標出來,剩下的部分在與*來切割比例,因此會像這個樣子,

前兩格為實際50,後兩格則平均分成兩等份



















而定義列也是相同的方式,舉一個簡單的例子來看,剩下的觀念與定義行相同。



這樣我們就定義了上下切割為兩等份的Grid了。





















然而,行與列是可以同時被定義的,就像這個樣子。



你會得到像這個樣子的畫面。





















接著你就可以實際將元件放入格之中了,假設我們要在右下角那格放入一個Button。

你只需要在Grid之中加入這個Button,並針對它的Grid.Row與Grid.Column定義值即可。

而起始點是由0開始的,上面那列為0,而下面那列為1,行也是如此。

因此我們要在右下的話,也就是1,1的位置。



這樣一來你就會在右下角的區塊中加入一個Button了。

接著如果你想要跨行或跨列的話,也相當容易,假設我們要加入另一個Grid,放在上方的位置,並且跨兩行。

你只需要這樣輸入即可。



此時你的畫面應該長像這個樣子,上面兩行為藍色區塊,右下角為剛才加入的Button





















這樣應該對大部分設定Grid的方式有所了解了。

寬高的設定還有一種叫做auto,它會依照你放的元件寬高來決定這個欄位的大小。

假設我們現在切三行,而第一行為auto,後面兩行為*,這三行的寬度會這樣分配

第一行依照你放入的元件寬度而決定,二三行為剩下的寬切成兩等份。

因此假如你現在沒有放入任何元件在第一行時,會是剛好兩等份的寬。



像是這個樣子





















接著試著在第一行加入寬為100的Grid,你會發現變成三行了,而第一行為100,剩下為兩等份。























這樣你應該對Grid有一定程度的了解了。

沒有留言:

張貼留言