WPF MVVM双向通信 数据模型绑定 简单实例
WPF MVVM双向通信 数据模型绑定 简单实例
- 新建一个WPF 程序项目
- 引用命名空间 using System.ComponentModel;
- 创建测试实体 TestModel 继承 INotifyPropertyChanged 并实现接口
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
- 添加一个自定义通知方法
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new
System.ComponentModel.PropertyChangedEventArgs(propertyName));
}
}
这样一来 通知模块通知方法就实现了
- 添加一个测试属性 Name
private string _name;
public string Name
{
get { return _name; }
set {
if (_name != value)
{
_name = value;
NotifyPropertyChanged("Name");//通知属性值已变更
}
}
}
这样数据模型这块就搞定了
- 为了后面比较直观的看到效果 创建一个TextBox以及一个Button 前者用来编辑,后者用来显示当前属性值
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBox VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"
Padding="10" Margin="0 20 0 0" Name="TestTextBox"
Text="{Binding Path=Name,Mode=TwoWay}"/>
<!--这里的 Mode=TwoWay 就是通信模式使用双向的-->
<Button Margin="0 5 0 0" Padding="5" Content="显示实体Name值"
Name="ShowNameValue" Click="ShowNameValue_Click" />
</StackPanel>
后台代码实现:
public TestModel testModel;
public MainWindow()
{
InitializeComponent();
testModel = new TestModel()
{
Name = "小明明"
};
TestTextBox.DataContext = testModel;
}
private void ShowNameValue_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(testModel.Name);
}
结合上面其实 就明白了 这里
<TextBox Padding="10" Margin="0 20 0 0" Name="TestTextBox" Text="" />
如上代码中的TextBox的属性Path=Name这里的Name 其实就是映射的TestModel 的Name属性
此时修改文本框内容 就会直接体现更新到testModel 的Name属性值
反之后台修改testModel的Name值时 前端也会相应更新,实际使用可以节省很多参数的赋值,语法糖就是香