正文
今天帶大家了解一下XAML的一些基本容器與控件 :sunglasses:
熟悉HTML的朋友看到XAML的語法應該會很親切，因為XAML也使用tag的形式，如下（先看一下形式，不用去理解）#(稽滑)
XAML：
<Grid>
Todo
</Grid>
或
<Grid/>
上面兩種形式都是正確的 :bulb:
都表示新建了一個“Grid”，而區(qū)別在于第一種形式中在兩個grid的tag中間我們還能添加其他的東西，而第二種形式我們就不能添加其他的東西了，但是我們依舊可以添加“Property”（第一種也能添加property）
?那么問題來了！什么是 property？
中文來講就是 屬性 。還是很抽象？不慌，看圖！
上面兩圖中Background、MinWidth都是所說的property。而他們的等號后面雙引號內(nèi)部就是他們的值。比如說第一幅圖內(nèi)背景顏色是藍色的，而第二幅圖背景顏色是黑色的。
XAML控件通常包含了眾多property，其實你只需要按一個空格，vs就會彈出如上面兩圖所示的右邊的一大串列表，你可以通過鍵盤上下鍵切換，回車鍵直接輸入。這一大串列表里面都是你創(chuàng)建的東西的屬性。
看到這兒你一定一臉蒙蔽說啥啥啥，沒事我就先讓你們了解一下基本語法和一些基本知識，接下來，我要帶你們真的去了解XAML啦！
-
打開XAML文件并編輯
下來，我們打開上一篇創(chuàng)建的空白項目，雙擊右側Solution Explorer內(nèi)的 MainPage.xaml 文件，打開后 會出現(xiàn)如下圖所示：
介紹上圖內(nèi)已標明，這時候你發(fā)現(xiàn)文件里面已經(jīng)有了一個grid，那么grid到底是什么呢？
先別著急，我們來看看這文件里面有什么。
首先，你們會發(fā)現(xiàn)grid之外有一個Page！
Page你可以理解為頁面，vs在你創(chuàng)建XAML頁面的時候就已經(jīng)幫你創(chuàng)建了Page，然后Page里面包了一個Grid。
這時候，我們來講grid的作用
你們想，如果我們有一個文本框，然后我們放在Page里面，這是完全可以的，編譯器說：哈！你要在Page里面塞一個文本框！沒問題！但是，如果你有兩個文本框呢？或是更多呢？編譯器就迷糊了。因為你一旦直接放了多于一個的控件，編譯器就不知道你想把這些控件放哪兒了。編譯器覺得你要把兩三個控件都塞進一個Page，那我該把他們放在哪兒呢？重合？水平排布？垂直？
這時候Grid就登場了！
- XAML基礎容器介紹
- Grid
Grid就像一個容器，能告訴編譯器把控件放在什么地方，Grid翻譯成中文就是框格。Grid內(nèi)可以分行，可以分列，比如把一個grid分成兩行四列，四行三列都可以，這都取決于你的需要，然后你在把相應的空間放進幾行幾列的grid內(nèi)
那么Grid該如何分行分列呢？
寫法如下圖：
上面那個紅色框框內(nèi)，是分行，分成了四行。而下面是分列，分成了四列。那你們看了圖會想為什么height和width里面的東西有的是數(shù)字有的是數(shù)字加*有的還是auto。
接下來就來講講這個。
?直接寫數(shù)字，比如我直接寫了40，那就標識我告訴編譯器，這行或者這列，高或者寬40px（一種像素單位）
?直接寫auto，比如我第四行和第四列的高和寬都寫了auto，這就表示這些行高和列寬是根據(jù)里面放的空間的高度與寬度自動更改的，也就是說不用你去認為調(diào)控了。
?還有一種就是數(shù)字加 *，* 表示比例，例如我上面行的定義中第一行是 1*（ 1* 可以精簡寫作 *），而第二行是 2*，那么表示第一行和第二行的行高比例為1：2。如果分別是 3* 和 2*，那就表示3：2，以此類推，列定義里面也是如此。
小結：如果你想要只分行，不分列，那只需要定義上面紅色方框內(nèi)的東西。分幾行就寫幾個<RowDefination/>，其中每行的高度根據(jù)你的需要而定。以此類推，分列也如此。
簡單講完基礎容器Grid，那是不是還有其他容器？
是的呢！
舉個栗子??
當你想要并排垂直放八個控件，那你會怎么操作？學個Grid，然后分成八行？怕是瘋了#(受虐滑稽)更甚，如果放10個？100個？瘋了瘋了。這時候引入另一種容器叫StackPanel！
- StackPanel
如果你想要放八個控件進去，你只需要建立一個StackPanel，然后把控件一個個放進去，不需要分行，因為StackPanel會自動將你的控件垂直方向從上往下一個個放進去。當然StackPanel默認是垂直方向的，你也可以改為水平方向，如果是水平方向，那控件是從左向右推疊的。
代碼案例如下：
其中TextBlock就是顯示文字的控件
而Button顧名思義，就是按鈕啦！兩者具體內(nèi)容后面會提及。
預覽效果如下：
看見了吧控件乖乖的從上往下排了起來。那如果我想要水平呢？簡單！看下圖：
Stack Panel有一個property叫做Orientation，就是方向，如果你不寫那邊是默認Vertical，也就是垂直的。如果你想要水平，只要將這個property定義為Horizontal就可以啦！
還有一些基礎容器，比如RelativePanel，這個容器可以根據(jù)其他某個容器或者控件，去固定位置，比如始終在Grid的左邊，或是始終在TextBlock的上面。這個容器暫時不介紹啦當然，大家愿意的話，自己去探索探索。
- 容器的混合使用與使用注意事項
容器是可以嵌套使用的，比如Grid里面塞一個StackPanel，Grid里面塞一個Grid，StackPanel里面塞一個StackPanel，StackPanel里面塞一個Grid，等等等等，都是可以的，舉個栗子??
實際效果如下：
講到這里，嵌套使用是沒問題的。但是注意！容器不可以并行使用。比如這樣：
你可以看到vs給我劃了一大堆波浪線，告訴我這么些有問題。這是為什么呢？其實理解起來很簡單，這就和在Page里面直接塞多個控件是一樣的，你這么一來，編譯器就混亂了，它不知道你這兩個容器到底該怎么放。如果有專業(yè)一點的話來講，就是Content已經(jīng)重復設置了，Page中只能設置一次Content（看不懂這句沒關系)
總結
這篇了兩種基本容器Grid和StackPanel，也講述了Grid的分行與分列，下篇會講述如何將控件放入特定的行和列，并會引入幾個基礎控件
謝謝大家的！
下篇見！
