【萬里征程——Windows App開發】頁面佈局和基本導航

上一篇部落格中大概的新建了一個應用，幾乎是空白的。如果是初學者的話現在當然想往裡面加點東西對不對。那麼這篇部落格就來看看頁面的佈局都是怎樣的。

首先安裝上一篇部落格中的順序來新建一個專案。新建好之後就點開MainPage.xaml開始敲程式碼啦。^_^

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="6*"/>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal">
            <TextBlock Text="頁面佈局" Foreground="Red" FontSize="40" Margin="12" 
                     Width="200" Height="80" />
            <TextBlock Text="基本導航" Foreground="Green" FontSize="40" Margin="12" 
                       Width="200" Height="80"  />
        </StackPanel>

        <Grid Grid.Row="1" Grid.Column="0">
            <Button Content="導航到第二頁" Foreground="Blue" FontSize="35"
                   Margin="12,480,0,0" Name="btnGoSecondPage" Click="btnGoSecondPage_Click"/>
        </Grid>

        <Canvas Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
             <Rectangle Fill="Blue"/>
             <Rectangle Fill="Yellow" Height="100" Width="100" Canvas.Left="50" Canvas.Top="20"/>
             <Rectangle Fill="White" Height="100" Width="100" Canvas.Left="70" Canvas.Top="90"/>
        </Canvas>

    </Grid>

下面就來依次介紹上面這段程式碼到底做了寫什麼啦：
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啦。

   <TextBlock Text="Second Page" FontSize=" 50"/>

我再來簡單介紹一下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的示例：

<Page.TopAppBar>
  <AppBar IsSticky="True">
     <Grid>
       <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <StackPanel Orientation="Horizontal">
          <Button Content="Main Page" Width="140" Height="80" Click="AppBarButton1_Click"/>
          <Button Content="Second Page" Width="140" Height="80" Click="AppBarButton2_Click"/>
          <Button Content="Third Page" Width="140" Height="80" Click="AppBarButton3_Click"/>
          <TextBlock Text="AppBar" Foreground="Red" FontSize="40" VerticalAlignment="Center" Margin="12" Width="200"/>
       </StackPanel>                   
       <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
    </Grid>
  </AppBar>
</Page.TopAppBar>

<Page.BottomAppBar>
    <CommandBar>
       <AppBarButton Label="Refresh" Icon="Refresh"  
           Click="appBarBtn4_Click"/>
       <AppBarButton Label="Redo" Icon="Redo"
           Click="appBarBtn5_Click"/>        
       <CommandBar.SecondaryCommands>
          <AppBarButton Label="Add" Icon="Add" Click="AppBarButton6_Click"/>
          <AppBarButton Label="Delete" Icon="Delete" Click="AppBarButton7_Click"/>
          <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton8_Click"/>
       </CommandBar.SecondaryCommands>                                     
   </CommandBar>
</Page.BottomAppBar>

但是大家應該都發現了，預設情況下應用欄是隱藏起來的，如果想要在載入的時候就是啟動的，那該怎麼辦呢？很簡單，直接在AppBar定義IsOpen屬性為真就好啦。

<CommandBar IsOpen="True">
    <!-- -->
</CommandBar>

另外還有粘滯屬性喲。也就是說，原本當用右鍵撥出應用欄後，再用左鍵等點一下其他位置應用欄就會自己消失啦，但如果IsSticky屬性為真的話呢，非得再多按幾下右鍵才會消失的。

<AppBar IsSticky="True">
    <!-- -->
</AppBar>

除了在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上的一樣。

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.BottomAppBar>

想要了解更多關於應用欄的內容，大家可以看這裡喲：【萬里征程——Windows App開發】應用欄。

常用屬性

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

  <Button Background="Red" BorderBrush="Blue" BorderThickness="5" Height="66" Width="153"/>

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

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

歡迎大家的提問，我們下篇部落格再見咯。

---

---

感謝您的訪問，希望對您有所幫助。

歡迎大家關注或收藏、評論或點贊。

---

為使本文得到斧正和提問，轉載請註明出處：
http://blog.csdn.net/nomasp

---