WPF视频学习-简单应用篇图书馆程序(一)

1.登录界面和主界面跳转

先把登录界面分为三行《Grid》
先添加两行:
在这里插入图片描述

<Grid>
    <!--//分三行,行排列-->
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    
    <!--加入每行的内容-->
    <TextBlock Margin="5" Grid.Row="0" Grid.Column="0" Text="市图书馆" FontSize="18" HorizontalAlignment="Center"/>

    <StackPanel Grid.Row="1" Grid.Column="0" Background="#0078d4">
        <TextBlock Margin="5" Text="登录" FontSize="22" HorizontalAlignment="Center" Foreground="White"/>
    </StackPanel>
</Grid>

第三行:

<!--第三行,为一个Grid,指定为上一层的三行一列中添加-->
<Grid Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center">
    <!--增加四行进行布局-->
    <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>

    <TextBlock Text="用户名" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/>
    <TextBox Margin="2" Grid.Row="0" Grid.Column="1"/>

    <TextBlock Text="密码" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"/>
    <TextBox Margin="2" Grid.Row="1" Grid.Column="1"/>

    <!--在改行把列合二为一-->
    <CheckBox Grid.ColumnSpan="2" Content="记住密码" Grid.Row="2"/>
    <Button Grid.Row="3" Grid.ColumnSpan="2" Content="登录"/>

	</Grid>
</Grid>

在这里插入图片描述

2.登录功能

点击响应和切面切换,(创建一个新的WPF窗口命名为WindowIndex)
响应:

private void Button_Click_up(object sender, RoutedEventArgs e)
{
    //注意要先在UI代码上给对应控件起名字:"x:Name="
    string username = txtUserName.Text;
    string password = txtPassWord.Text;

    if(username == "wpf" && password == "666")
    {
        //弹出新的界面
		//(格式化代码:ctrl+k,ctrl+D)
		//MessageBox.Show("OK");
		WindowIndex index = new WindowIndex();//创建新界面
		index.Show();//显示新界面

		this.Hide();//本窗口(登陆界面)隐藏
    }
    else
    {
        //弹出警告框
        MessageBox.Show("输入的用户名和密码不正确");
    }
}

3.绑定

定义:让xaml中的文本框(或者其他控件),绑定C#代码中的变量和属性(即不通过前面的控件名字进行识别)

//给当前界面指定上下值(在构造函数中),加入这行才会在刚开始把预设值显示在界面上
this.DataContext = this;		

//.cs中 加入变量定义(pro+Tab键自动补全,然后再按需求进行更改)
public string UserName { get; set; } = "333";		//变量预设值
//.xaml中:增加Text="{Binding UserName}"
<TextBox Text="{Binding UserName}"  x:Name="txtUserName" Margin="2" Grid.Row="0" Grid.Column="1"/>


但是发现后续清空操作时,直接改变变量在xaml界面中没有进行显示上的改变,解决方式:让属性(变量)具有通知的功能,修改之后通知到界面:

加入代码(固定写法,可以照抄):

1.需要加一个继承自INotifyPropertyChanged
    public partial class MainWindow : Window ,INotifyPropertyChanged
    {
		......

2.加入INotifyPropertyChanged的重写函数
public event PropertyChangedEventHandler PropertyChanged;
private void RaiseProChanged(string propertyName)
{
    PropertyChangedEventHandler handler = PropertyChanged;
    if (handler != null)
    {
        handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

//“propfull” + Tab 可以补全
private string _UserName;

public string UserName
{
    get { return _UserName; }
    set { _UserName = value; 
            RaiseProChanged("UserName");
    }
}

//可以注释掉之前的UserName 的定义
//public string UserName { get; set; } = "333";

,加入上面代码之后,再在需要清空的地方调用:

UserName = "";			//页面上的对应控件也会清空

类似UserName ,完成PassWord的变量创建,即完成界面和C#程序的变量绑定和变量更改通知界面,实现前后端分离。

4.MVVM—数据模型,…,命令

MVVM:是一种设计模式。M:model是一个数据模型 ;V:view界面 ;VM:ViewModel解决界面如何绑定数据模型(整合业务)

举例:M:数据模型(把变量,属性放在一个新的数据类中)
//⭐⭐先创建一个class,把之前继承自INotifyPropertyChanged,
//以及重写的函数和变量UserName,变量PassWord都转移(可直接剪切)到这里
public class LoginModel:INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void RaiseProChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    //“propfull” + Tab 可以补全
    private string _UserName;

    public string UserName
    {
        get { return _UserName; }
        set
        {
            _UserName = value;
            RaiseProChanged("UserName");
        }
    }
    private string _PassWord;

    public string PassWord
    {
        get { return _PassWord; }
        set
        {
            _PassWord = value;
            RaiseProChanged("PassWord");
        }
    }
}

在MainWindow中使用:

//⭐⭐实例化
LoginModel loginModel;  //mvvm实例化做准备
public MainWindow()
{
    InitializeComponent();

    loginModel = new LoginModel();  //创建一个实例
    //给当前界面指定上下值
    //this.DataContext = this;
    this.DataContext = loginModel;  //因MVVM进行的修改
}

//调用:(该变量需要加入实例化的名再调用)
loginModel.UserName = "";
loginModel.PassWord = "";

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GD32 MCU超频后无法再次下载程序的解决办法

我们知道&#xff0c;MCU的系统时钟主频就相当于人的心跳或脉搏&#xff0c;为所有的工作单元提供时间基数&#xff0c;所以一般在程序最开始的地方都需要进行主频配置。 GD32固件库中提供了多种宏定义&#xff0c;可以很方便的将系统时钟配置为想要的频率。 GD32固件库中所用…

[C#]winform使用onnxruntime部署LYT-Net轻量级低光图像增强算法

【训练源码】 https://github.com/albrateanu/LYT-Net 【参考源码】 https://github.com/hpc203/Low-Light-Image-Enhancement-onnxrun 【算法介绍】 一、研究动机 1.研究目标 研究的目标是提出一种轻量级的基于YUV Transformer 的网络&#xff08;LYT-Net&#xff09;&…

NVIDIA DeepStream SDK 说明及链接

NVIDIA DeepStream SDK DeepStream 的多平台支持为您提供了一种更快、更简单的方式来开发视觉AI应用程序和服务。您甚至可以在本地、边缘和云中部署它们&#xff0c;只需单击一个按钮。 开始 在Launchpad上试用 什么是 NVIDIA DeepStream&#xff1f; NVIDIA 的 DeepStream …

没有登录微信就不会截图了?这个方法你一定要学会

前言 前段时间小白在指导小伙伴的时候&#xff0c;发现他在电脑没有登录微信的时候就不会截图了。 这个可就难倒他了…… 所以他登录了个微信&#xff0c;然后截了张图&#xff0c;接着把微信退出了。这人可真是谨慎啊&#xff5e; 所以&#xff0c;小伙伴在使用电脑的时候…

linux shell查看24h内修改的文件

执行命令&#xff1a; find /path -type f -mtime 0

【JMeter接口测试工具】第二节.JMeter项目实战(下)【实战篇】

文章目录 前言一、接口弱压力测试二、高并发、高频率三、生成图形化报告总结 前言 一、接口弱压力测试 场景举例&#xff1a; 场景1:模拟半小时之内 1000 个用户访问服务器资源&#xff0c;要求平均响应时间在3000ms内&#xff0c;且错误率为0 实现步骤&#xff1a; 步骤一&am…

创新共享经济:探索Web3对新商业模式的启迪

随着Web3时代的到来&#xff0c;我们正在见证着一场数字经济的革命。在这个革命中&#xff0c;区块链技术作为一种基础设施&#xff0c;正为创新的共享经济模式提供新的契机。本文将深入探讨Web3对新商业模式的启迪&#xff0c;以及如何借助区块链技术构建更加开放、公平、高效…

go context 源码刨析(一)

Context 上下文context.Context 是用来设置截止时间、同步信号&#xff0c;传递请求相关值的结构体。 context.Context 定义了四个需要实现的方法&#xff1a; Deadline: 返回 context.Context 被取消的时间。Done: 返回一个 Channel&#xff0c;这个 Channel 会在当前工作完…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战九(整体布局02)

使用el-menu和el-sub-menu及el-menu-item导航 src/layout目录下新增components目录&#xff0c;components目录下新增PageSidebar.vue 代码基本思想为&#xff1a;读取router中定义的routes数组&#xff0c;渲染绑定到el-menu。 el-menu和el-sub-menu及el-menu-item的区别&…

RNA-seq上下游分析snakemake流程

学习完snakemake后写的第一个流程是RNA-seq上游定量和下游的质控和差异分析。 使用fastp处理fastq文件&#xff0c;在使用START比对到基因组同时得到raw count&#xff0c;使用非冗余外显子长度作为基因的长度计算FPKM、TPM&#xff0c;同时也生成了CPM的结果。 非冗余外显子…

【单片机毕业设计选题24003】-基于STM32和阿里云的家庭安全监测系统

系统功能: 此设计采用STM32单片机采集环境温湿度,烟雾浓度和一氧化碳浓度显示在OLED上&#xff0c;并将这些信息上报至阿里云平台。 1. 上电连接手机热点后自动连接阿里云&#xff0c;可通过阿里云平台收到系统上报的温湿度&#xff0c;烟雾 浓度&#xff0c;一氧化碳数据以…

BGW总结

Java基础 Java概述 面向对象和面向过程的区别 面向过程性能比面向对象高&#xff0c;因为类调用时需要实例化&#xff0c;开销比较大 面向对象有封装、继承、多态性的特性&#xff0c;可以设计出低耦合的系统&#xff0c;使系统更加灵活、更加易于维护 三大特性 ①封装&a…

地面自动气象站的工作原理

TH-CQX10地面自动气象站是一种部署在地面上&#xff0c;用于监测和记录气象要素的自动化设备。能够自动观测、储存和发送气象数据的设备。它能够实时监测和记录温度、湿度、风速、风向、气压等多种气象参数&#xff0c;为气象监测、气候研究、农业生产、环境监测等领域提供准确…

C++中的结构体——结构体案例1_2

案例描述 学校正在做毕设项目&#xff0c;每位老师指导5名学生&#xff0c;总共有3名老师&#xff0c;需求如下 设计学生和老师的结构体&#xff0c;其中在老师的结构体中&#xff0c;有老师的姓名和一个存放5名学生的数组作为成员 学生的成员有姓名、考试分数&#xff0c;创…

Python写UI自动化--playwright(安装)

Playwright是微软推出的开源自动化测试工具&#xff0c;专为跨浏览器端到端测试设计。Playwright可以在多个浏览器引擎上运行测试&#xff0c;包括基于Chromium的浏览器&#xff08;如Chrome、Edge&#xff09;、Firefox和WebKit&#xff08;Safari的技术基础&#xff09;。支持…

信息收集---网站目录和CMS指纹识别

一. 网站目录收集 1. 常见网站敏感文件 网站的备份文件/数据库备份文件 wwwroot.zip Db.zip 后台登陆的目录 manage login 安装包&#xff08;源码&#xff09; 上传的目录uploads mysql的管理界面 phpmyadmin 程序的安装路径 2. Dirb 工具 工具介绍 dirb 是一款用…

【Spine学习06】之IK约束绑定,制作人物待机动画,图表塞贝尔曲线优化动作

引入IK约束的概念&#xff1a; 约束目标父级 被约束骨骼子集 这样理解更好&#xff0c;约束目标可以控制被约束的两个骨骼运作 IK约束绑定过程中呢&#xff0c;如果直接绑定最下面的脚掌骨骼会发生偏移&#xff0c;所以在开始处理IK之前&#xff0c;需要先设置一个ROOT结点下的…

自定义类型:枚举(enum)+联合体(union)

枚举联合体 一.枚举1.枚举类型的声明2.枚举类型的优点3.枚举类型的使用 二.联合体1.联合体类型的声明2.联合体的特点3.相同成员的结构体和联合体对比4.联合体大小的计算5.联合体的练习&#xff08;判断大小端&#xff09;6.联合体节省空间例题 一.枚举 1.枚举类型的声明 枚举…

HTML制作一个日蚀的动画特效

大家好&#xff0c;今天制作一个日蚀动画特效&#xff01; 先看具体效果&#xff1a; 使用一个逐渐扩大的圆形阴影来模拟月亮遮挡太阳的效果。使用了CSS的keyframes动画和border-radius属性来创建一个简单的圆形阴影效果。 HTML <!DOCTYPE html> <html lang"e…

Linux构建本地时间同步ntp

环境介绍&#xff1a; 主机名 IP地址 系统发行版 环境 Node01 192.168.100.102 Centos 7.4 可联网、已关闭防火墙selinux Node02 192.168.100.103 Centos 7.4 已关闭防火墙selinux 1.主节点同步阿里云标准时间 在保证连接外网的情况下&#xff0c;同步阿里服务器的…