5 WPF中的Page页面的使用

以下是一个简单的WPF示例，演示如何在三个Page之间进行导航切换，使用Frame控件作为导航容器，并包含基本的导航按钮（前进/后退/主页）

Page类更简单，比Window更精简。

代码见下文以及资源文件：

https://download.csdn.net/download/qq_34047402/90919296

5WPF中的Page页面的使用资源-CSDN文库

本例介绍如下界面实现：

一、Page的显示

Page可以放到Frame中。

1), Frame的 NavigationUIVisibility ="Visible" 可以显示导航的小图标。

2）.使用Frame的Navigate方法可以导航到某个页面，如下文

MainFrame.Navigate(new Page1());

3）页面之间跳转可以使用超级链接或者NavigationService.Navigate实现，

a). NavigationService

NavigationService.Navigate(new Page3());

其中NavigationService：获得了页的宿

b). 使用Frame的GoBack,GoForward函数

if (MainFrame.CanGoBack)

MainFrame.GoBack();

if (MainFrame.CanGoForward)

MainFrame.GoForward();

c). 超级链接

click <Hyperlink NavigateUri="Page3.xaml" > 这儿</Hyperlink> 到页面3

</TextBlock>

如果想对URi做验证，可以添加事件RequestNavigate 来处理具体的导航请求。

click <Hyperlink NavigateUri="Page3.xaml" RequestNavigate="Hyperlink_RequestNavigate"> 这儿</Hyperlink> 到页面3

</TextBlock>

private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)

{

if (e.Uri != null)

{

// 获取当前NavigationService并导航

var navService = NavigationService.GetNavigationService((DependencyObject)sender);

navService?.Navigate(new Uri(e.Uri.ToString(), UriKind.RelativeOrAbsolute));

e.Handled = true; //设置为 true 表示事件已处理

}

关于参数 RequestNavigateEventArgs：

属性/方法	说明
`e.Uri`	获取Hyperlink中指定的目标URI（如 `NavigateUri="Page2.xaml"`）
`e.Handled`	设置为 `true` 表示事件已处理，阻止默认行为（必须设置！）
`e.Source`	事件源（即Hyperlink控件本身）

二、代码如下

XML 复制代码

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="Page导航示例" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- 导航按钮 -->
        <StackPanel Grid.Row="0" Orientation="Vertical" Background="LightGray">
            <Button Content="首页" Margin="5" Padding="10,2" Click="GoToHome_Click"/>
            <Button Content="上一页" Margin="5" Padding="10,2" Click="GoBack_Click"/>
            <Button Content="下一页" Margin="5" Padding="10,2" Click="GoForward_Click"/>
            <Button Content="用Command跳转到页面2" Margin="5" Padding="10,2" 
                    Command="{Binding NavigationToPageCommand}" CommandParameter="/Pages/Page2.xaml"                    
                    />
            <Button Content="用Command跳转到页面3" Margin="5" Padding="10,2" 
                    Command="{Binding NavigationToPageCommand}" CommandParameter="/Pages/Page3.xaml"        
                        />
            <TextBlock Margin="10" VerticalAlignment="Center" 
                       Text="{Binding ElementName=MainFrame, Path=Content.Title}"/>
        </StackPanel>
        <!-- 导航容器 -->
        <Frame x:Name="MainFrame" Grid.Column="1" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

XML 复制代码

<Page x:Class="WpfApp1.Pages.Page1"
      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:WpfApp1.Pages"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="页面1欢迎">

    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="这是页面1" FontSize="24" Margin="10"/>
        <Button Content="前往页面2" Click="NavigateToPage2" Width="100" Margin="10"/>
    </StackPanel>
</Page>

cs 复制代码

  public partial class Page1 : Page
  {
      public Page1()
      {
          InitializeComponent();
      }
      private void NavigateToPage2(object sender, RoutedEventArgs e)
      {
          NavigationService.Navigate(new Page2());
      }
  }
public partial class Page2 : Page
{
    public Page2()
    {
        InitializeComponent();
    }
    private void NavigateToPage3(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Page3());
    }

    private void GoBackToPage1(object sender, RoutedEventArgs e)
    {
        NavigationService.GoBack();
    }
}

 public partial class Page3 : Page
 {
     public Page3()
     {
         InitializeComponent();
     }
     private void GoToHome(object sender, RoutedEventArgs e)
     {
         // 直接导航到Page1（清空导航历史）
         NavigationService.Navigate(new Page1());
     }
 }

  public partial class MainWindow : Window
  {
      public MainWindow()
      {
          InitializeComponent();
          this.DataContext = new MainViewModel(this.MainFrame);
      }
      private void GoToHome_Click(object sender, RoutedEventArgs e)
      {
          MainFrame.Navigate(new Page1());
      }
      private void GoBack_Click(object sender, RoutedEventArgs e)
      {
          if (MainFrame.CanGoBack)
              MainFrame.GoBack();
      }
      private void GoForward_Click(object sender, RoutedEventArgs e)
      {
          if (MainFrame.CanGoForward)
              MainFrame.GoForward();
      }
  }

 public class MainViewModel
 {
     private Frame _frame;

     public MainViewModel(Frame frame)
     {
         _frame = frame;
     }
     private ICommand _navigationToPageCommand;

     public ICommand NavigationToPageCommand 
     {
         get
         {
             return _navigationToPageCommand ?? new RelayCommand<object>( NavigationToPage, (s) => true);
         }
         set
         {
             _navigationToPageCommand = value;
         }
     }
     private void NavigationToPage(object page)
     {
         try
         {
             string pageUrl = page as string;
             if(pageUrl!=null)
             {
                 _frame.Navigate(new Uri(pageUrl, UriKind.Relative));
             }
         }
         catch(Exception ex)
         {
         }
     }
 }