记录 | 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");}}}
}