首先按照上一篇部落格中的順序來建立一個項目。建立好之後就點開mainpage.xaml開始敲代碼了。
下面就來依次介紹上面這段代碼到底做了寫什麼。
1）首先将最外圍的grid控件分成了3行2列。其中第一行的高度是100像素；第二行的高度是自動的，所謂自動呢，就是會根據将來在其中添加的控件的所占的高度來決定的；第三行的高度就是剩餘的啦，這麼說可能不夠清楚到底星号是什麼意思。那再看看切成的這兩列就好啦，它的寬度比就是4：6。很顯然不一定是非得比例加起來等于10，即便是4：100也可以的。
2）在最外層的grid内嵌套了一個stackpanel，并且将其定位在第一行，而且橫跨2列。grid最擅長的就是操作具體的像素，它可以将任何控件精确的定位到任何一點。而stackpanel最重要的orientation屬性則可以安排其内的控件的排列方式，比如這裡就是讓兩個textblock控件按水準方向來排列。
3）在這裡又嵌套了grid，裡面有一個button，foreground屬性是定義字型顔色，fontsize屬性是定義字型大小。下面重點來看看margin屬性。我們定義的marin=”12,480,0,0”，從左至右依次是左、上、右和下四個方向距離外圍邊框的距離。
在設計器中已經标注了左邊距是12，而上邊距沒有展現出來，但确實是480。還記得之前的那個auto麼，在這裡就展現出來了啦，因為下邊距是0，是以grid的分割線就剛好在button下面啦。但為什麼右邊的分割線不剛好在button的右邊呢，這是因為我們之前的2列是按照4：6的比例來切的呀，而不是設定的auto。
4）canvas位于其外圍的grid控件的正中央，horizontalaligment和verticalalignment分别表示水準方向和垂直方向的擺放位置。canvas.top和canvas.left分别表示離canvas最上邊和最下邊的距離。
5）給button設定一個名字，然後敲下click=”“之後，就會出現如下圖所示，這是直接按下enter鍵就可以直接命名咯。小技巧啦。
然後輕按兩下click事件的名字後，直接按f12鍵就會自動生成一個事件并且跳轉到c#檔案啦。下面這段代碼就是會讓頁面從mainpage跳轉到secondpage。
寫完這段代碼也先别急着調試，因為還沒有建立secondpage呢。建議建立好之後最好再往裡面加點東西，不然跳轉過去了就是黑茫茫的一片還以為是出bug了呢，添加一個基本的textblock就可以了。
我再來簡單介紹一下vs中常用的一些東西，僅僅面向初學者。在下面的圖中，方框1處可以讓設計器和xaml代碼的位置對換哦，截圖裡我就是将設計器放到了右邊，不過隻是為了截圖，設計器還是在左邊比較習慣。
方框2處可以讓設計器和xaml代碼上下擺列和左右擺列也可以不顯示它們中的某一個。旁邊還可以設定網格對齊以及設計器的縮放比例。
方框3和方框4中可以設定的東西就太多啦，可以設定漸變色，也可以設定click事件，還可以設定控件的布局等。
windows上的modern應用我倒是不常用，不過wp8上的應用我覺得和安卓什麼的最大的差別就是它的應用欄了，下面就來講講應用欄是怎麼做出來的。
在document outline（在視圖中找到，或者按ctrl+w，u）中有topappbar和bottomappbar，分别是頂部和底部的應用欄。點滑鼠右鍵可以快速定義appbar和commandbar，通常将appbar放在應用上端也就是topappbar内，commandbar放在下端也就是bottomappbar内。
或許很多人都不知道，在modern應用下，按win+z鍵可以直接呼出應用欄喲。另外要注意appbar與commandbar不同，前者隻能包含一條子内容，通常定義一個grid控件，然後在grid内嵌套其他控件。下面貼出一段appbar的示例：
但是大家應該都發現了，預設情況下應用欄是隐藏起來的，如果想要在加載的時候就是啟動的，那該怎麼辦呢？很簡單，直接在appbar定義isopen屬性為真就好。
另外還有粘滞屬性喲。也就是說，原本當用右鍵呼出應用欄後，再用左鍵等點一下其他位置應用欄就會自己消失啦，但如果issticky屬性為真的話呢，非得再多按幾下右鍵才會消失的。
除了在xaml中定義這些屬性外，我們也可以在背景代碼中用函數來實作呢，這裡我就是用的2個button的click事件。
既然是通用應用了，那麼wp這邊自然也是類似的，不過暫時還隻有bottomappbar卻沒有topappbar呢，以下是系統給生成的代碼，和windows上的一樣。
想要了解更多關于應用欄的内容，大家可以參考下一篇中的應用欄。
background：背景色
borderbrush：邊框色
borderthickness：邊框大小
clickmode：點選模式，具體有3種：懸停（hover）、按壓（press）、釋放（release）
content：内容
fontfamily：字型
fontsize：字型大小
foreground：字型顔色
fontstretch：字型在螢幕上的展開程度
frame、page架構
frame是能夠定位到并顯示内容的内容控件。frame可以在其他内容中承載，與其他控件群組件。
當frame控件導航到 html内容時，内部frame控件執行個體化本機 webbrowseractivex控件。wpf通過對函數控件啟用安全功能在浏覽器 activex控件。應用于的功能控制對 xbap和獨立應用程式不同。某些應用程式應通過附加功能控制防止惡意内容運作。有關更多資訊，請參見中的 “浏覽器控件和功能控制”在安全性（wpf）的和webbrowsercontrol overviews and tutorials部分。
内容可以導航到通過設定與uri的source屬性所需内容的。另外，可以使用navigate方法的一下重載之一，内容可以導航到：navigate(uri),navigate(uri,object)
如果内容導航到由uri時，frame傳回包含内容的對象。或者，内容可以導航到使用接受一個對象的navigate方法重載：navigate(object),navigate(object,object)
導航的生存期可以通過以下活動來跟蹤：navigating,navigated,navigationprogress,navigationfailed,navigationstopped,loadcompleted,framentnavigation
不是導航發生的所有事件都引發；引發事件集的方式取決于發生的類型的導航（内容或内容片段），這個導航完成（取消，停止或失敗）。
wpf、wp8 silverlight 中的導航實作
1、在wpf中的導航：
window到window:
window window1=new window();
window1.show();
window到page:
navigation windowwindow1=new navigationwindow();
window1.source=newuri(“page1.xaml“，urikind.relative);
page到page:
navigationservice.getnavigationservice(this).navigate(newuri(“page2.xaml”,urikind.relative));
2、在silverlight（包括wp8開發的時候選擇銀光架構時）中的導航：
(sliver 的意思是切開，切片) (silver才是銀色)
this.navigationservice.navigate(newuri(“/page1.xaml”,urikind.relative);
淺談wpf、silverlight和winrt
在wpf(wpf4)中，導航主要是navigationservice類型，frame，page和navigationwindow類型都有navigationservice屬性，同時frame類型還有一些方法比如navigate就是直接調用其背後的navigationservice的相應方法。
frame繼承自contentcontrol,page繼承自frameworkelement。
navigate方法可以傳入uri和object參數，同時支援第二個object代表額外資料。然後再frame.navigated事件中，通過navigationeventargs的extradata屬性來擷取額外的資料。但是wpf中的導航資料傳遞對于開發者來說很頭疼。
在winrt中，沒有了navigationservice。navigationcachemode等在silverlight中都有的。同時page還引入了一些新的元素，比如winrt中特有的appbar。最後winrt中的page同時引用frame對象，這個可以說是navigationservice的代替吧，因為如果page連frame都不引用，那麼page本身便不具備任何主動導航功能了。