在C# WPF中实现登录页面跳转的两种方案_Asp.net

引言

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

以上就是在c# wpf中实现登录页面跳转的两种方案的详细内容，更多关于c# wpf登录页面跳转的资料请关注代码网其它相关文章！