C#教程

关注公众号 jb51net

关闭
首页 > 软件编程 > C#教程 > WPF页面跳转

C# WPF实现页面跳转的两种方法介绍

作者:张謹礧

在 C# WPF 中,页面跳转通常有两种主要方式:使用 NavigationWindow+Page或在 Window 中切换 UserControl,下面我们来看看具体实现方法吧

在 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.xamlPage2.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) {
    // 跳转到Page2
    this.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.xamlUC_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) {
    // 清空容器,添加首页UserControl
    ContentContainer.Children.Clear();
    ContentContainer.Children.Add(new UC_Home());
}
​
private void ShowSettings(object sender, RoutedEventArgs e) {
    // 清空容器,添加设置页UserControl
    ContentContainer.Children.Clear();
    ContentContainer.Children.Add(new UC_Settings());
}

三、两种方式的对比

方式优点缺点适用场景
NavigationWindow+Page自带导航历史(前进 / 后退)导航栏样式固定,定制性差类似浏览器的多页面导航
Window+UserControl完全自定义布局,灵活度高需手动实现导航历史(如需要)单窗口应用,如管理系统界面

根据需求选择合适的方式,小型应用推荐用Window+UserControl,需要完整导航功能时用NavigationWindow+Page

到此这篇关于C# WPF实现页面跳转的两种方法介绍的文章就介绍到这了,更多相关WPF页面跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文