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

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

先把登录界面分为三行《Grid》

先添加两行:

cpp 复制代码
<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>

第三行:

cpp 复制代码
<!--第三行,为一个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)

响应:

cpp 复制代码
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#代码中的变量和属性(即不通过前面的控件名字进行识别)

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

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

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

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

csharp 复制代码
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";

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

csharp 复制代码
UserName = "";			//页面上的对应控件也会清空

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

4.MVVM---数据模型,...,命令

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

举例:M:数据模型(把变量,属性放在一个新的数据类中)
csharp 复制代码
//⭐⭐先创建一个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中使用:

csharp 复制代码
//⭐⭐实例化
LoginModel loginModel;  //mvvm实例化做准备
public MainWindow()
{
    InitializeComponent();

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

//调用:(该变量需要加入实例化的名再调用)
loginModel.UserName = "";
loginModel.PassWord = "";
相关推荐
2303_Alpha1 小时前
SpringBoot
笔记·学习
萘柰奈2 小时前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 小时前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 小时前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 小时前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿3 小时前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng3 小时前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed10 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中10 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h11 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa