[基于vs2019]上位机设计制作用户登录界面

最新推荐文章于 2024-09-20 11:00:00 发布

Sen402

最新推荐文章于 2024-09-20 11:00:00 发布

阅读量1.5k

点赞数 11

分类专栏：上位机文章标签：开发语言

本文链接：https://blog.csdn.net/Sen402/article/details/139488432

版权

上位机专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、任务要求

在vs2019编程环境中编写程序，单击一个Button控件，引发事件，并弹出提示框显示信息Hello world

二·、项目总览

要使用Visual Studio制作登录界面，您可以按照以下步骤操作:

1.打开Visual Studio并创建一个新的windows Forms应用程序项目。

2.在工具箱中选择所需的控件，例如文本框、标签、按钮等。

3.将这些控件拖放到窗体上，并根据需要进行布局和设计。

4.在代码视图中编写代码，以便在用户单击登录按钮时验证用户名和密码。

5.如果验证成功，则可以打开主窗体或显示其他相关信息。

6.如果验证失败，则应显示错误消息或提供其他选项。

7.最后，测试并调试您的应用程序，以确保它能够正常工作并满足您的需求。

三、项目实施

1、创建vs窗体工程

在Visual Studio 2019中创建窗体应用程序的步骤相对简单且直接。以下是创建Windows窗体应用程序的详细步骤：

首先，打开Visual Studio 2019。在开始菜单中搜索并选择Visual Studio 2019应用程序以启动。

接着，点击“新建项目”。在弹出的窗口中，选择“Visual C#”或“Visual Basic”类别，具体取决于你希望使用的编程语言。

然后，选择“Windows 窗体应用 (.NET Framework)”模板。如果你在搜索框中输入“Windows 窗体应用”，可以快速找到所需的模板。从“语言”列表中选择“Visual Basic”或“Visual C#”，从“平台”列表中选择“Windows”。

接下来，输入项目名称和指定项目位置。在“配置新项目”窗口中，输入你希望的项目名称，如“HelloWorld”，然后选择“创建”。

此时，Visual Studio将打开新项目，并显示一个空白的Windows窗体。你可以通过向窗体添加控件来创建你的应用程序。例如，在Visual Studio IDE的左侧，选择“工具箱”选项卡以访问可用的控件。如果工具箱不存在，可以通过从菜单栏中选择“查看”>“工具箱”或者按Ctrl+Alt+X键来打开。

最后，选择“按钮”控件并将其拖到窗体上。在“属性”窗口的“外观”部分，在“文本”中键入“单击此处”，然后按Enter键。这样你就创建了一个简单的“Hello World”应用程序。

通过以上步骤，你可以在Visual Studio 2019中轻松地创建一个Windows窗体应用程序。这个过程不仅适用于初学者，也适合那些希望快速构建Windows桌面应用程序的开发者。

2、添加Form窗体

打开Visual Studio工具，选择文件->新建->项目

弹出的对话框中，Visual C++下选择CLR-> Windows窗体应用程序

接着点击“浏览”按钮，选择需要保存工程的路径，然后名称处输入工程的名称，最后点击“确定”按钮

按照上面操作的方法之后，就会出现如下图所示的界面以及点击调试的运行界面

如果想要在form窗口上添加按钮，那么点击右侧的工具箱，弹出的窗口上，将Button按钮拖到form窗口上

拖动完成之后，按钮就在form窗口上，不需要编码

最后点击调试运行，运行的效果如下所示

3、添加MID窗体

MDI (Multiple Document Interface) 窗体是一种在一个父窗体中可以打开多个子窗体的界面风格。在MDI窗体中，每个子窗体都是独立的文档窗口，可以单独进行操作，但是它们同时存在于一个父窗体中。

MDI窗体常用于需要同时管理多个文档的应用程序，比如像Word、Excel等办公软件。在这些应用程序中，父窗体提供了整个应用程序的主要操作界面，而子窗体则用于显示和编辑具体的文档内容。

MDI窗体提供了一些常用的操作功能，比如窗口的最大化和最小化、窗口的切换、窗口的排列等。这些功能可以通过菜单、工具栏和快捷键等方式进行操作。

使用MDI窗体的开发过程中，主要涉及到以下几个方面的内容：
- 创建父窗体：使用MDIParent属性设置为True创建父窗体，并进行相应的界面和逻辑设计。
- 创建子窗体：使用MDIChild属性设置为True创建子窗体，并进行相应的界面和逻辑设计。
- 打开子窗体：通过实例化子窗体对象并调用其Show()方法打开子窗体。
- 窗口之间的切换：使用ActivateMdiChild()方法激活指定的子窗体。
- 子窗体的最大化和最小化：通过Maximize()和Minimize()方法实现子窗体的最大化和最小化。
- 窗口的排列：使用LayoutMdi()方法实现子窗体的水平、垂直、层叠等排列方式。

总之，MDI窗体提供了一种方便管理多个文档的界面风格，可以提高应用程序的易用性和用户体验。在使用MDI窗体开发应用程序时，需要注意界面的设计和逻辑的实现，以提供一个完善的多文档管理功能。

4、继承窗体

要继承一个窗体，需要先创建一个新的窗体类，并在该类的声明中指定要继承的基类。例如：

public class MyForm : Form
{
// 窗体的代码
}
在这个例子中，我们创建了一个名为MyForm的新窗体类，它继承自Form类。

然后，在新窗体类中，可以添加任何你需要的代码和控件。你可以通过重写基类的方法来自定义新窗体的行为，或者添加新的方法和属性。

例如，你可以重写OnLoad方法来在窗体加载时执行特定操作：

public class MyForm : Form
{
protected override void OnLoad(EventArgs e)
{
// 在窗体加载时执行操作
base.OnLoad(e);
}
}
当你想要创建一个新的窗体的实例时，可以实例化你创建的新窗体类：

MyForm myForm = new MyForm();
myForm.Show();
这样就创建了一个新的窗体并显示出来。

5、控件

5.1控件概述

在计算机编程中，控件（Widget）是指用于构建用户界面的可视化元素。控件可以是按钮、文本框、复选框、下拉列表等等。控件用来接收用户输入、显示信息和执行特定的操作。

控件通常具有一些基本的属性和方法，如大小、位置、颜色、文本等。通过设置这些属性，可以定制控件的外观和行为，使其适应特定的用户界面设计需求。

控件可以单独使用，也可以组合在一起形成复杂的界面。通过组合和布局多个控件，可以创建出丰富多样的用户界面，提供丰富的功能和交互体验。

不同的编程语言和开发框架提供了不同的控件库，开发者可以根据需求选择合适的控件进行使用和定制。常见的控件库有Qt、Java Swing、Windows Forms等。

控件编程是用户界面开发中的重要部分，掌握控件的使用和定制技巧可以提高界面的可用性和用户体验。

5.2控件操作

控件操作是指对图形用户界面中的控件进行操作，包括选择、点击、拖动、调整大小等。这些操作可以通过编程的方式来实现，通常使用控件的属性和方法来操作。

比如，对于一个按钮控件，可以通过编程的方式来设置按钮的文本、颜色、位置等属性，还可以为按钮添加点击事件的处理函数，以实现按钮被点击时的响应。

另外，还可以通过鼠标或触摸屏等输入设备来进行控件操作。通过点击按钮、拖动滑块等方式来与控件交互。

控件操作在图形用户界面的开发和测试中非常常见，它可以帮助用户与应用程序进行交互，并实现各种功能。同时，控件操作也是用户体验的关键因素之一，良好的控件操作能使用户更加方便快捷地使用应用程序。

6、代码示范

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group .error {
color: red;
font-size: 12px;
}
.btn {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
color: #fff;
font-weight: bold;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
.link {
text-align: center;
margin-top: 10px;
}
.link a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1>用户登录</h1>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<input type="submit" class="btn" value="登录">
</div>
</form>
<div class="link">
<a href="register.html">注册账号</a> | <a href="forgot-password.html">忘记密码</a>
</div>
</div>
</body>
</html>