UWP 開發初階 Chapter 5 - 實現頁面導航，和頁面內部分割槽域導航

weixin_34185364發表於2018-07-25
APT

上篇回顧

上篇我們瞭解瞭如何實現自適應佈局。通過建立 VisualState 來實現。我們使用了其中的 AdaptiveTrigger 來激發相應的事件，而再通過 Setters 中去設定每個控制元件在觸發事件後的新的屬性。其實在 VisualState 中我們還可以通過 StoryBoard 來建立動畫效果，這個今天就不做介紹了，日後會提到。

本篇正文

如何實現基本的頁面導航

回顧一下：

.xaml 檔案在 UWP 專案中其實就是一個頁面檔案，比如初次建立 UWP 專案的時候 vs 幫我們自動在根目錄裡面建立的 MainPage.xaml 檔案。我們直接在這個檔案裡修改 XAML 的時候，就能看到變化，那是因為我們開啟軟體的時候，系統自動先導航到了 MainPage 這個頁面。（初始化導航，定義在 App.xaml.cs 檔案中，暫時不需要了解）

  • 實現目標：從一個頁面導航到另一個頁面

  • 思路：新建一個 .xaml 檔案，然後在 MainPage 中新增一個按鈕，點選按鈕後，轉到新建的頁面中

  • 效果如下：

    好了，接下來就是來操作了

    1. 我們先雙擊開啟 MainPage.xaml ，然後在這個頁面裡面新建一個 TextBlock 用於讓我們瞭解我們在哪個頁面，程式碼如下：

      <TextBlock Text="This is page 1" Foreground="Blue" FontSize="30"/>
複製程式碼

      其中屬性根據自己喜好設定，我們只是為了便於區分是哪個頁面。

    2. 然後我們再新建一個 Button ，程式碼如下：

      <Button Content="Click to navigate to page 2" FontSize="30"/>
複製程式碼

      這時候我們只是建立了一個 Button ，但是我們想要的效果是，按下這個 Button 後軟體處理相應的邏輯，這裡也就是導航。那這時候，我們需要建立一個事件，在 Button 內新增一個 Click 的事件，截圖如下：

      上面截圖所示，這時候 vs 提示我麼新建一個 Event Handler，因為我們之前沒有定義，所以這時候，直接按回車，vs 會自動幫我們生成。程式碼如下：

      <Button Content="Click to navigate to page 2" FontSize="30" Click="Button_Click"/>
複製程式碼

      按完回車後，vs 自動幫我們在對應的 .xaml.cs 檔案中建立了一個點選事件。比如這時候就在 MainPage.xaml.cs 中建立了一個空的事件，如下面截圖中紅方框內所示就是新建的空事件：

      **解釋：**這個所謂的空事件，你暫時簡單瞭解為，一旦我點按了相應的按鈕，那麼軟體就會執行這個事件裡面的程式碼。

    3. 接下來，我們在 MainPage.xaml 和 MainPage.xaml.cs 兩個檔案中的設定暫告一個段落。我們現在需要新建一個頁面。

      • 先右擊你想新建檔案的目錄（如果想在根目錄新建，那就右擊專案名字那一欄），如下圖所示，點選 Add -> New Item 或者直接 Control + Shift + A

      • 然後跳出對話方塊後，如下圖所示，選擇 Blank Page ，下面名字根據自己喜好，這裡為了方便，命名為 Page2，然後點 Add

      • 新建完成後，我們雙擊開啟 Page2.xaml ，進行編輯

    4. 在新的頁面中也建立一個 TextBlock 去區分頁面，和一個 Button ，因為我們還要從 Page2 返回到 MainPage 呢！最終程式碼如下：

      • XAML：

        <StackPanel>
   <TextBlock Text="This is Page 2" Foreground="Brown" FontSize="30"/>
   <Button Content="Click to navi to page 1" FontSize="30" Click="Button_Click"/>
</StackPanel>
複製程式碼

      • Csharp:

        private void Button_Click(object sender, RoutedEventArgs e)
{

}
複製程式碼

    5. 然後我們要處理導航了！我們先回到 MainPage.xaml.cs 中，在剛剛新建的空事件中寫入下面這行程式碼：

      this.Frame.Navigate(typeof(Page2));
複製程式碼

      完整程式碼如下：

      private void Button_Click(object sender, RoutedEventArgs e)
{
     this.Frame.Navigate(typeof(Page2));
}
複製程式碼

      **解釋：**這行程式碼就表示將當前頁面導航到 Page2，typeof 後面括號裡面就填你要導航到的頁面的名字。

    6. 同樣，我們在 Page2.xaml.cs 檔案中，在剛剛新建的空事件中寫入下面程式碼：

      this.Frame.Navigate(typeof(MainPage));
複製程式碼

      這就意味著，導航到 MainPage。

    7. 最後！編譯！你就得到了我們想要的結果啦！

如何實現頁面內區域性導航

  • 什麼是頁面內區域性導航？

    比如我想讓 MainPage 左半部分放一些控制元件，而右半部分在按下某個按鈕後，導航到 Page2。這個就是區域性導航了，區域性導航的應用也非常廣泛，比如出了名的漢堡導航，漢堡按鈕那一側是不會變的，而主頁面區域進行導航。

  • 效果如下圖：

    接下來我們就來操作

    • 首先我們現在 MainPage 中建立兩列，將我們的控制元件放在第一列，完整程式碼如下：

      <Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>

   <StackPanel>
       <TextBlock Text="This is page 1" Foreground="Blue" FontSize="30"/>
       <Button Content="Click to navigate to page 2" FontSize="30" Click="Button_Click"/>
   </StackPanel>
</Grid>
複製程式碼

    • 然後我們建了一個新的東西，叫做 Frame ，並把它放在第二列，具體程式碼如下：

      <Frame Name="myFrame" Grid.Column="1">
            
</Frame>
複製程式碼

      **解釋：**記得給它起一個名字，因為這樣我們才可以在後面的 c# 檔案中使用這個控制元件，更多關於 Name 這個屬性和在 c# 檔案中呼叫 xaml 中控制元件的知識，將在後面講。

    • 然後我們開啟 MainPage.xaml.cs 這個檔案，找到按鈕點選事件的程式碼，並將之前的那一行全域性導航的程式碼改為以下程式碼：

      myFrame.Navigate(typeof(Page2));
複製程式碼

      **解釋：**其中 myFrame 就是我們之前在 XAML 中給 Frame 這個控制元件的名字，剩下的和之前的程式碼其實都一樣。而全域性導航的時候，為什麼我們寫的是 this.Frame.Navigate 的？因為每個頁面本身外面就包了一個用於導航的 Frame ，而有一定程式設計基礎的朋友應該知道 this 的涵義，如果你不知道，那你就粗略的理解為 this.Frame 就指代了頁面本身外面包裹的 Frame ，類同於 myFrame 。

    • 最後，我們編譯！！！當然就是你想要的效果！

相關文章