WinUi 3 NavigationView 側邊導航菜單 + 多頁面 示範

建立側邊導航菜單

在 MainWindow.xaml 加入以下內容，建立側邊導航菜單

    
<NavigationView x:Name="NavigationView">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Play" Content="第一頁" Tag="Page1" />
        <NavigationViewItem Icon="Save" Content="第二頁" Tag="Page2" />
    </NavigationView.MenuItems>
    <Frame x:Name="ContentFrame"/>
</NavigationView>
    

• Icon: 圖示
• Content: 顯示文字
• Tag: 標籤，識別按鈕用

建立頁面

在專案上使用滑鼠右鍵點擊 > 加入 > 新增項目，選擇 Blank Page ，這裡命名為 Page1

並使用 TextBlock 加入文字方便分辨頁面，內容如下：

    
<Page
    x:Class="WinUi3NavigationViewTest.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TextBlock Text="第一頁" />
    </Grid>
</Page>
    

再使用相同的方式做一次，建立 Page2 頁面

綁定按鈕跳轉頁面

    
NavigationView.SelectionChanged += (sender, args) =>
{
    var selectedItem = (NavigationViewItem)args.SelectedItem;
    var selectedItemTag = (string)selectedItem.Tag;
    switch (selectedItemTag)
    {
        case "Page1":
            ContentFrame.Navigate(typeof(Page1));
            break;
        case "Page2":
            ContentFrame.Navigate(typeof(Page2));
            break;
    }
};
    

設定頁面

在畫面左下角中自動產生「設定」，目前按鈕沒有功能，該如何讓按下「設定」按鈕後跳轉到設定畫面呢？

先依照上面的步驟建立一個 SettingsPage，這顆按鈕的 Tag 就是「Settings」，所以只要在我們按鈕點擊事件中增加就可以了：

    
NavigationView.SelectionChanged += (sender, args) =>
{
    var selectedItem = (NavigationViewItem)args.SelectedItem;
    var selectedItemTag = (string)selectedItem.Tag;
    switch (selectedItemTag)
    {
        case "Page1":
            ContentFrame.Navigate(typeof(Page1));
            break;
        case "Page2":
            ContentFrame.Navigate(typeof(Page2));
            break;
        case "Settings":
            ContentFrame.Navigate(typeof(SettingsPage));
            break;
    }
};
    

如果就是不要設定按鈕呢？只要設定 IsSettingsVisible="False" 即可:

    
<NavigationView x:Name="NavigationView"
                IsSettingsVisible="False">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Play" Content="第一頁" Tag="Page1" />
        <NavigationViewItem Icon="Save" Content="第二頁" Tag="Page2" />
    </NavigationView.MenuItems>
    <Frame x:Name="ContentFrame" />
</NavigationView>

    

上一步(返回)按鈕

目前上一步的按鈕是灰色的，要啟用也很簡單：IsBackEnabled="True"

如果不需要「上一步」按鈕也可以這樣隱藏：IsBackButtonVisible="Collapsed"

它按鈕事件和「設定」按鈕不一樣，按下後會觸發 BackRequested 事件：

    
NavigationView.BackRequested += (sender, args) =>
{
    Console.WriteLine("BackRequested");
};
    

側邊導航菜單位置

原本側邊導航菜單位置是在左側，也可以改為放在上方：

    
<NavigationView PaneDisplayMode="Top">
</NavigationView>
    

或是使用 C#:

    
NavigationView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
    

預設頁面和預設選取按鈕

我們目前一開始執行時並沒有選擇畫面，頁面是空的，可以直接設定選擇第一個頁面:

    
ContentFrame.Navigate(typeof(Page1));
    

讓第一個選項是選中的狀態

    
NavigationView.SelectedItem = NavigationView.MenuItems[0];
    

自訂項目標題

當側邊內容很多時，可以建立項目標題來區分:

    
<NavigationView x:Name="NavigationView"
                IsBackEnabled="True"
                IsBackButtonVisible="Collapsed">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Play" Content="第一頁" Tag="Page1" />
        <NavigationViewItem Icon="Save" Content="第二頁" Tag="Page2" />
      
        <NavigationViewItemHeader Content="標題"/>

        <NavigationViewItem Icon="Download" Content="第三頁" Tag="Page3" />
        <NavigationViewItem Icon="Favorite" Content="第四頁" Tag="Page4" />
        
    </NavigationView.MenuItems>
    <Frame x:Name="ContentFrame" />
</NavigationView>