添加控件的方式有多種，大家更喜歡下面哪一種呢？
1）使用諸如blend for visual studio或microsoft visual studio xaml設計器的設計工具。
2）在visual studio xaml編輯器中将控件添加到xaml代碼中。
3）在代碼中添加控件。 注意：當應用運作時會看到你在代碼中添加的控件，但在 visual studio xaml 設計器中看不到。
前面我們通過在工具箱拖住控件以及直接在寫xaml代碼來設定控件，在教程的後面，我們會看到在c#背景代碼中添加控件。blend我們暫時還沒有用到，不過其在繪制圖形和動畫上可謂非常強大和優秀。
控件的屬性相比大家都已經會用了，一來可以直接在xaml中添加屬性，二來可以在屬性視圖中添加和修改屬性。
如果要添加和修改事件呢，同樣在屬性視圖中，點選右上角的閃電圖示即可。如果要添加click事件，那麼在click的輸入框中輸入好事件名稱後直接按enter即可。此時vs就會自動跳轉到c#背景代碼中，第一個參數sender是對處理程式所附加的對象的應用，第二參數是事件資料，它通常在簽名中顯示為e參數。
上面的這段代碼這會将所點選的button的高設定為400，寬設定為320；除了這種方式外，也可以按如下操作，其中btnsetstyle是目前button的名字：
除此之外，我們也可以不在xaml中定義click事件，按照如下操作也可以達到相同的效果，它會将兩個事件互相關聯。
即便沒有添加過資源，也不清楚什麼是樣式，沒關系，想必大家都玩過2048吧。遊戲中有許多方格，那這些方格的樣式會不會一個個去定義呢，當然不是，可以直接用樣式資源來定位到所有的button。
以下是一個基本樣式，
但是這裡也有一個問題，如果我們有10個button控件，卻隻想其中8個用到這些定義，另外2個想用另一種控件，那該怎麼辦呢？
将樣式定義為資源，其實是有2中方式的。
一種就是直接用style的targettype屬性來定義到所有的目标控件。
另一種則除了用targettype屬性外，還可以用x:key屬性，然後再具體的控件中庸顯式的關鍵字staticresource來設定具體的style屬性。
具體效果見下圖，其中opacity屬性為透明度。
大家都知道類可以繼承，樣式也是可以繼承的。
通過前面的學習，已經見過一些控件了，現在起将逐漸見到更多控件。但由于控件太多，教程中無法一一介紹，請自行舉一反三。教程内容也将不斷更新。
前面最常用的控件就是button了，button還有一個有意思的屬性，當把滑鼠指針放在button上時，就會在button的頭頂冒出一串文本。
button有一個很有意思的屬性。
隻要把滑鼠放到button上面就會顯示出這張圖檔了，也叫做幫助提示吧。其實更簡單的方法是下面這種。它顯示的是一個後退的樣式，而且滑鼠放上去會有文字back提示。
這個控件和button很像，它像開關一樣。
這控件和button一起講還蠻合适的，我們随意添加一個button，然後寫好click事件如下。
注意要在函數上加上async表示異步。
如果需要預覽效果，可以參見教程随後的“用浮出控件做預覽效果”。
combobox提供了下拉清單，自然也是一個很常用的控件。
listbox控件和combobox很相似，都可以讓使用者選擇已經嵌入在清單中的選項。用法如下：
winows平台設定時間的控件倒是很有特色，就是datepicker和timepicker。
以下既是截圖，也是寫這篇教程的時間。
這個控件的更多介紹也在教程随後的“時間控件的更多介紹”中。
flipview是一個可以讓使用者逐個浏覽的項目集合的控件，下面是相關的示例代碼。commonassets檔案夾完全可以定義在shared目錄下，這樣wp也可以拿來用了。
除此之外呢，我們還可以在背景代碼中添加，下面的第二段代碼和第一段類似，不過是用的list。
除了這2種方式之外呢，用collectionviewsource來綁定資料也是完全沒問題的。
上面是一段資源檔案，然後flipview listview的itemssource添加靜态資源綁定就ok了。
如果大家自己試過flipview就會發現它的圖檔資源等都是左右滾動的，如果要用上下滾動呢？那就用下面這個itemspaneltemplate模闆就好了。
如果有縮放圖檔，并且可以滾動以檢視圖檔的需要，那麼就可以用scrollbar啦。這主要是能留給圖檔的位置太小以至于圖檔無法全部顯示出來。
還有一個控件則可以将圖檔等縮放到指定的大小的，那就是viewbox。大家看看下面這個圖，是不是很炫酷呢。
相信大家都已經看過了gridview控件，很多modern應用都會采用的。其和combobox挺類似的。
hyperlinkbutton既可以作為button來用，也可以用來做超連結。
相信大家都挺喜歡玩進度條的吧？我本人倒是覺得相比于win7及vista等，win8的進度條變得更加有意思了。
第一個圖是運作中的進度條啦；第二個圖中的上圖也就是progressbar1，其value為70的确定進度的進度條，下圖則是progressbar2，是運作中的進度條在設計器中的靜止狀态。
環形的進度條會不會更好玩呢？
比如說win8上的音量呀、螢幕亮度呀，這些地方都用到了滑動條。這裡來看看它的thumbtooltipvalueconverter屬性吧。為了将值綁定到slider上，我們需要有一個類，這個類需要一個為資料綁定提供值轉換的接口。可視化元素也就是slider為綁定目标，其有2個方向：資料源->資料->綁定目标，綁定目标->資料->資料源。
我們需要寫一個類，可以直接在mainpage.xaml.cs下寫，但更好是單獨建立一個類，再考慮到這個是通用應用，是以将類建立到shared下比較合适。
然後添加以下代碼作為本地執行個體化的資源即可。
最後就是傳說中的本體啦。
我們還可以添加一個button和textblock，讓點選來在textblock上顯示slider的value。
在前面學習控件的時候，我們已經見過了messagedialog了，關于button還有一個浮出控件flyout哦。具體是怎樣用呢？接下來就一起看看。
我們還是延續前面的那個示例好了，那麼，代碼來了。
當我們點選了撤銷按鈕後，當然需要btnwhat按鈕的flyout消失掉，這個嘛，也隻要1行代碼啦。另外這個踩雷的邏輯這裡就不展開啦.
更為重要的是在于這些在wp8上也是通用的，這才是核心所在。既然這一篇教程主要是浮出控件，如果可以借助浮出産生預覽圖像的效果會不會很棒呢？先來看張運作截圖吧。
以下都是代碼啦，什麼binding呀之類的都不用管啦。需要注意的地方也就是那些height和width可能需要拿來調整一下。
同樣的，在wp上也是可以得哦，一下是做了些修改後的xaml代碼啦。正如大家所見，我把圖檔都縮小了，placement也設定成了top，stactpanel的屬性也做了修改。
看樣子效果還不錯嘛。
在前面我們走馬觀花地介紹了一大堆控件，其中自然也包括這datepicker和timepicker，那麼稍微進階些的用法呢？
如果你想做一個關于健身、鬧鐘等的app，那麼不可避免的會用到時間這些控件了。
那麼我們可能需要所標明的時間是未來時間，也就是比應用運作時的時間要大。擷取目前選中的時間給程式的其他部分使用也是很簡單的，我這裡的year等都在之前定義過了哦，在函數内定義可是不明智的喲。
有意思的事情又來了，如果你是想要做一個時間囊，預設的時間就是10年之後，那麼datepicker的初始事件如果正好就是10年後不是非常好嗎。那麼我們要做的呢，首先就是給datepicker的loaded寫一條事件啦。（雖然我覺得app是儲存不了10年的）
如果不想興師動衆去用datepicker的loaded，那麼也可以直接在背景代碼中這樣寫。
我還做了一個小測試呢，在loaded事件中讓時間增加11年，在onnavigatedto事件中讓時間增加10年，結果——結果是增加了11年啦，看來還是自家的loaded更厲害。
接下來就是timepicker啦，回到健身的話題，假設哈，6點到18點才适合運動，那麼我們的microsoft band就做了以下這麼個要求（開玩笑啦）。
也許你還想控制手環上時間選擇器的初始時間，那麼代碼來了。
作為強迫症患者呢，每次我設定鬧鐘的時候都要設定在一個比較好的時間，比如被5整除啦、質數啦。這裡可以用minuteincrement屬性來控制分鐘的增量喲，比如增量為5呀。從國小起就飛得把電子手表的時間給設定成24小時制的，這個也是可以實作的，clockidentifier設定成24hourclock就搞定啦。
基本的用法我們在教程前面的“頁面布局與基本導航”中已經講過了，這裡繼續補充關于應用欄的更多用法。
在之前的學習中，我們知道icon屬性中有很多很多系統預定義，但也許這些還是不夠的，現在就來增加幾種用法。
字元集應用
關于更多字元集的應用請通路維基百科。
pathicon
我們也可以用路徑來繪制一個屬于自己的圖形哦，下面的圖形大概就是9點鐘的樣子啦。
如何适應不同的分辨率這也是值得我們去解決的問題，畢竟不論是從8英寸的平闆還是25英寸的桌上型電腦，甚至還有4英寸至7英寸的手機，在應用欄按鈕太多而螢幕不夠大時，多餘的按鈕該怎麼辦呢？
預設情況下，應用欄圖示的寬度都是确定好的100像素哦。那麼我們先來看兩張圖檔好了，由于windows 10是可以直接調整modern應用的大小的（而不是windows 8那種隻能全屏顯示），是以我直接拉伸modern大小以模拟分辨率的機率啦。
這裡為了調試更加友善，是以使用了issticky屬性。appbarbutton還有一個很重要的屬性喲，之前用不到，不過這裡就是核心成員了呢，它就是iscompact。這個屬性可以讓應用欄按鈕隻顯示圖示而不顯示文字，也就是label啦。那麼我們的工作就要圍繞這個屬性來展開了。
我們可以這樣假設，有一個函數，它有一個布爾變量的參數，參數為真的話呢，那麼所有的這些appbarbutton的iscompact屬性也為真。在以下這段代碼中，我們先将bottomappbar的自對象選取為root，這樣一來的話呢，如果應用中還有頂部的應用欄，就不會互相幹擾啦。然後逐漸取出root和panel中的自對象就好咯。
接下來還需要判斷到底需不需要啟用iscompact，那這又是由什麼決定的呢，既然前面提到是因為螢幕的分辨率，也就是所應用所占用的寬度會導緻應用欄發生重疊，那麼答案就毫無疑問了。看到下面的代碼相信大家都明白了，至于為何是寬度的界限在1000呢，那是因為有10個appbarbutton，前面也說了它們的寬度是100。（不帶label的話呢，就隻需要60像素啦。）
來張圖檔以示搞定這個問題了吧。
但是像我這麼鑽牛角尖的人，10個appbarbutton用這種方式搞定了，那20個呢？我們就來示範一下，把之前xaml中的appbarbutton複制粘貼一番。如果是2k、4k的螢幕應對20個沒問題啊，但我這1920x1080的螢幕就放不下了。
那麼這又有什麼辦法可以解決的嗎？當然有啦，将這20個圖示切成2列就好啦。我們首先在grid中添加一行。
再通過下面這張方式來調整它處于哪一行，以及在水準方向的右側還是左側。這裡我将兩行都設定在右側啦。
當然了，這樣一來就可以放40個appbarbutton啦，如果縮小應用的大小的話為了容納更多還可以用iscompact屬性呢。不過沒有哪個應用做成這樣吧。
另外呢，如果把應用欄設計成這樣的話。
那麼對于windows 10，在拉伸的過程中，中間部分的控件就會慢慢消失啦。以下這張圖檔呢，是我在拉伸到中間有2個控件剛好重疊的時候啦。至于把appbarbutton設計成這樣是好是壞大家自己決定咯，我反正覺得這樣不好呢。不過有意思的是，即便如此，它們彼此的click事件還都是有效的噢，會區分左右兩部分，而不會疊在一起。
當然啦，這個的應用遠不是應用欄這麼簡單喲，對于其他的前景，比如有兩個textblock在螢幕左右兩側，當應用把收縮變小之後也可以讓這個textblock疊成2層在螢幕的一邊。
我們都見過有菜單的應用欄按鈕對吧，這個的實作其實也挺簡單的。用flyout屬性就好了。
tag屬性，就相當于做一個标簽。下面這段代碼就讓flyout菜單發揮作用了。
下面是一個簡單的示例，你可以在pivotitem标簽下添加直接的内容。它的優點在于是左右滑動的，比點選一個标題欄更加方面快捷，我也認為也是wp8/8.1時代的一個特色，而win10時代微軟重操漢堡菜單，滑動漸漸變成了安卓是的點按。
下面兩張截圖分别對應的是手機和iot裝置的喔。