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" 可以显示导航的小图标。

<Frame x:Name="MainFrame" Grid.Column="1" 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). 超级链接

<TextBlock Margin="10">

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

</TextBlock>

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

<TextBlock Margin="10">

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)
         {
         }
     }
 }
相关推荐
dangdang___go14 分钟前
文件操作c语言
c语言·开发语言
塔能物联运维17 分钟前
设备断网时数据丢失,后来启用本地缓存+异步重传队列
java·开发语言·缓存
天涯路s31 分钟前
qt怎么自定义日志
开发语言·qt
Evand J36 分钟前
【自适应IMM】MATLAB编写的创新多模型,基于CA/CT双模型和观测自适应。二维平面目标位置估计,带误差统计特性输出,附代码下载链接
开发语言·matlab·ekf·imm·交互式多模型
我命由我1234539 分钟前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
7哥♡ۣۖᝰꫛꫀꪝۣℋ41 分钟前
Spring IoC&DI
java·开发语言·mysql
wadesir44 分钟前
Go语言反射之结构体的深比较(详解reflect.DeepEqual在结构体比较中的应用)
开发语言·后端·golang
c#上位机1 小时前
halcon计算区域骨架
图像处理·人工智能·计算机视觉·c#·halcon
你不是我我1 小时前
【Java 开发日记】我们来说一说 Redis IO 多路复用模型
java·开发语言·redis