记录 | WPF基础学习登录界面制作

目录

  • 前言
  • 一、普通方式
    • Step1 创建项目
    • Step2 设计布局
    • Step3 对剩余布局进行内容填充
      • 可执行代码下载
    • Step4 编写点击事件
    • Step5 创建新WPF窗口
    • Step6 简单写点Index内容
    • Step7 跳转到Index
    • 当前代码下载
  • 二、绑定方式
    • 绑定用户名【单向绑定】
    • 双向绑定
    • 代码提供
  • 三、MVVM
    • 方式1： 拆出模型
      • 代码下载
    • 方式2 View Model
      • LoginViewModel类
      • LoginModel类
      • MainWindow类
      • mainWindow.axml
      • 代码下载
  • 更新时间

前言

参考文章：
参考视频：【WPF入门教程 Visual Studio 2022】WPF界面开发入门

自己的感想
演示登录界面和界面跳转功能。

一、普通方式

Step1 创建项目

Step2 设计布局

先分行，在对每行进行单独配置和划分。

  • 先分三行。
  • 再对第3行进行详细分割为4行2列
    如下图所示，红色为整体布局。
    在这里插入图片描述
    <Grid><!--整体划分3行--><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions><!--整体的第1行第1列--><TextBlock Grid.Row="0" Grid.Column="0" Text="马鞍山市 图书馆" FontSize="18" HorizontalAlignment="Center" Margin="5"/><!--整体的第2行第1列--><StackPanel Grid.Row="1" Grid.Column="0" Background="Blue"><TextBlock Text="登录" FontSize="22" HorizontalAlignment="Center" Foreground="White"/></StackPanel><!--整体第3行第1列--><Grid Grid.Row="2" Grid.Column="0" ShowGridLines="True"><!--划分出4行3列布局--><Grid.RowDefinitions><RowDefinition Height="30"/><RowDefinition Height="30"/><RowDefinition Height="30"/><RowDefinition Height="30"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="auto"/><ColumnDefinition Width="200"/></Grid.ColumnDefinitions><!--其中第1行第1列--><TextBlock Text="用户名" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/><TextBox Grid.Row="0" Grid.Column="1"/></Grid></Grid>

Step3 对剩余布局进行内容填充

在这里插入图片描述

<Window x:Class="WPF_LoginUI.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:WPF_LoginUI"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><!--整体划分3行--><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions><!--整体的第1行第1列--><TextBlock Grid.Row="0" Grid.Column="0" Text="马鞍山市 图书馆" FontSize="18" HorizontalAlignment="Center" Margin="5"/><!--整体的第2行第1列--><StackPanel Grid.Row="1" Grid.Column="0" Background="Blue"><TextBlock Text="登录" FontSize="22" HorizontalAlignment="Center" Foreground="White"/></StackPanel><!--整体第3行第1列--><Grid Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"><!--划分出4行3列布局--><Grid.RowDefinitions><RowDefinition Height="30"/><RowDefinition Height="30"/><RowDefinition Height="30"/><RowDefinition Height="30"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="auto"/><ColumnDefinition Width="200"/></Grid.ColumnDefinitions><!--其中第1行第1列--><TextBlock Text="用户名" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/><!--其中第1行第2列--><TextBox Grid.Row="0" Grid.Column="1" Margin="2"/><!--其中第2行第1列第2列--><TextBlock Text="密码" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"/><TextBox Grid.Row="1" Grid.Column="1" Margin="2"/><!--其中第3行--><CheckBox Content="记住密码" Grid.Row="2" Grid.ColumnSpan="2" /><!--其中第4行--><Button Grid.Row="3" Content="登录" Grid.ColumnSpan="2"  /></Grid></Grid>
</Window>

可执行代码下载

点击下载

Step4 编写点击事件

希望：点击按钮后，获得用户名和密码。
需要对相应的txtBox设置别名。
部分修改代码如下：【注意x:Name和Click】

            <!--其中第1行第1列--><TextBlock Text="用户名" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/><!--其中第1行第2列--><TextBox x:Name="txtUsername" Grid.Row="0" Grid.Column="1" Margin="2"/><!--其中第2行第1列第2列--><TextBlock Text="密码" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"/><TextBox x:Name="txtPassword" Grid.Row="1" Grid.Column="1" Margin="2"/><!--其中第3行--><CheckBox Content="记住密码" Grid.Row="2" Grid.ColumnSpan="2" /><!--其中第4行--><Button Grid.Row="3" Content="登录" Grid.ColumnSpan="2" Click="Button_Click" />

Button_Click事件中代码为：

        private void Button_Click(object sender, RoutedEventArgs e){string username = txtUsername.Text;string password = txtPassword.Text;if(username=="wpf" && password == "admin"){MessageBox.Show("OK");//弹出新界面}else{//弹出警告框MessageBox.Show("请检查用户名或者密码是否正确！");}}

Step5 创建新WPF窗口

命名为Index，做为跳转过来的界面。
在这里插入图片描述

Step6 简单写点Index内容

在这里插入图片描述

Step7 跳转到Index

在Main中对Index进行实例化，然后让其显示出来。
在这里插入图片描述MainWindow.xaml.cs的核心代码：

        private void Button_Click(object sender, RoutedEventArgs e){string username = txtUsername.Text;string password = txtPassword.Text;if(username=="wpf" && password == "admin"){MessageBox.Show("OK");//弹出新界面Index indexWindow = new Index();indexWindow.Show();this.Hide();}else{//弹出警告框MessageBox.Show("请检查用户名或者密码是否正确！");}}

Index.xaml界面的核心代码：

    <Grid><ListView><ListViewItem>图书1</ListViewItem><ListViewItem>图书2</ListViewItem><ListViewItem>图书3</ListViewItem><ListViewItem>图书4</ListViewItem></ListView></Grid>

当前代码下载

C# WPF页面跳转的完整例子【登录界面跳转到子界面】代码下载

二、绑定方式

对于方式一没有使用绑定，我们想修改文本的属性值都需要回.xaml中进行修改，这是不便捷的。我们可以将.xaml中的属性和.cs中的变量进行绑定，之后只需要修改.cs中的变量值就能改变值。

绑定用户名【单向绑定】

.axml中将TextBox中的Text属性值和一个名为UserName的变量绑定在一起。【如下图所示】
在这里插入图片描述
而UserName变量是在对应的.cs文件中，需要声明变量，再在初始化时声明绑定的数据是这个页面中的。【如下图所示】
在这里插入图片描述

双向绑定

DataContext属性用于关联一个对象给它以便进行视图绑定。当你将一个控件（例如MainWindow）的DataContext设置为一个对象（在这里是LoginModel实例）时，那么这个对象将能够通过数据绑定的方式访问到它的属性。
在这里插入图片描述

namespace WPF_LoginUI
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window,INotifyPropertyChanged{public MainWindow(){InitializeComponent();this.DataContext = this;    }public event PropertyChangedEventHandler PropertyChanged;private void RaisePropertyChanged(string propertyName){PropertyChangedEventHandler handler = PropertyChanged;if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); }}private string _UserName;public string UserName{get { return _UserName; }set{_UserName = value;RaisePropertyChanged("UserName");}}private string _Password;public string Password{get { return _Password; }set{_Password = value;RaisePropertyChanged("Password");}}private void Button_Click(object sender, RoutedEventArgs e){if(UserName=="wpf" && Password == "admin"){MessageBox.Show("OK");//弹出新界面Index indexWindow = new Index();indexWindow.Show();this.Hide();}else{//弹出警告框MessageBox.Show("请检查用户名或者密码是否正确！");UserName = "";Password = "";txtUsername.Focus();}}}
}

代码提供

点击下载

三、MVVM

方式1： 拆出模型

即提取出数据模型。下图中，我们创建了LoginModel类，实现了INotifyPropertyChanged接口，用RaisePropertyChanged方法用于在属性值改变时通知视图更新。

下图是个典型的MVVM模式的模型部分，它实现了绑定通知接口，这样当其中任何一个属性的值发生变化时，视图（例如UI界面）可以在不了解如何访问模型的特定实现细节的情况下获取这些改变。这是一种解耦的方式
在这里插入图片描述
this.DataContext = loginModel;这行代码就是在告诉WPF框架，所有的控件需要绑定的数据源都是来自于loginModel，这样登录界面上的UserName和Password输入框（如{Binding Path=UserName}，{Binding Path=Password}等）都可以找到正确的来源。
在这里插入图片描述
当前代码：

namespace WPF_LoginUI
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{LoginModel loginModel;public MainWindow(){InitializeComponent();loginModel =new LoginModel();this.DataContext = loginModel;    }private void Button_Click(object sender, RoutedEventArgs e){if(loginModel.UserName=="wpf" && loginModel.Password == "admin"){MessageBox.Show("OK");//弹出新界面Index indexWindow = new Index();indexWindow.Show();this.Hide();}else{//弹出警告框MessageBox.Show("请检查用户名或者密码是否正确！");loginModel.UserName = "";loginModel.Password = "";txtUsername.Focus();}}}public class LoginModel : INotifyPropertyChanged{public event PropertyChangedEventHandler PropertyChanged;private void RaisePropertyChanged(string propertyName){PropertyChangedEventHandler handler = PropertyChanged;if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); }}private string _UserName;public string UserName{get { return _UserName; }set{_UserName = value;RaisePropertyChanged("UserName");}}private string _Password;public string Password{get { return _Password; }set{_Password = value;RaisePropertyChanged("Password");}}}
}

代码下载

代码下载

方式2 View Model

下面的部分根据视频来做的，但是问了AI后，提示我下面的代码还是不符合MVVM框架的，这点需要注意。
首先，创建两个类：LoginViewModel和LoginModel。在LoginViewModel中实现接口和将LoginModel类做为属性。

LoginViewModel类

在这里插入图片描述

LoginModel类

在这里插入图片描述

MainWindow类

在这里插入图片描述

mainWindow.axml

在这里插入图片描述

代码下载

代码下载

更新时间

  • 2025-02-07：创建。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/70454.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

关于32位和64位程序的传参方法及虚拟机调试工具总结

关于32位和64位程序的传参方法及虚拟机调试工具总结

一、传参方法对比 1. 32位程序 系统调用 (Linux) 使用int 0x80指令触发系统调用 寄存器传参顺序&#xff1a; eax 系统调用号 ebx 第1个参数 ecx 第2个参数 edx 第3个参数 esi 第4个参数 edi 第5个参数 普通函数调用 (C语言) 栈传递参数&#xff1a;参数从右向左压栈…
阅读更多...
vivado 7 系列器件时钟

vivado 7 系列器件时钟

7 系列器件时钟 注释&#xff1a; 本章节以 Virtex -7 时钟源为例。 Virtex-6 的时钟资源与此类似。如果使用不同的架构&#xff0c;请参阅有关器件的 《时 钟资源指南》 [ 参照 40] 。 Virtex-6 和 Virtex-7 器件内含 32 个称为 BUFG 的全局时钟缓存。 BUFG 可满…
阅读更多...
无须付费，安装即是完全版！

无须付费，安装即是完全版！

不知道大家有没有遇到过不小心删掉了电脑上超重要的文件&#xff0c;然后急得像热锅上的蚂蚁&#xff1f; 别担心&#xff0c;今天给大家带来一款超给力的数据恢复软件&#xff0c;简直就是拯救文件的“救星”&#xff01; 数据恢复 专业的恢复数据软件 这款软件的界面设计得特…
阅读更多...
Vue全流程--Vue2路由

Vue全流程--Vue2路由

引入路由的原因&#xff1a; 实现单页面应用&#xff08;SPA&#xff09; 什么是单页面应用&#xff1a; 1、点击跳转链接后直接在原本的页面展示。路径发生相应改变 2、整个应用只有一个完整页面 3、数据需要通过ajax获取 Vue2中的路由是什么&#xff1a; Vue2路由是一…
阅读更多...
【图片合并转换PDF】如何将每个文件夹下的图片转化成PDF并合并成一个文件？下面基于C++的方式教你实现

【图片合并转换PDF】如何将每个文件夹下的图片转化成PDF并合并成一个文件？下面基于C++的方式教你实现

医院在为患者进行诊断和治疗过程中&#xff0c;会产生大量的医学影像图片&#xff0c;如 X 光片、CT 扫描图、MRI 图像等。这些图片通常会按照检查时间或者检查项目存放在不同的文件夹中。为了方便医生查阅和患者病历的长期保存&#xff0c;需要将每个患者文件夹下的图片合并成…
阅读更多...
Racecar Gym 总结

Racecar Gym 总结

1.Racecar Gym 简介 Racecar Gym 是一个基于 PyBullet 物理引擎 的自动驾驶仿真平台&#xff0c;提供 Gymnasium&#xff08;OpenAI Gym&#xff09; 接口&#xff0c;主要用于强化学习&#xff08;Reinforcement Learning, RL&#xff09;、多智能体竞速&#xff08;Multi-Ag…
阅读更多...
【实战】excel分页写入导出大文件

【实战】excel分页写入导出大文件

类 RequestMapping("export")ResponseBodypublic void export(HttpServletResponse response) {long start System.currentTimeMillis();QueryVo query new QueryVo();// response响应头setResponseHeader(response, "excel");ExcelWriter writer Excel…
阅读更多...
基于微信小程序的医院预约挂号系统的设计与实现

基于微信小程序的医院预约挂号系统的设计与实现

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…
阅读更多...
【机器学习】K-Nearest Neighbor KNN算法原理简介及要点

【机器学习】K-Nearest Neighbor KNN算法原理简介及要点

KNN算法用于分类 简介KNN分类算法的流程距离度量K值选择分类表决加权分类表决 简介 KNN的全称是K Nearest Neighbors. 这种算法可以被用来进行分类&#xff0c;原理是根据离特征点最近的K个点所属的类别进行分类。 KNN分类算法的流程 KNN算法的整体流程是我们需要将训练数据…
阅读更多...
智体链：大语言模型协作完成长上下文任务

智体链：大语言模型协作完成长上下文任务

25年1月来自Penn State U和谷歌云的论文“Chain of Agents: Large Language Models Collaborating on Long-Context Tasks”。 解决有效处理长上下文的挑战已成为大语言模型 (LLM) 的关键问题。出现了两种常见策略&#xff1a;1&#xff09;减少输入长度&#xff0c;例如通过检…
阅读更多...
java s7接收Byte字节，接收word转16位二进制

java s7接收Byte字节，接收word转16位二进制

1图&#xff1a; 2.图&#xff1a; try {List list getNameList();//接收base64S7Connector s7Connector S7ConnectorFactory.buildTCPConnector().withHost("192.168.46.52").withPort(102).withTimeout(1000) //连接超时时间.withRack(0).withSlot(3).build()…
阅读更多...
机器学习在癌症分子亚型分类中的应用

机器学习在癌症分子亚型分类中的应用

学习笔记&#xff1a;机器学习在癌症分子亚型分类中的应用——Cancer Cell 研究解析 1. 文章基本信息 标题&#xff1a;Classification of non-TCGA cancer samples to TCGA molecular subtypes using machine learning发表期刊&#xff1a;Cancer Cell发表时间&#xff1a;20…
阅读更多...
Redis --- 使用HyperLogLog实现UV(访客量)

Redis --- 使用HyperLogLog实现UV(访客量)

UV 和 PV 是网站或应用数据分析中的常用指标&#xff0c;用于衡量用户活跃度和页面访问量。 UV (Unique Visitor 独立访客)&#xff1a; 指的是在一定时间内访问过网站或应用的独立用户数量。通常根据用户的 IP 地址、Cookies 或用户 ID 等来唯一标识一个用户。示例&#xff1…
阅读更多...
大学资产管理系统中的下载功能设计与实现

大学资产管理系统中的下载功能设计与实现

大学资产管理系统是高校信息化建设的重要组成部分&#xff0c;它负责记录和管理学校内所有固定资产的信息。随着信息技术的发展&#xff0c;下载功能成为提高资产管理效率的关键环节之一。 系统架构的设计是实现下载功能的基础。一个良好的系统架构能够确保数据的高效传输和存储…
阅读更多...
Vue 3 中的 el-tooltip 详解：语法、示例及与其他框架对比

Vue 3 中的 el-tooltip 详解：语法、示例及与其他框架对比

目录 前言1. 基本知识2. 实战Demo 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 1. 基本知识 el-tooltip 是 Element Plus&#xff08;Vue 3 组件库&#xff09;中的一个用于提示的组件&#xff0c;它可以在…
阅读更多...
Android 整个屏幕可滑动，tab，viewpage是列表，tab不锁在顶

Android 整个屏幕可滑动，tab，viewpage是列表，tab不锁在顶

页面整体可滑动&#xff0c;包括顶部黑色控件、Tab 和列表。 步骤 1&#xff1a;主布局文件&#xff08;activity_main.xml&#xff09; <?xml version"1.0" encoding"utf-8"?> <androidx.core.widget.NestedScrollViewxmlns:android"ht…
阅读更多...
Day 31 卡玛笔记

Day 31 卡玛笔记

这是基于代码随想录的每日打卡 491. 非递减子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0…
阅读更多...
快速优雅解决webview_flutter不能Safari调试的问题

快速优雅解决webview_flutter不能Safari调试的问题

这个问题&#xff0c;网上一搜&#xff0c;又是让你去检索WKWebView&#xff0c;找到FWFWebViewHostApi.m文件&#xff0c;然后再改 iOS 的代码&#xff0c; 加一行 self.inspectable YES; 我们开发Flutter项目&#xff0c;尽量还是不要去改插件里的代码&#xff0c;好了不费…
阅读更多...
docker /var/lib/docker/overlay2目录把磁盘空间占满问题

docker /var/lib/docker/overlay2目录把磁盘空间占满问题

1、查看服务器磁盘空间 df -h果然100%了,docker系统文件把磁盘空间占满了。 2、进入overlay2目录&#xff0c;查找那个容器工作目录占用最高 cd /var/lib/docker/overlay2du -h --max-depth1详见下图 好家伙占用110G&#xff01;复制目录名称2c3c48ccac533c5d4a366d45a19bb9…
阅读更多...
Lua中文语言编程源码-第十一节，其它小改动汉化过程

Lua中文语言编程源码-第十一节，其它小改动汉化过程

__tostring 汉化过程 liolib.c metameth[] {"__转换为字符串", f_tostring}, lauxlib.c luaL_callmeta(L, idx, "__转换为字符串") lua.c luaL_callmeta(L, 1, "__转换为字符串") __len 汉化过程 ltm.c luaT_eventname[] ltablib.c c…
阅读更多...
最新文章

Copyright @ 2022~2023