首先按照上一篇博客中的顺序来新建一个项目。新建好之后就点开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本身便不具备任何主动导航功能了。