WPF在同一个窗口中跳转界面，Frame+Page实现

引言

用Frame+Page实现的目的是为了固定当前的窗口，在这个窗口中进行页面的切换。

切换方式使用NavigationService，目的是方便返回之前的界面，不需重新加载，保留上个界面的操作。

---

使用方式总结

在窗口的前台中加入<Frame/>控件，至少建立一个初始Page，如这里的PageSelect这样一个页。

PageSelect ps = new PageSelect();//实例化PageSelect，初始选择页ps
FrameWork.Content=new Frame(){ Content=ps };//mainwindow中建立frame，用来承载所有的page，用PageSelect作为初始页面

用上面两行代码给窗口上的frame初始化一个page，之后所有页面的展示都基于page。

page之间的切换使用NavigationService中的方法，如下面三行代码：

using System.Windows.Navigation;
NavigationService.GetNavigationService(this).Navigate(new PageAlice());//切换到Alice的页面
NavigationService.GetNavigationService(this).GoBack();//返回上一个界面，保持之前的操作

第一行表示的包中包含了NavigationService，如果没有必须在前面加上。

第二行是切换到确定的page，这里一PageAlice这个页来表示。

第三行是切换回之前的页面，往回切换可以保留之前的操作。如果往回切换的过程中不想保留之前的操作，则可以利用第二行的方法跳转到（通过new建立的新的）上一步页面。

如果具体上面没有看懂，可以参考下面的“代码”节，包含了新建项目生成的文件之外其他所有手动建立和编辑的文件。

---

代码

MainWindow.xaml

<Window x:Class="csdntemp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Frame x:Name="FrameWork" Height="325" Width="500" NavigationUIVisibility="Hidden">
        <!--这里的属性NavigationUIVisibility是用于设置是否隐藏上面的导航栏，如果没有这个，
        用导航方法跳转到另一个界面之后上面会出现导航条，类似于IE浏览器的前进和后退样式-->
    </Frame>
</Window>

 

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace csdntemp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            PageSelect ps = new PageSelect();//实例化PageSelect，初始选择页ps
            FrameWork.Content=new Frame(){ Content=ps };//mainwindow中建立frame，用来承载所有的page，用PageSelect作为初始页面
        }
    }
}

 

PageSelect.xaml

<Page x:Class="csdntemp.PageSelect"
      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" 
      mc:Ignorable="d" 
      d:DesignHeight="325" d:DesignWidth="500"
	Title="PageSelect">

    <StackPanel>
        <TextBlock Margin="10,50" Text="Choose a person"/>
        <StackPanel Orientation="Horizontal">
            <Label Margin="30,30,10,30"  Content="person" HorizontalAlignment="Left"/>
            <ComboBox x:Name="cbComboBox" Width="70" Margin="0,30" SelectedIndex="0">
                <ComboBoxItem Content="Alice"/>
                <ComboBoxItem Content="Bob"/>
            </ComboBox>
        </StackPanel>
        <Button x:Name="btnSelectWell" Width="100" Content="Next" Margin="30" Click="btnSelectWell_Click"/>
    </StackPanel>

</Page>

 

PageSelect.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace csdntemp
{
    public partial class PageSelect : Page
    {
        public PageSelect()
        {
            InitializeComponent();
        }

        private void btnSelectWell_Click(object sender, RoutedEventArgs e)
        {
            switch(cbComboBox.SelectedIndex)//判断选择的是谁
            {
                case 0:
                    NavigationService.GetNavigationService(this).Navigate(new PageAlice());//切换到Alice的页面
                    break;
                case 1:
                    NavigationService.GetNavigationService(this).Navigate(new PageBob());//切换到Bob的页面
                    break;
            }
        }
    }
}

 

PageAlice.xaml

<Page x:Class="csdntemp.PageAlice"
      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" 
      mc:Ignorable="d" 
      d:DesignHeight="325" d:DesignWidth="500"
	Title="PageAlice">

    <StackPanel>
        <TextBlock Text="Alice, female, 22, studying at Peking University." Margin="50,100"/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button x:Name="btnBack" Content="Back" Width="100" Margin="10"  Click="btnBack_Click"/>
        </StackPanel>
    </StackPanel>
    
</Page>

 

PageAlice.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace csdntemp
{
    public partial class PageAlice : Page
    {
        public PageAlice()
        {
            InitializeComponent();
        }

        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.GetNavigationService(this).GoBack();//返回上一个界面，保持之前的操作
        }
    }
}

 

PageBob.xaml

<Page x:Class="csdntemp.PageBob"
      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" 
      mc:Ignorable="d" 
      d:DesignHeight="325" d:DesignWidth="500"
	Title="PageBob">

    <StackPanel>
        <TextBlock Text="Bob, male, 44, working at Tsinghua University." Margin="50,100"/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button x:Name="btnBack" Content="Back" Width="100" Margin="10"  Click="btnBack_Click"/>
        </StackPanel>
    </StackPanel>
    
</Page>

 

PageBob.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace csdntemp
{
    public partial class PageBob : Page
    {
        public PageBob()
        {
            InitializeComponent();
        }

        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.GetNavigationService(this).GoBack();//返回上一个界面，保持之前的操作
        }
    }
}

---

环境：Visual Studio 2013 Community

整个project的所有文件我已打包上传，用到的代码内容与这里完全一样。详见https://download.csdn.net/download/weixin_42775777/12603161