WPF页面

WPF实现窗口内页面跳转

利用WPF中的Frame控件和Page类实现窗口内的页面跳转。下面我们基于上一篇介绍的菜单栏实现窗口内的页面跳转。

步骤

第一步，基于原有菜单栏的xaml代码，在MainWindow.xaml中添加Frame控件

<Window ...>
  <Grid>
    ...
    <Frame x:Name="mainframe" Grid.Row="1"
    NavigationUIVisibility="Hidden"></Frame>
  </Grid>
</Window>

第二步，新建页面PageIndex，PageLight，PageCamera，PagePlc，PageMes，PageHelp。

第三步，修改MainWindow.xaxml.cs中的菜单栏响应函数

在菜单栏的响应函数中，将page的内容传给Frame。如下，在首页和帮助的响应函数中实例化了页面类赋值给mainframe的内容。

MainWindow.xaxml.cs文件：

...
namespace wpfbase
{
  public partial class MainWindow : Window
  {
    PageIndex pageindex;
    PageHelp pagehelp;
    ...
    private void IndexClick(object sender, RoutedEventArgs e) {
      if(pageindex == null)
        pageindex = new PageIndex();
      mainframe.Content = pageindex;
    }
    ...
    private void HelpClick(object sender, RoutedEventArgs e) {
      if(pagehelp == null)
        pagehelp = new PageHelp();
      mainframe.Content = pagehelp;
    }
  }
}

第四步，为PageIndex，PageLightSet，PageCameraSet，PagePlcSet，PageMesSet，PageHelp等页面添加页面内容

PageIndex.xaml：

<Page x:Class="wpfbase.PageIndex"
      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:wpfbase"
      mc:Ignorable="d" 
      d:DesignHeight="325" d:DesignWidth="525"
      Title="PageIndex">

    <Grid>
        <TextBox>这里是首页！</TextBox>
    </Grid>
</Page>

PageHelp.xaml：

<Page x:Class="wpfbase.PageHelp"
      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:wpfbase"
      mc:Ignorable="d" 
      d:DesignHeight="325" d:DesignWidth="525"
      Title="PageHelp">

    <Grid>
        <TextBox>这里是帮助文档</TextBox>
    </Grid>
</Page>

第五步，在MainWindow.xaml.cs中实例化页面，将首页内容传至Frame

...
    public MainWindow()
    {
      InitializeComponent();
      pageindex = new PageIndex();
      mainframe.Content = pageindex;
    }
...

第六步，为PageIndex，PageLightSet，PageCameraSet，PagePlcSet，PageMesSet，PageHelp等页面添加返回按钮

PageIndex.xaml例

<Page x:Class="wpfbase.PageIndex"
      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:wpfbase"
      mc:Ignorable="d" 
      d:DesignHeight="325" d:DesignWidth="525"
      Title="PageIndex">
  <DockPanel>
    <TextBox DockPanel.Dock="Top">这里是首页！</TextBox>
    <Button Content="返回" Click="GoBack"/>
  </DockPanel>
</Page>

第七步，为PageIndex，PageLightSet，PageCameraSet，PagePlcSet，PageMesSet，PageHelp等页面添加返回按钮响应函数

PageIndex.xaml.cs例

...
  public partial class PageIndex : Page
  {
    public PageIndex()
    {
      InitializeComponent();
    }
    private void GoBack(object sender, RoutedEventArgs e) {
      if(NavigationService.GetNavigationService(this).CanGoBack)
        NavigationService.GetNavigationService(this).GoBack();
    }
  }
...

效果如下：

wpf窗口内页面跳转