Windows App開發之應用布局與基本導航

簡單示例看頁面布局和導航

首先按照上一篇博客中的順序來新建一個項目。新建好之后就點開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。

private void btnGoSecondPage_Click(object sender, RoutedEventArgs e)
{    
  if (this.Frame != null)
  {
     this.Frame.Navigate(typeof(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事件。

private void btnSetAppBar_Click(object sender, RoutedEventArgs e)
{
   if (this.TopAppBar != null)
   {
       this.TopAppBar.IsSticky = true;
   }
}

private void btnSetAppBar2_Click(object sender, RoutedEventArgs e)
{
    if (BottomAppBar.IsOpen ==false)
    {
       this.BottomAppBar.IsOpen = true;
    }
}

既然是通用應用了，那么WP這邊自然也是類似的，不過暫時還只有BottomAppBar卻沒有TopAppBar呢，以下是系統給生成的代碼，和Windows上的一樣。

想要了解更多關于應用欄的內容，大家可以參考下一篇中的應用欄。

常用屬性

Background：背景色
BorderBrush：邊框色
BorderThickness：邊框大小

ClickMode：點擊模式，具體有3種：懸停（Hover）、按壓（Press）、釋放（Release）

Content：內容
FontFamily：字體
FontSize：字體大小
Foreground：字體顏色
FontStretch：字體在屏幕上的展開程度