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 = "";
相关推荐
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
茯苓gao9 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾9 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT9 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa10 小时前
HTML和CSS学习
前端·css·学习·html
看海天一色听风起雨落11 小时前
Python学习之装饰器
开发语言·python·学习
speop12 小时前
llm的一点学习笔记
笔记·学习
非凡ghost12 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
ue星空12 小时前
月2期学习笔记
学习·游戏·ue5
萧邀人12 小时前
第二课、熟悉Cocos Creator 编辑器界面
学习