Page

Page 是 WPF 中专为导航场景设计的轻量级内容容器，不能独立显示，必须放在 Frame 或 NavigationWindow 中，类似网页的 “页面”，支持前进 / 后退、生命周期、页面缓存与数据传递。

一、核心概念与定位

1. 本质与继承

• 继承链：Page → ContentControl → Control → FrameworkElement
• 本质：内容控件，只能有一个直接子元素（通常用 Grid/StackPanel 包裹）
• 核心定位：导航单元，用于构建多页式、向导式、浏览器式界面

2. 与 Window / UserControl 对比（关键区别）

特性	Window	Page	UserControl
独立运行	✅ 可直接启动	❌ 必须依赖 Frame/NavigationWindow	❌ 需嵌入容器
窗口边框	✅ 自带标题栏 / 边框	❌ 无任何窗口装饰	❌ 无
导航支持	❌ 无内置导航	✅ 内置 NavigationService、前进 / 后退栈	❌ 无
生命周期	Loaded/Closing/Closed	OnNavigatedTo/From、Navigating	Loaded/Unloaded
适用场景	主窗口、独立弹窗	多页导航、向导、内容浏览	复用 UI 模块、局部组件

 

3. 必须的宿主容器

Page 不能单独显示，必须放在以下两种容器中：

1. Frame：最常用，可嵌入 Window/UserControl/Page 任意位置，支持局部导航
2. NavigationWindow：自带导航栏（前进 / 后退）的顶层窗口，适合全屏导航应用

二、Page 常用属性

属性	作用	常用值
Title	页面标题（可同步到宿主窗口标题）	字符串
Background	页面背景	颜色 / 画刷
FontFamily/FontSize	页面默认字体	系统字体 / 数值
NavigationService	导航服务（只读，用于代码导航）	NavigationService 对象
KeepAlive	是否在导航历史中保留实例（缓存）	True/False（默认 False）
ShowsNavigationUI	是否显示宿主的导航 UI（前进 / 后退）	True/False

 

三、Page 核心生命周期（导航事件）

Page 有专属的导航生命周期，比 Window 更精细：

1. Navigating：导航开始前触发（可拦截跳转）
2. Navigated：导航完成后触发（页面已加载）
3. LoadCompleted：页面内容完全加载后触发
4. OnNavigatedTo：页面被导航到时触发（初始化数据首选）
5. OnNavigatedFrom：页面被导航离开时触发（保存数据）
6. Unloaded：页面卸载时触发

四、导航核心：NavigationService

每个 Page 都有 NavigationService 属性，用于代码控制导航：

• Navigate(Page/Uri)：跳转到指定页面
• GoBack()：后退（需判断 CanGoBack）
• GoForward()：前进（需判断 CanGoForward）
• Journal：导航历史栈（前进 / 后退记录）
• StopLoading()：停止加载
• Refresh()：刷新当前页面

五、完整实战示例（Frame + 多 Page 导航）

步骤 1：创建 WPF 项目

新建 WPF 应用，添加 3 个 Page：HomePage.xaml、Page1.xaml、Page2.xaml

示例 1：主窗口（含 Frame 容器）

<!-- MainWindow.xaml -->
<Window x:Class="WpfPageDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Page 导航演示" Height="600" Width="800"
        WindowStartupLocation="CenterScreen">
    <Grid>
        <!-- 顶部导航栏 -->
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Background="#f0f0f0" Padding="10">
            <Button Content="首页" Click="BtnHome_Click" Margin="5"/>
            <Button Content="页面1" Click="BtnPage1_Click" Margin="5"/>
            <Button Content="页面2" Click="BtnPage2_Click" Margin="5"/>
            <Button Content="后退" Click="BtnBack_Click" Margin="5"/>
            <Button Content="前进" Click="BtnForward_Click" Margin="5"/>
        </StackPanel>

        <!-- Frame 容器：承载所有 Page -->
        <Frame x:Name="MainFrame" 
               Margin="0,60,0,0" 
               NavigationUIVisibility="Hidden"  <!-- 隐藏默认导航栏 -->
               Background="White"/>
    </Grid>
</Window>

// MainWindow.xaml.cs
using System;
using System.Windows;
using WpfPageDemo.Pages;

namespace WpfPageDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 初始加载首页
            MainFrame.Navigate(new HomePage());
        }

        // 导航到首页
        private void BtnHome_Click(object sender, RoutedEventArgs e)
        {
            MainFrame.Navigate(new HomePage());
        }

        // 导航到页面1
        private void BtnPage1_Click(object sender, RoutedEventArgs e)
        {
            MainFrame.Navigate(new Page1());
        }

        // 导航到页面2
        private void BtnPage2_Click(object sender, RoutedEventArgs e)
        {
            MainFrame.Navigate(new Page2());
        }

        // 后退
        private void BtnBack_Click(object sender, RoutedEventArgs e)
        {
            if (MainFrame.CanGoBack) MainFrame.GoBack();
        }

        // 前进
        private void BtnForward_Click(object sender, RoutedEventArgs e)
        {
            if (MainFrame.CanGoForward) MainFrame.GoForward();
        }
    }
}

示例 2：首页 Page（HomePage.xaml）

<Page x:Class="WpfPageDemo.Pages.HomePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="首页"
      KeepAlive="True">  <!-- 缓存页面实例，导航回来不重新创建 -->
    <Grid Background="LightBlue">
        <TextBlock Text="这是首页" FontSize="30" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Content="跳转到页面1" Click="BtnGoPage1_Click"
                Width="150" Height="40" VerticalAlignment="Bottom" Margin="20"/>
    </Grid>
</Page>

// HomePage.xaml.cs
using System.Windows;
using System.Windows.Controls;

namespace WpfPageDemo.Pages
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }

        // 页面内导航到 Page1
        private void BtnGoPage1_Click(object sender, RoutedEventArgs e)
        {
            this.NavigationService.Navigate(new Page1());
        }

        // 页面被导航到（初始化）
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            MessageBox.Show("进入首页！");
        }

        // 页面被导航离开（保存数据）
        protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedFrom(e);
            MessageBox.Show("离开首页！");
        }
    }
}

示例 3：页面 1（Page1.xaml，含拦截导航）

<Page x:Class="WpfPageDemo.Pages.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="页面1">
    <Grid Background="LightGreen">
        <TextBlock Text="这是页面1" FontSize="30" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Content="跳转到页面2" Click="BtnGoPage2_Click"
                Width="150" Height="40" VerticalAlignment="Bottom" Margin="20"/>
    </Grid>
</Page>

// Page1.xaml.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace WpfPageDemo.Pages
{
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
            // 注册导航开始事件（可拦截）
            this.NavigationService.Navigating += NavigationService_Navigating;
        }

        private void BtnGoPage2_Click(object sender, RoutedEventArgs e)
        {
            this.NavigationService.Navigate(new Page2());
        }

        // 导航开始前触发（可拦截跳转）
        private void NavigationService_Navigating(object sender, NavigatingCancelEventArgs e)
        {
            MessageBoxResult result = MessageBox.Show("确定要离开页面1吗？", "提示", 
                                                  MessageBoxButton.YesNo);
            if (result == MessageBoxResult.No)
            {
                e.Cancel = true; // 拦截导航，不跳转
            }
        }
    }
}

示例 4：页面 2（Page2.xaml，最简单）

<Page x:Class="WpfPageDemo.Pages.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="页面2">
    <Grid Background="LightCoral">
        <TextBlock Text="这是页面2" FontSize="30" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Page>

六、关键知识点详解

1. Page 内容限制

同 Window，只能有一个直接子元素，必须用布局容器包裹：

<!-- 错误 -->
<Page>
  <TextBlock/>
  <Button/>
</Page>

<!-- 正确 -->
<Page>
  <Grid>
    <TextBlock/>
    <Button/>
  </Grid>
</Page>

2. 导航的两种方式

（1）代码导航（最常用）

// 方式1：导航到 Page 实例
this.NavigationService.Navigate(new Page1());

// 方式2：通过 URI 导航（XAML路径）
this.NavigationService.Navigate(new Uri("Pages/Page1.xaml", UriKind.Relative));

// 方式3：Frame 直接导航
MainFrame.Navigate(new Page1());

（2）XAML 超链接导航

<Hyperlink NavigateUri="Pages/Page1.xaml">跳转到页面1</Hyperlink>

3. 页面缓存（KeepAlive）

• KeepAlive="True"：导航历史中保留 Page 实例，返回时不重新创建（状态保留）
• KeepAlive="False"（默认）：每次导航都创建新实例（适合无状态页面）

4. 页面间数据传递

（1）构造函数传值（推荐）

// 发送页
MainFrame.Navigate(new Page2("来自首页的数据"));

// 接收页 Page2
public Page2(string data)
{
    InitializeComponent();
    txtData.Text = data;
}

（2）NavigationService 传值

// 发送
this.NavigationService.Navigate(new Page2(), "传递的数据");

// 接收（OnNavigatedTo）
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    string data = e.ExtraData as string;
}

（3）全局变量 / ViewModel（MVVM 推荐）

5. NavigationWindow 使用（全屏导航）

<!-- NavigationWindow.xaml -->
<NavigationWindow x:Class="WpfPageDemo.MainNavWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  Title="导航窗口" Height="600" Width="800"
                  Source="Pages/HomePage.xaml"> <!-- 初始页面 -->
</NavigationWindow>

// App.xaml 修改启动窗口
StartupUri="MainNavWindow.xaml"

七、总结

1. Page 是 WPF 导航专用的轻量级内容容器，必须依赖 Frame/NavigationWindow 显示
2. 核心能力：导航历史、生命周期、页面缓存、数据传递
3. 适用场景：多页应用、向导、设置界面、内容浏览、帮助系统
4. 关键 API：NavigationService（导航控制）、OnNavigatedTo/From（生命周期）、KeepAlive（缓存）