頁(yè)面布局與基本導(dǎo)航

頁(yè)面布局與基本導(dǎo)航

簡(jiǎn)單示例看頁(yè)面布局和導(dǎo)航

首先按照上一篇博客中的順序來(lái)新建一個(gè)項(xiàng)目。新建好之后就點(diǎn)開(kāi) MainPage.xaml 開(kāi)始敲代碼了。

<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="頁(yè)面布局" Foreground="Red" FontSize="40" Margin="12" 
                     Width="200" Height="80" />
            <TextBlock Text="基本導(dǎo)航" Foreground="Green" FontSize="40" Margin="12" 
                       Width="200" Height="80"  />
        </StackPanel>
        <Grid Grid.Row="1" Grid.Column="0">
            <Button Content="導(dǎo)航到第二頁(yè)" 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>

下面就來(lái)依次介紹上面這段代碼到底做了寫(xiě)什么。

1）首先將最外圍的 Grid 控件分成了3行2列。其中第一行的高度是 100 像素；第二行的高度是自動(dòng)的，所謂自動(dòng)呢，就是會(huì)根據(jù)將來(lái)在其中添加的控件的所占的高度來(lái)決定的；第三行的高度就是剩余的啦，這么說(shuō)可能不夠清楚到底星號(hào)是什么意思。那再看看切成的這兩列就好啦，它的寬度比就是 4：6。很顯然不一定是非得比例加起來(lái)等于10，即便是 4：100 也可以的。

2）在最外層的 Grid 內(nèi)嵌套了一個(gè) StackPanel，并且將其定位在第一行，而且橫跨 2 列。Grid 最擅長(zhǎng)的就是操作具體的像素，它可以將任何控件精確的定位到任何一點(diǎn)。而 StackPanel 最重要的 Orientation 屬性則可以安排其內(nèi)的控件的排列方式，比如這里就是讓兩個(gè) TextBlock 控件按水平方向來(lái)排列。

3）在這里又嵌套了 Grid，里面有一個(gè) Button，F(xiàn)oreground 屬性是定義字體顏色，F(xiàn)ontSize 屬性是定義字體大小。下面重點(diǎn)來(lái)看看 Margin 屬性。我們定義的 Marin="12,480,0,0"，從左至右依次是左、上、右和下四個(gè)方向距離外圍邊框的距離。

在設(shè)計(jì)器中已經(jīng)標(biāo)注了左邊距是 12，而上邊距沒(méi)有體現(xiàn)出來(lái)，但確實(shí)是 480。還記得之前的那個(gè) auto 么，在這里就體現(xiàn)出來(lái)了啦，因?yàn)橄逻吘嗍?0，所以 Grid 的分割線就剛好在 Button 下面啦。但為什么右邊的分割線不剛好在Button 的右邊呢，這是因?yàn)槲覀冎暗?2 列是按照 4：6 的比例來(lái)切的呀，而不是設(shè)置的 auto。

4）Canvas 位于其外圍的 Grid 控件的正中央，HorizontalAligment 和 VerticalAlignment 分別表示水平方向和垂直方向的擺放位置。Canvas.Top 和 Canvas.Left 分別表示離 Canvas 最上邊和最下邊的距離。

5）給Button設(shè)置一個(gè)名字，然后敲下 Click="" 之后，就會(huì)出現(xiàn)如下圖所示，這是直接按下 Enter 鍵就可以直接命名咯。小技巧啦。

然后雙擊 Click 事件的名字后，直接按 F12 鍵就會(huì)自動(dòng)生成一個(gè)事件并且跳轉(zhuǎn)到 C# 文件啦。下面這段代碼就是會(huì)讓頁(yè)面從 MainPage 跳轉(zhuǎn)到 SecondPage。

private void btnGoSecondPage_Click(object sender, RoutedEventArgs e)
{    
  if (this.Frame != null)
  {
     this.Frame.Navigate(typeof(SecondPage));
  }
}

寫(xiě)完這段代碼也先別急著調(diào)試，因?yàn)檫€沒(méi)有創(chuàng)建 SecondPage 呢。建議創(chuàng)建好之后最好再往里面加點(diǎn)東西，不然跳轉(zhuǎn)過(guò)去了就是黑茫茫的一片還以為是出 Bug 了呢，添加一個(gè)基本的 TextBlock 就可以了。

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

我再來(lái)簡(jiǎn)單介紹一下 VS 中常用的一些東西，僅僅面向初學(xué)者。在下面的圖中，方框 1 處可以讓設(shè)計(jì)器和 XAML 代碼的位置對(duì)換哦，截圖里我就是將設(shè)計(jì)器放到了右邊，不過(guò)只是為了截圖，設(shè)計(jì)器還是在左邊比較習(xí)慣。

方框 2 處可以讓設(shè)計(jì)器和 XAML 代碼上下擺列和左右擺列也可以不顯示它們中的某一個(gè)。旁邊還可以設(shè)置網(wǎng)格對(duì)齊以及設(shè)計(jì)器的縮放比例。

方框 3 和方框 4 中可以設(shè)置的東西就太多啦，可以設(shè)置漸變色，也可以設(shè)置 Click 事件，還可以設(shè)置控件的布局等。

應(yīng)用欄布局

Windows 上的 modern 應(yīng)用我倒是不常用，不過(guò) WP8 上的應(yīng)用我覺(jué)得和安卓什么的最大的區(qū)別就是它的應(yīng)用欄了，下面就來(lái)講講應(yīng)用欄是怎么做出來(lái)的。

在 Document Outline（在視圖中找到，或者按 Ctrl+W，U）中有 TopAppBar 和 BottomAppBar，分別是頂部和底部的應(yīng)用欄。點(diǎn)鼠標(biāo)右鍵可以快速定義 AppBar 和 CommandBar，通常將 AppBar 放在應(yīng)用上端也就是 TopAppBar 內(nèi)，CommandBar 放在下端也就是 BottomAppBar 內(nèi)。

或許很多人都不知道，在 Modern 應(yīng)用下，按 Win+Z 鍵可以直接呼出應(yīng)用欄喲。另外要注意 AppBar 與 CommandBar 不同，前者只能包含一條子內(nèi)容，通常定義一個(gè) Grid 控件，然后在 Grid 內(nèi)嵌套其他控件。下面貼出一段 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>

但是大家應(yīng)該都發(fā)現(xiàn)了，默認(rèn)情況下應(yīng)用欄是隱藏起來(lái)的，如果想要在加載的時(shí)候就是啟動(dòng)的，那該怎么辦呢？很簡(jiǎn)單，直接在 AppBar 定義 IsOpen 屬性為真就好。

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

另外還有粘滯屬性喲。也就是說(shuō)，原本當(dāng)用右鍵呼出應(yīng)用欄后，再用左鍵等點(diǎn)一下其他位置應(yīng)用欄就會(huì)自己消失啦，但如果 IsSticky 屬性為真的話呢，非得再多按幾下右鍵才會(huì)消失的。

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

除了在 XAML 中定義這些屬性外，我們也可以在后臺(tái)代碼中用函數(shù)來(lái)實(shí)現(xiàn)呢，這里我就是用的 2 個(gè) 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;
    }
}

既然是通用應(yīng)用了，那么 WP 這邊自然也是類(lèi)似的，不過(guò)暫時(shí)還只有 BottomAppBar 卻沒(méi)有 TopAppBar 呢，以下是系統(tǒng)給生成的代碼，和 Windows 上的一樣。

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

想要了解更多關(guān)于應(yīng)用欄的內(nèi)容，大家可以看這里喲：【萬(wàn)里征程——Windows App開(kāi)發(fā)】應(yīng)用欄。

常用屬性

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

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

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

• Content：內(nèi)容
• FontFamily：字體
• FontSize：字體大小
• Foreground：字體顏色
• FontStretch：字體在屏幕上的展開(kāi)程度