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控件本身) |
二、代码如下
<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>
<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>
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){}}}