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窗口内页面跳转