C#WPF如何实现登录页面跳转

weixin_66547608

1257人浏览 · 2025-10-21 19:37:25

weixin_66547608 · 2025-10-21 19:37:25 发布

在 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 = "";
            }
        }
    }
}

在 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）。