[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有一定程度的了解了。