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)
         {
         }
     }
 }
相关推荐
喜欢吃燃面8 分钟前
C++算法竞赛:位运算
开发语言·c++·学习·算法
草莓熊Lotso11 分钟前
《详解 C++ Date 类的设计与实现:从运算符重载到功能测试》
开发语言·c++·经验分享·笔记·其他
谱写秋天18 分钟前
Qt 5.5 的安装与配置(使用 VSCode编辑)
开发语言·vscode·qt
唐青枫19 分钟前
别滥用 Task.Run:C# 异步并发实操指南
c#·.net
项目申报小狂人19 分钟前
算法应用上新!自适应更新策略差分进化算法求解球形多飞行器路径规划问题,附完整MATLAB代码
开发语言·算法·matlab
阿珊和她的猫4 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
fouryears_234177 小时前
Flutter InheritedWidget 详解:从生命周期到数据流动的完整解析
开发语言·flutter·客户端·dart
我好喜欢你~7 小时前
C#---StopWatch类
开发语言·c#
lifallen9 小时前
Java Stream sort算子实现:SortedOps
java·开发语言