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)
         {
         }
     }
 }
相关推荐
小小晓.7 分钟前
C++:语句和作用域
开发语言·c++
wanderist.1 小时前
Lambda表达式在算法竞赛中的应用
java·开发语言·算法
海天鹰2 小时前
PHP上传文件
android·开发语言·php
Yeauty3 小时前
渲染成图再 CLI 拼接,还是进程内直推?Rust 帧到视频的两条路
开发语言·rust·音视频
geovindu4 小时前
CSharp: Breadth First Search Algorithm and Depth First Search Algorithm
开发语言·后端·算法·c#·.net·搜索算法
库克克4 小时前
【C++】set 与multiset
开发语言·c++
Wang's Blog5 小时前
Go-Zero项目开发34: 微服务超时控制与重试机制实践
开发语言·微服务·golang·go-zero
2zcode6 小时前
项目文档:基于MATLAB神经网络的心力衰竭预测与临床辅助决策系统研究
开发语言·神经网络·matlab·心力衰竭预测\
减瓦6 小时前
深入 Quarkus:云原生时代 Java 的重生之路
java·开发语言·云原生
杨运交6 小时前
[053][核心模块]Java枚举缓存与ORM集成实践
java·开发语言·缓存