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

標籤：頁面配置   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;    }}

既然是跨平台 app了，那麼WP這邊自然也是類似的，不過暫時還只有BottomAppBar卻沒有TopAppBar呢，以下是系統給產生的程式碼，和Windows上的一樣。

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

想要瞭解更多關於應用程式列的內容，大家可以參考下一篇中的應用程式列。

常用屬性

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

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

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

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

著作權聲明：本文為 NoMasp柯於旺 原創文章，如需轉載請聯絡本人。分享智慧之光，保衛智慧財產權。

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