WPF MVVM双向通信 数据模型绑定 简单实例

WPF MVVM双向通信 数据模型绑定 简单实例

1. 新建一个WPF 程序项目
2. 引用命名空间 using System.ComponentModel;
3. 创建测试实体 TestModel 继承 INotifyPropertyChanged 并实现接口

public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

4. 添加一个自定义通知方法

public void NotifyPropertyChanged(string propertyName)
{
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new 
					System.ComponentModel.PropertyChangedEventArgs(propertyName));
                }
}

这样一来 通知模块通知方法就实现了

5. 添加一个测试属性 Name

private string _name;
public string Name
{
      get { return _name; }
      set {
             if (_name != value)
			 {
                        _name = value;
                        NotifyPropertyChanged("Name");//通知属性值已变更
               }
          }
}

这样数据模型这块就搞定了

6. 为了后面比较直观的看到效果 创建一个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值时 前端也会相应更新，实际使用可以节省很多参数的赋值，语法糖就是香