目录
前言
参考文章：
参考视频：【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：创建。