WPF MVVM基础教程（二）各种基础的绑定_wpf mvvm教程

MVVM各种基础的绑定

视图View跟ViewModel绑定

将ViewModel对象赋值给DataContext

有两种绑定方式：

方式一：后台代码绑定

在视图的后端代码中添加绑定

this.DataContext = new MainWindowViewModel();
1

方式二：前台XAML中绑定

 <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
1
2
3

优点：在xaml中进行属性绑定属性时，ViewModel相关的属性都会在提示中显示

普通属性绑定

在ViewModel中定义一个完整属性，在Set加入OnPropertyChanged的方法，然后在Xaml中将对应属性值改成{Binding xxx}

前台绑定格式：

<Control Property="{Binding xxxx}" />
1

示例代码：

ViewModel添加的代码：

说明：OnPropertyChanged();只用在后台数据源更新了向前台UI界面推送用到，如果有的属性绑定，只需要前台界面向后台数据源更新，可以不添加。如果是双向绑定，也是需要。

private string _name;

public string Name
{
    get
    {
        return _name;
    }
    set
    {
        _name = value;
        OnPropertyChanged();
    }
}

public string NewName { get; set; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

XAML代码：

 <TextBox
            Width="120"
            Margin="90,58,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Text="{Binding NewName}"
            TextWrapping="Wrap" />
        <TextBlock
            Margin="90,123,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Text="{Binding Name}"
            TextWrapping="Wrap" />
1
2
3
4
5
6
7
8
9
10
11
12
13

测试：

在vm中初始化属性

运行时绑定的控件显示正确值：

集合绑定

对于一些集合性质的控件，如ComboBox、ListBox、ListView、DataGrid、ItemsControl等，需要绑定ItemsSource属性,绑定对应VM的集合

 <ItemsControl ItemsSource="{Binding MyCollection}" />
1

绑定集合数量不变

对于控件需要绑定集合数量不变，可以直接使用List<T>集合

示例：ComboBox绑定固定的选项

 <ComboBox
            Width="120"
            Margin="79,180,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            ItemsSource="{Binding Options}" />
1
2
3
4
5
6

ViewModel中添加集合属性Options，并初始化

   public List<string> Options { get; set; }

	//初始化
   Options = new List<string>() { "选项1", "选项2", "选项3" };
1
2
3
4

效果：

集合数量需要动态变化

对于集合需要发生变化的，需要使用ObservableCollection<T> 或者其他继承自INotifyCollectionChanged接口的集合
示例：
在ListBox上绑定

   <ListBox
            Margin="226,109,0,0"
            d:ItemsSource="{d:SampleData ItemCount=5}"
            ItemsSource="{Binding Messages}" />

1
2
3
4
5

d:ItemsSource="{d:SampleData ItemCount=5}"为开发时的显示效果，对运行无影响，也不会产生数据

 public ObservableCollection<string> Messages
        {
            get
            {
                return _messages;
            }
            set
            {
                _messages = value;
                OnPropertyChanged();
            }
        }

//初始化
 Messages = new ObservableCollection<string>() { "消息1", "消息2", "消息3", "消息4" };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：

源码下载