wpf中左侧导航的实现

wpf中要实现导航可以用Frame的Navigate函数实现，Navigate直译就是导航的意思。Navigate的参数是Uri类，指向page类的uri地址。下面我将用一个小例子来说明用法。

首先，先新建一个wpf项目，然后再MainWindow中添加两个button和一个Frame，其中的布局代码如下所示：

<Window x:Class="Navigatetest.MainWindow"
        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"
        xmlns:local="clr-namespace:Navigatetest"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="520">
    <DockPanel Width="auto" Height="auto">
        <Grid>
            <GroupBox>
                <Grid Width="120">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0" Margin="20" Height="40" Click="page1Button">页面一</Button>
                    <Button Grid.Row="1" Margin="20" Height="40" Click="page2Button">页面二</Button>
                </Grid>
            </GroupBox>
        </Grid>
        <Grid>
            <GroupBox>
                <Frame Name="mainFrame" NavigationUIVisibility="Hidden"></Frame>
            </GroupBox>
        </Grid>
    </DockPanel>
</Window>

然后我们新建一个文件夹pages，并在里面新建两个Page，来展示导航的效果。其中文件结构，Page1代码和

Page2的代码截图如下所示：

Page1.xaml:

<Page x:Class="Navigatetest.pages.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Navigatetest.pages"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="400"
      Title="页面一">

    <Grid>
        <Label>这是页面一</Label>
    </Grid>
</Page>

Page2.xaml:

<Page x:Class="Navigatetest.pages.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Navigatetest.pages"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="400"
      Title="页面二">

    <Grid>
        <Label>这是页面二</Label>
    </Grid>
</Page>

然后在Mainwindow中添加两个button响应函数，在每个函数中让Frame调用相应的Uri来实现页面的导航，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Navigatetest
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        private Dictionary<string, Uri> allViews = new Dictionary<string, Uri>(); //包含所有页面
        public MainWindow()
        {
            InitializeComponent();

            //添加页面的Uri地址，采用相对路径，根路径是项目名,实现allViews的初始化
            allViews.Add("page1",new Uri("pages/Page1.xaml",UriKind.Relative));
            allViews.Add("page2",new Uri("pages/Page2.xaml",UriKind.Relative));
        }

        /*
        *页面一按钮的响应事件函数，实现导航到page1
        */
        public void page1Button(object sender, RoutedEventArgs e)
        {
            mainFrame.Navigate(allViews["page1"]);                    //Frame类的导航函数，参数时页面的Uri
        }

        /*
        *页面二按钮的响应事件函数，实现导航到page2
        */
        public void page2Button(object sender,RoutedEventArgs e)
        {
            mainFrame.Navigate(allViews["page2"]);                    //Frame导航函数，导航到page2
        }
    }
}

效果截图如下：

初始时：

点击按钮页面一后：

点击按钮页面二后：