wpf頁面之間的跳轉詳情 - ui,c,WPF,xml,microsoft,JavaScript,前端開發 14224 博客

在 C# WPF 中實現登錄頁面跳轉，核心是 “驗證登錄邏輯” 與 “頁面切換” 結合，常用兩種方案：NavigationWindow 導航跳轉（適合多頁面場景）和Window+UserControl 切換（適合單窗口集成場景）。以下是具體實現步驟：

一、基礎準備：創建登錄頁面結構

無論哪種方案，先創建登錄頁面（包含賬號、密碼輸入框和登錄按鈕），這裏以通用 XAML 結構為例：

登錄頁面核心 XAML（LoginPage.xaml/ LoginUC.xaml）

<!-- 以Page為例，UserControl結構完全一致，僅根標籤改為<UserControl> -->
<Page x:Class="WpfLoginDemo.LoginPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="登錄頁面">
    <!-- 用Grid佈局登錄表單，居中顯示 -->
    <Grid Background="#F5F5F5">
        <Grid Width="300" Height="250" Background="White" Margin="0,0,0,100" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>

            <!-- 標題 -->
            <TextBlock Grid.Row="0" Text="用户登錄" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold"/>
            
            <!-- 賬號輸入框 -->
            <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="20,0">
                <TextBlock Text="賬號：" Width="60" VerticalAlignment="Center"/>
                <TextBox x:Name="TxtAccount" Width="180" Height="30" Margin="5,0" Padding="5"/>
            </StackPanel>
            
            <!-- 密碼輸入框 -->
            <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="20,0">
                <TextBlock Text="密碼：" Width="60" VerticalAlignment="Center"/>
                <PasswordBox x:Name="TxtPwd" Width="180" Height="30" Margin="5,0" Padding="5"/>
            </StackPanel>
            
            <!-- 登錄按鈕 -->
            <Button Grid.Row="3" Content="登錄" Width="100" Height="35" Margin="0,10" 
                    Background="#4A86E8" Foreground="White" Click="BtnLogin_Click"/>
        </Grid>
    </Grid>
</Page>

二、方案 1：NavigationWindow 導航跳轉（多頁面場景）

適合需要獨立登錄頁、且登錄後跳轉到其他 Page（如首頁）的場景，自帶導航歷史（但登錄頁通常無需後退，可隱藏導航欄）。

步驟 1：設置啓動窗口為 NavigationWindow

修改App.xaml，指定啓動窗口為NavigationWindow，並默認加載登錄頁：

<Application x:Class="WpfLoginDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainNavWindow.xaml"> <!-- 啓動導航窗口 -->
</Application>

步驟 2：創建 NavigationWindow 並隱藏導航欄

新建MainNavWindow.xaml，隱藏默認導航欄（避免登錄後可返回登錄頁）：

<NavigationWindow x:Class="WpfLoginDemo.MainNavWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  Title="WPF登錄示例" Width="800" Height="600"
                  Source="LoginPage.xaml"  <!-- 初始加載登錄頁 -->
                  ShowsNavigationUI="False"> <!-- 隱藏導航欄（關鍵） -->
</NavigationWindow>

步驟 3：實現登錄驗證與跳轉邏輯

在LoginPage.xaml.cs中，添加登錄按鈕點擊事件，驗證賬號密碼後跳轉到首頁（HomePage）：

using System.Windows;
using System.Windows.Controls;

namespace WpfLoginDemo
{
    public partial class LoginPage : Page
    {
        public LoginPage()
        {
            InitializeComponent();
        }

        private void BtnLogin_Click(object sender, RoutedEventArgs e)
        {
            // 1. 獲取輸入的賬號和密碼（PasswordBox需用Password屬性，而非Text）
            string account = TxtAccount.Text.Trim();
            string pwd = TxtPwd.Password.Trim();

            // 2. 簡單登錄驗證（實際項目需對接數據庫/接口，此處用固定值演示）
            if (string.IsNullOrEmpty(account) || string.IsNullOrEmpty(pwd))
            {
                MessageBox.Show("賬號或密碼不能為空！", "提示", MessageBoxButton.OK, MessageBoxImage.Warning);
                return;
            }
            if (account == "admin" && pwd == "123456") // 模擬正確賬號密碼
            {
                // 3. 驗證通過，跳轉到首頁（HomePage需提前創建）
                this.NavigationService.Navigate(new HomePage());
            }
            else
            {
                MessageBox.Show("賬號或密碼錯誤！", "提示", MessageBoxButton.OK, MessageBoxImage.Error);
                // 清空密碼框
                TxtPwd.Password = "";
            }
        }
    }
}

步驟 4：創建首頁（HomePage.xaml）

登錄後跳轉的目標頁面，示例如下：

<Page x:Class="WpfLoginDemo.HomePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="首頁">
    <Grid>
        <TextBlock Text="登錄成功！歡迎進入首頁" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <!-- 可添加退出登錄按鈕，跳回登錄頁：this.NavigationService.Navigate(new LoginPage()); -->
    </Grid>
</Page>

三、方案 2：Window+UserControl 切換（單窗口場景）

適合登錄頁與首頁集成在同一個 Window 中，通過切換 UserControl 實現 “跳轉”，界面更緊湊（無獨立窗口切換感）。

步驟 1：創建登錄和首頁的 UserControl

登錄 UserControl：LoginUC.xaml（XAML 結構同方案 1 的 LoginPage，僅根標籤改為<UserControl>）
首頁 UserControl：HomeUC.xaml（XAML 結構同方案 1 的 HomePage，僅根標籤改為<UserControl>）

步驟 2：創建主 Window（承載 UserControl）

新建MainWindow.xaml，用一個 Grid（ContentContainer）作為 UserControl 的容器，默認加載登錄 UC：

<Window x:Class="WpfLoginDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfLoginDemo" <!-- 引用本地命名空間 -->
        Title="WPF登錄示例" Width="800" Height="600" WindowStartupLocation="CenterScreen">
    <Grid>
        <!-- UserControl容器：默認加載登錄UC -->
        <Grid x:Name="ContentContainer">
            <local:LoginUC/>
        </Grid>
    </Grid>
</Window>

步驟 3：通過事件傳遞實現跳轉（關鍵）

由於 UserControl 無法直接操作 Window 的容器，需通過事件委託將登錄成功的信號傳遞給 MainWindow，再由 MainWindow 切換 UC：

在 LoginUC.xaml.cs 中定義登錄成功事件：

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfLoginDemo
{
    public partial class LoginUC : UserControl
    {
        // 定義登錄成功事件（供MainWindow訂閲）
        public event Action OnLoginSuccess;

        public LoginUC()
        {
            InitializeComponent();
        }

        private void BtnLogin_Click(object sender, RoutedEventArgs e)
        {
            // 1. 登錄驗證邏輯（同方案1）
            string account = TxtAccount.Text.Trim();
            string pwd = TxtPwd.Password.Trim();

            if (string.IsNullOrEmpty(account) || string.IsNullOrEmpty(pwd))
            {
                MessageBox.Show("賬號或密碼不能為空！", "提示", MessageBoxButton.OK, MessageBoxImage.Warning);
                return;
            }
            if (account == "admin" && pwd == "123456")
            {
                // 2. 驗證通過，觸發登錄成功事件
                OnLoginSuccess?.Invoke();
            }
            else
            {
                MessageBox.Show("賬號或密碼錯誤！", "提示", MessageBoxButton.OK, MessageBoxImage.Error);
                TxtPwd.Password = "";
            }
        }
    }
}
1. 在 MainWindow.xaml.cs 中訂閲事件並切換 UC：
using System.Windows;

namespace WpfLoginDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 1. 獲取當前加載的LoginUC
            if (ContentContainer.Children[0] is LoginUC loginUC)
            {
                // 2. 訂閲登錄成功事件
                loginUC.OnLoginSuccess += () =>
                {
                    // 3. 事件觸發：清空容器，加載首頁UC
                    ContentContainer.Children.Clear();
                    ContentContainer.Children.Add(new HomeUC());
                };
            }
        }
    }
}

四、兩種方案對比與優化建議

方案	優點	缺點	適用場景
NavigationWindow+Page	實現簡單，無需事件傳遞	窗口切換有 “閃動感”，導航欄需隱藏	多獨立頁面（如帶註冊頁、忘記密碼頁）
Window+UserControl	單窗口集成，界面更流暢	需通過事件傳遞信號，略複雜	緊湊的單窗口應用（如管理系統）

優化建議：

密碼安全：實際項目中，密碼不能明文驗證，需用 MD5/SHA256 加密後與數據庫存儲的加密值對比。
登錄狀態保存：登錄成功後，可通過Application.Current.Properties存儲用户信息（如Application.Current.Properties["UserName"] = account;），供後續頁面使用。
退出登錄：首頁可添加 “退出登錄” 按鈕，點擊後跳回登錄頁（方案 1 用NavigationService.Navigate(new LoginPage())，方案 2 切換回LoginUC）。

本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。

14224 博客

14224 博客

博客 / 詳情