ObservableObject详细使用🔥

CZerocheng 1/3/2024 MVVMCommunityToolkit

# 基本数据类型

本次使用CommunityTookit和HandyControl工具实现MVVM，先创建一个你想要的ViewModel，名为ObservableObjectTestViewModel，然后继承ObservableObject类，像下面一样在set构造器里面调用SetProperty方法即可。

public class ObservableObjectTestViewModel:ObservableObject
{
    
	private string? name;

	public string? Name
	{
		get { return name; }
		set 
		{
			SetProperty(ref name,value);
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

接着创建View，名为ObservableObjectTestView，handyControl的配置自行查找，在xaml文件里面实现一下代码：

 <hc:TextBox Text="{Binding Name}"/>

即可实现两者的绑定。

# 引用类型

首先创建一个Person的Model，继承ObservableObject，在属性Set构造器中调用SetProperty即可。

public class Person:ObservableObject
{

	private string? name;
	/// <summary>
	/// 姓名
	/// </summary>

	public string? Name
	{
		get { return name; }
		set 
		{ 
			SetProperty(ref name, value);
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在ObservableObjectTestViewModel中添加一个类型为Person的属性

public class ObservableObjectTestViewModel:ObservableObject
{
  private Person? myPerson = new();

	public Person? MyPerson
	{
		get { return myPerson; }
		set 
		{ 
			SetProperty(ref myPerson, value);
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13

在xaml文件里面实现一下代码：

 <hc:TextBox Text="{Binding MyPerson.Name}"/>

即可实现两者的绑定。

# 包装类

其实包装类也是引用类型中的一种，如果说只是单纯的直接使用该属性而不需要对属性做一个逻辑操作，按照上面的引用类型操作即可。比如我需要根据界面上的输入值在后面加上某些字符串或者其他一些操作，那么就可以使用包装类了。比如我想要将Person对象的Name 绑定在界面上，但是在界面上输入的值我还要加上字符串“我是包装类”这样的操作。首先先将Person对象包装到ObservablePerson里面，同样这个ObservablePerson也要继承ObservableObject，在Name的Set的构造器中调用SetProperty方法，具体代码如下：

public class ObservablePerson:ObservableObject
{
	private readonly Person person;
  public ObservablePerson(Person person) => this.person = person;

	public string Name
	{
		get { return person.Name; }
		set
		{
			SetProperty(person.Name,value,person,(p,n)=> p.Name = n+"我是包装类");
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

之后按照上面的引用类型操作即可。

 public class ObservableObjectTestViewModel:ObservableObject
 {
     public ObservableObjectTestViewModel()
     {
        myObservablePerson = new(new Person());
		 }
    private ObservablePerson myObservablePerson;
    public ObservablePerson MyObservablePerson
    {
      get { return myObservablePerson; }
      set
      {
        SetProperty(ref myObservablePerson, value);
      }
    }
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在xaml文件里面实现一下代码：

 <hc:TextBox Text="{Binding MyObservablePerson.Name}"/>

即可实现两者的绑定。

# 特性(ObservableProperty)

将

public class ObservableObjectTestViewModel:ObservableObject

改为

public partial class ObservableObjectTestViewModel:ObservableObject

在你需要绑定的字段上面加上[ObservableProperty]

[ObservableProperty]
private string myName;

partial void OnMyNameChanging(string name)
{
    Console.WriteLine($"The name is about to change to {name}!");
}

partial void OnMyNameChanged(string name)
{
    Console.WriteLine($"The name just changed to {name}!");
}

1
2
3
4
5
6
7
8
9
10
11
12

在xaml文件里面实现一下代码：

 <hc:TextBox Text="{Binding MyName}"/>

即可实现两者的绑定。如果是像上面的Person类一样是引用类型的话可以像下面一样修改，记得加上partial

public partial class Person:ObservableObject
{
	[ObservableProperty]
	private string? name;
	///// <summary>
	///// 姓名
	///// </summary>
	//public string? Name
	//{
	//	get { return name; }
	//	set 
	//	{ 
	//		SetProperty(ref name, value);
	//	}
	//}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

还可以简化成下面这样，好处就是还可以继承其他的类

[ObservableObject]
public partial class Student
{
	[ObservableProperty]
	private int data;
}

1
2
3
4
5
6

在xaml文件里面实现一下代码：

 <hc:TextBox Text="{Binding MyPerson.Name}"/>

# 总结

综合上面来说后面可以简化成这样：在Model中可以简化成这样：

[ObservableObject]
public partial class Student
{
	[ObservableProperty]
	private string name;
}

1
2
3
4
5
6

在ViewModel中可以简化成这样：

[ObservableObject]
public partial class ObservableObjectTestViewModel
{
  [ObservableProperty]
  private Student myStudent = new Student();
}

1
2
3
4
5
6

在xaml文件里面实现一下代码：

 <hc:TextBox Text="{Binding MyStudent.Name}"/>

即可实现绑定Student对象的Name属性。

zerocheng的个人blog

Choose mode