C#WPF如何跳转页面
在 C# WPF 中,页面跳转通常有两种主要方式:使用 NavigationWindow+Page 或 在 Window 中切换 UserControl。以下是具体实现方法:
一、使用 NavigationWindow+Page 实现跳转(适合导航场景)
1. 创建导航窗口(NavigationWindow)
NavigationWindow
是专门用于页面导航的窗口,自带导航按钮(前进 / 后退)。
步骤 1:新建 NavigationWindow
在项目中添加一个NavigationWindow
(如MainNavWindow.xaml
):
<!-- MainNavWindow.xaml --> <NavigationWindow x:Class="WpfApp.MainNavWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="导航窗口" Width="800" Height="600"Source="Page1.xaml"> <!-- 设置初始页面 --> </NavigationWindow>
步骤 2:设置启动窗口
在App.xaml
中指定启动窗口为MainNavWindow
:
<Application x:Class="WpfApp.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"StartupUri="MainNavWindow.xaml"> <!-- 改为导航窗口 --> </Application>
2. 创建 Page 页面
新建多个Page
(如Page1.xaml
、Page2.xaml
)作为跳转目标:
Page1.xaml(包含跳转到 Page2 的按钮):
<Page x:Class="WpfApp.Page1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="Page1"><StackPanel><TextBlock FontSize="20" Text="这是页面1"/><Button Content="跳转到页面2" Click="GoToPage2"/></StackPanel> </Page>
Page1.xaml.cs(实现跳转逻辑):
private void GoToPage2(object sender, RoutedEventArgs e) {// 跳转到Page2this.NavigationService.Navigate(new Page2()); }
3. 常用导航操作
-
返回上一页:
if (this.NavigationService.CanGoBack) {this.NavigationService.GoBack(); // 后退 }
-
前进到下一页:
if (this.NavigationService.CanGoForward) {this.NavigationService.GoForward(); // 前进 }
-
刷新当前页:
this.NavigationService.Refresh();
二、在 Window 中切换 UserControl(适合单窗口应用)
如果不需要导航历史,可在Window
中通过切换UserControl
实现 “页面” 切换,更灵活。
1. 创建 UserControl(模拟页面)
新建两个UserControl
(如UC_Home.xaml
、UC_Settings.xaml
):
UC_Home.xaml:
<UserControl x:Class="WpfApp.UC_Home"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><TextBlock FontSize="20" Text="这是首页"/> </UserControl>
UC_Settings.xaml:
<UserControl x:Class="WpfApp.UC_Settings"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><TextBlock FontSize="20" Text="这是设置页"/> </UserControl>
2. 在 Window 中切换 UserControl
在主窗口中用一个容器(如Grid
)承载UserControl
,通过代码动态切换:
MainWindow.xaml:
<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="切换页面示例" Width="800" Height="600"><Grid><!-- 导航按钮 --><StackPanel Orientation="Horizontal" Margin="10"><Button Content="首页" Click="ShowHome" Margin="5"/><Button Content="设置" Click="ShowSettings" Margin="5"/></StackPanel><!-- 页面容器(用于显示UserControl) --><Grid x:Name="ContentContainer" Margin="10,50,10,10"/></Grid> </Window>
MainWindow.xaml.cs(切换逻辑):
private void ShowHome(object sender, RoutedEventArgs e) {// 清空容器,添加首页UserControlContentContainer.Children.Clear();ContentContainer.Children.Add(new UC_Home()); } private void ShowSettings(object sender, RoutedEventArgs e) {// 清空容器,添加设置页UserControlContentContainer.Children.Clear();ContentContainer.Children.Add(new UC_Settings()); }
三、两种方式的对比
方式 | 优点 | 缺点 | 适用场景 |
---|---|---|---|
NavigationWindow+Page | 自带导航历史(前进 / 后退) | 导航栏样式固定,定制性差 | 类似浏览器的多页面导航 |
Window+UserControl | 完全自定义布局,灵活度高 | 需手动实现导航历史(如需要) | 单窗口应用,如管理系统界面 |
根据需求选择合适的方式,小型应用推荐用Window+UserControl
,需要完整导航功能时用NavigationWindow+Page
。