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 = "";