在 C# WPF 中,頁面跳轉通常有兩種主要方式:使用 NavigationWindow+Page 或 在 Window 中切換 UserControl。以下是具體實現方法:
一、使用 NavigationWindow+Page 實現跳轉(適合導航場景)
1. 創建導航窗口(NavigationWindow)
NavigationWindow 是專門用於頁面導航的窗口,自帶導航按鈕(前進 / 後退)。
步驟 1:新建 NavigationWindow
在項目中添加一個NavigationWindow(如MainNavWindow.xaml):
<!-- MainNavWindow.xaml -->
<NavigationWindow x:Class="WpfApp.MainNavWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="導航窗口" Width="800" Height="600"
Source="Page1.xaml"> <!-- 設置初始頁面 -->
</NavigationWindow>
步驟 2:設置啓動窗口
在App.xaml中指定啓動窗口為MainNavWindow:
<Application x:Class="WpfApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainNavWindow.xaml"> <!-- 改為導航窗口 -->
</Application>
2. 創建 Page 頁面
新建多個Page(如Page1.xaml、Page2.xaml)作為跳轉目標:
Page1.xaml(包含跳轉到 Page2 的按鈕):
<Page x:Class="WpfApp.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1">
<StackPanel>
<TextBlock FontSize="20" Text="這是頁面1"/>
<Button Content="跳轉到頁面2" Click="GoToPage2"/>
</StackPanel>
</Page>
Page1.xaml.cs(實現跳轉邏輯):
private void GoToPage2(object sender, RoutedEventArgs e) {
// 跳轉到Page2
this.NavigationService.Navigate(new Page2());
}
3. 常用導航操作
- 返回上一頁:
•
if (this.NavigationService.CanGoBack) {
this.NavigationService.GoBack(); // 後退
}
• 前進到下一頁:
if (this.NavigationService.CanGoForward) {
this.NavigationService.GoForward(); // 前進
}
• 刷新當前頁:
this.NavigationService.Refresh();
二、在 Window 中切換 UserControl(適合單窗口應用)
如果不需要導航歷史,可在Window中通過切換UserControl實現 “頁面” 切換,更靈活。
1. 創建 UserControl(模擬頁面)
新建兩個UserControl(如UC_Home.xaml、UC_Settings.xaml):
UC_Home.xaml:
<UserControl x:Class="WpfApp.UC_Home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock FontSize="20" Text="這是首頁"/>
</UserControl>
UC_Settings.xaml:
<UserControl x:Class="WpfApp.UC_Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock FontSize="20" Text="這是設置頁"/>
</UserControl>
2. 在 Window 中切換 UserControl
在主窗口中用一個容器(如Grid)承載UserControl,通過代碼動態切換:
MainWindow.xaml:
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="切換頁面示例" Width="800" Height="600">
<Grid>
<!-- 導航按鈕 -->
<StackPanel Orientation="Horizontal" Margin="10">
<Button Content="首頁" Click="ShowHome" Margin="5"/>
<Button Content="設置" Click="ShowSettings" Margin="5"/>
</StackPanel>
<!-- 頁面容器(用於顯示UserControl) -->
<Grid x:Name="ContentContainer" Margin="10,50,10,10"/>
</Grid>
</Window>
MainWindow.xaml.cs(切換邏輯):
private void ShowHome(object sender, RoutedEventArgs e) {
// 清空容器,添加首頁UserControl
ContentContainer.Children.Clear();
ContentContainer.Children.Add(new UC_Home());
}
private void ShowSettings(object sender, RoutedEventArgs e) {
// 清空容器,添加設置頁UserControl
ContentContainer.Children.Clear();
ContentContainer.Children.Add(new UC_Settings());
}
三、兩種方式的對比
|
方式
|
優點
|
缺點
|
適用場景
|
|
NavigationWindow+Page
|
自帶導航歷史(前進 / 後退)
|
導航欄樣式固定,定製性差
|
類似瀏覽器的多頁面導航
|
|
Window+UserControl
|
完全自定義佈局,靈活度高
|
需手動實現導航歷史(如需要)
|
單窗口應用,如管理系統界面
|
根據需求選擇合適的方式,小型應用推薦用Window+UserControl,需要完整導航功能時用NavigationWindow+Page。