C#登录界面代码详细图文教程_C#

背景

mvvm 是一种软件架构模式，用于创建用户界面。它将用户界面（view）、业务逻辑（viewmodel）和数据模型（model）分离开来，以提高代码的可维护性和可测试性。

mainwindow 类是 view（视图），负责用户界面的呈现和交互，它是用户直接看到和操作的部分。

loginvm 类是 viewmodel（视图模型），它充当了 view 和 model 之间的中介，处理了视图与数据模型之间的交互逻辑，以及用户操作的响应逻辑。

loginmodel 类是 model（模型），它包含了应用程序的数据和业务逻辑，用于存储和处理用户的身份验证信息。

展示

代码

loginmodel.cs

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading.tasks;

namespace wpfapp2
{
    public class loginmodel
    {
        private string _username;

        public string username
        {
            get { return _username; }
            set
            {
                _username = value;
            }
        }

        private string _password;

        public string password
        {
            get { return _password; }
            set
            {
                _password = value;
            }
        }
    }
}

loginvm.cs

using sys	tem;
using system.collections.generic;
using system.componentmodel;
using system.linq;
using system.text;
using system.threading.tasks;
using system.windows;
using system.windows.input;

namespace wpfapp2
{
    public class loginvm : inotifypropertychanged
    {
        private mainwindow _main;
        public loginvm(mainwindow main)
        {
            _main = main;
        }

        public event propertychangedeventhandler propertychanged;
        private void raisepropetychanged(string propertyname)
        {
            propertychangedeventhandler handler = propertychanged;
            if (handler != null)
            {
                handler(this, new propertychangedeventargs(propertyname));
            }
        }
        private loginmodel _loginm = new loginmodel();

        public string username
        {
            get { return _loginm.username; }
            set
            {
                _loginm.username = value;
                raisepropetychanged("username");
            }
        }
        public string password
        {
            get { return _loginm.password; }
            set
            {
                _loginm.password = value;
                raisepropetychanged("password");
            }
        }
        /// <summary>
        /// 登录方法
        /// </summary>
        void loginfunc()
        {
            if (username == "wpf" && password == "666")
            {
                messagebox.show("ok");
                index index = new index();
                index.show();
                //想办法拿到mainwindow
                _main.hide();
            }
            else
            {
                messagebox.show("输入的用户名或密码不正确");
                username = "";
                password = "";
            }
        }
        bool canloginexecute()
        {
            return true;
        }
        public icommand loginaction
        {
            get
            {
                return new relaycommand(loginfunc,canloginexecute);
            }
        }
    }
}

mainwindow.xaml

<window x:class="wpfapp2.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:wpfapp2"
        mc:ignorable="d"
        title="mainwindow" height="450" width="800">
    <grid>
        <grid.rowdefinitions>
            <rowdefinition height="auto"></rowdefinition>
            <rowdefinition height="auto"></rowdefinition>
            <rowdefinition height="1*"></rowdefinition>
            <rowdefinition height="9*"></rowdefinition>
        </grid.rowdefinitions>
        <textblock grid.row="0" grid.column="0" text="上海市-市图书馆" fontsize="18" horizontalalignment="center"></textblock>
        <stackpanel grid.row="1" grid.column="0" background="#0078d4">
            <textblock text="登录" fontsize="22" horizontalalignment="center" foreground="wheat" margin="5">
            </textblock>    
        </stackpanel>
        <grid grid.row="3" showgridlines="false" horizontalalignment="center">
            <grid.rowdefinitions>
                <rowdefinition height="30"></rowdefinition>
                <rowdefinition height="30"></rowdefinition>
                <rowdefinition height="30"></rowdefinition>
                <rowdefinition height="30"></rowdefinition>
            </grid.rowdefinitions>
            <grid.columndefinitions >
                <columndefinition width="auto"></columndefinition>
                <columndefinition width="200"></columndefinition>
            </grid.columndefinitions>

            <textblock text="用户名" grid.row="0" grid.column="0" verticalalignment="center"></textblock>
            <textbox text="{binding username}"  grid.row="0" grid.column="1" margin="2" ></textbox>
            <textblock text="密码" grid.row="1" grid.column="0" verticalalignment="center"></textblock>
            <textbox text="{binding password}"  grid.row="1" grid.column="1" margin="2"></textbox>

            <checkbox grid.columnspan="2" content="记住密码" grid.row="2"></checkbox>
            <local:custombutton buttoncornerradius="5" backgroundhover="red" backgroundpressed="green"  foreground="#ffffff"  background="#3c7ff8" grid.row="3" grid.column="0" grid.columnspan="2" command="{binding loginaction}" height="30" verticalalignment="top">登录</local:custombutton>
        </grid>
    </grid>
</window>

mainwindow.xaml.cs

using system;
using system.collections.generic;
using system.componentmodel;
using system.linq;
using system.text;
using system.threading.tasks;
using system.windows;
using system.windows.controls;
using system.windows.data;
using system.windows.documents;
using system.windows.input;
using system.windows.media;
using system.windows.media.imaging;
using system.windows.navigation;
using system.windows.shapes;

namespace wpfapp2
{
    /// <summary>
    /// mainwindow.xaml 的交互逻辑
    /// </summary>
    public partial class mainwindow : window
    {
        loginvm loginvm;
        public mainwindow()
        {
            initializecomponent();
            loginvm = new loginvm(this);
            this.datacontext = loginvm;
        }
    }
}

relaycommand.cs

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading.tasks;
using system.windows.input;

namespace wpfapp2
{
    public class relaycommand : icommand
    {
        /// <summary>
        /// 命令是否能够执行
        /// </summary>
        readonly func<bool> _canexecute;
        /// <summary>
        /// 命令需要执行的方法
        /// </summary>
        readonly action _exexute;

        public relaycommand(action exexute,func<bool> canexecute)
        {
            _canexecute = canexecute;
            _exexute = exexute;
        }
        public bool canexecute(object parameter)
        {
            if (_canexecute == null)
            {
                return true;
            }
            return _canexecute();
        }

        public void execute(object parameter)
        {
            _exexute();
        }

        public event eventhandler canexecutechanged
        {
            add {
                if (_canexecute != null)
                {
                    commandmanager.requerysuggested += value;
                }
            }
            remove
            {
                if (_canexecute != null)
                {
                    commandmanager.requerysuggested -= value;
                }
            }
        }
    }
}

自定义按钮custombutton

app.xaml.cs

<application x:class="wpfapp2.app"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:wpfapp2"
             startupuri="mainwindow.xaml">
    <application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                <resourcedictionary source="custombuttonstyles.xaml"></resourcedictionary>
            </resourcedictionary.mergeddictionaries>
        </resourcedictionary>
    </application.resources>
</application>

custombutton.cs

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading.tasks;
using system.windows;
using system.windows.controls;
using system.windows.media;

namespace wpfapp2
{
    public class custombutton:button
    {
        //依赖属性


        public cornerradius buttoncornerradius
        {
            get { return (cornerradius)getvalue(buttoncornerradiusproperty); }
            set { setvalue(buttoncornerradiusproperty, value); }
        }

        // using a dependencyproperty as the backing store for buttoncornerradius.  this enables animation, styling, binding, etc...
        public static readonly dependencyproperty buttoncornerradiusproperty =
            dependencyproperty.register("buttoncornerradius", typeof(cornerradius), typeof(custombutton));

        public brush backgroundhover
        {
            get { return (brush)getvalue(backgroundhoverproperty); }
            set { setvalue(backgroundhoverproperty, value); }
        }

        // using a dependencyproperty as the backing store for backgroundhover.  this enables animation, styling, binding, etc...
        public static readonly dependencyproperty backgroundhoverproperty =
            dependencyproperty.register("backgroundhover", typeof(brush), typeof(custombutton));

        public brush backgroundpressed
        {
            get { return (brush)getvalue(backgroundpressedproperty); }
            set { setvalue(backgroundpressedproperty, value); }
        }

        // using a dependencyproperty as the backing store for backgroundpressed.  this enables animation, styling, binding, etc...
        public static readonly dependencyproperty backgroundpressedproperty =
            dependencyproperty.register("backgroundpressed", typeof(brush), typeof(custombutton));
    }
}

数据字典

custombuttonstyles.xaml

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:bb="clr-namespace:wpfapp2">
    <style targettype="{x:type bb:custombutton}">
        <setter property="template">
            <setter.value>
                <controltemplate targettype="{x:type bb:custombutton}">
                    <border x:name="buttonborder" background="{templatebinding background}" cornerradius="{templatebinding buttoncornerradius}">
                        <textblock text="{templatebinding content}" horizontalalignment="{templatebinding horizontalcontentalignment}" 
                                   verticalalignment="{templatebinding verticalcontentalignment}"></textblock>
                    </border>
                    <!--触发器-->
                    <controltemplate.triggers>
                        <trigger property="ismouseover" value="true">
                            <setter targetname="buttonborder" property="background" value="{binding backgroundhover,relativesource={relativesource templatedparent}}"></setter>
                        </trigger>
                        <trigger property="ispressed" value="true">
                            <setter targetname="buttonborder" property="background" value="{binding backgroundpressed,relativesource={relativesource templatedparent}}"></setter>
                        </trigger>
                    </controltemplate.triggers>
                </controltemplate>
            </setter.value>
        </setter>
    </style>
</resourcedictionary>