MVVM模式和在WPF中的实现(二)数据绑定

2019-12-11 08:06栏目:bob体育平台
TAG:

在C#中消息有两个指向,一个指向Message,一个指向INotify。这里主要讲INotify。

接触MVVM接近一段时间了,有一点理解,写下来。

MVVM模式解析和在WPF中的实现(二)

INotify也有人称之为[通知],不管叫消息还是通知,都是一个意思,就是传递信息。

之前是做winform的,工作需要,学习wpf。优缺点就不用说类,网上一大堆。我自己理解的话,有下面几点:

数据绑定

系列目录:

MVVM模式解析和在WPF中的实现(一)MVVM模式简介

MVVM模式解析和在WPF中的实现(二)数据绑定

MVVM模式解析和在WPF中的实现(三)命令绑定

MVVM模式解析和在WPF中的实现(四)事件绑定

MVVM模式解析和在WPF中的实现(五)View和ViewModel的通信 

MVVM模式解析和在WPF中的实现(六)用依赖注入的方式配置ViewModel并注册消息

消息的定义

1、首先是界面的xmal和界面分离:wpf也同样支持拖拉控件,但是使用wpf的人,都觉得在xmal中写控件更屌一点。并且可以使用静态资源(Window。Resources)设置每一个控件的样式(Style),统一界面风格更方便。Style中的TargetType指定属于某一类控件,Setter指定属性(Property)和Value。

0x00 数据绑定要达到的效果

数据绑定要达到什么效果呢,就是在界面中绑定了数据源之后,数据在界面上的修改能反映到绑定源,同时绑定源的修改也能反映到界面上。从界面反映到绑定的数据源是很容易理解的,因为在绑定过程中我们指定了DataContext和Binding的对象,很容易找到绑定的源并修改。但数据源修改时怎么通知界面呢?因为ViewModel中被绑定的属性并不知道谁绑定了它,如果在ViewModel中存一个View的引用,在数据发生变化时修改View,这无疑又将ViewModel和View耦合在了一起,而且这样做View中相应的控件没有开发完善难以进行测试,同样View中控件类型或名称发生改变时,ViewModel中相关代码都需要修改。在WPF中从数据源通知界面发生变化是通过发送通知的方式进行的,你可以想象一个string类型的Property,名字是TestString,在它发生变化时对着View大喊“TestString发生变化了,你们谁绑定了TestString需要跟着变啊!”,至于绑定的是TextBlock的Text,还是Label的Content,还是TextBox的Text,ViewModel并不关心,同样喊了后结果如何ViewModel也不关心。View在收到这个通知后看有没有绑定 了TestString的地方,找到了就修改,找不到就不管了,也不会在乎这个通知是哪个类型的ViewModel发的。这样ViewModel和View就解耦了,谁也不依赖对方。

INotify消息其实是一个接口,接口名叫INotifyPropertyChanged。接口定义如下:

  如  <Style x:key="TxtBoxStyle" TargetType=“TextBox”>

0x01 INotifyPropertyChanged接口

在WPF中能够实现ViewModel向View喊话功能的就是INotifyPropertyChanged接口,它就像一个大喇叭一样,我们实现了这个接口,就可以通过触发PropertyChanged事件并给出改变的数据源的对象和属性名称,以此来通知数据的变化。这个接口的实现是非常简单的,下图代码就是一种非常简易的实现方式。由于在MVVM中所有的ViewModel和部分Model都需要实现这个接口来达到绑定的效果,因此一般会专门用一个类来实现这个接口,并将这个类作为ViewModel等需要数据更改后发送通知的类的基类。

 图片 1

 //向客户端发出某一属性值已更改的通知。
 public interface INotifyPropertyChanged
 {
     //在更改属性值时发生。
     event PropertyChangedEventHandler PropertyChanged;
 }

      <Setter Property="Width"  Value="100" />

0x02 ObservableCollection<T>集合

NotifyObject貌似把一切都解决了,但是考虑这样一种情况,有一个List<string>列表显示人员名单,View中的一个ListBox绑定了这个列表。每次我们添加新成员时,为了能在View中立即看到结果必须调用RaisePropertyChanged方法让ListBox控件重新加载数据源。这种做法执行了大量的无效操作,就像我们只是改变了屏幕上一小部分内容却要刷新整个屏幕以更新显示一样。如果添加的不是人员而是一种添加动作频繁发生的操作,这种无效操作会极大影响性能。因此WPF提供了一个ObservableCollection<T>集合,可以将数据项的添加、删除等反映到View中绑定的控件上而无需我们做任何操作。所以在遇到对集合添加、删除等操作又需要使用数据绑定时要优先考虑ObservalbeCollection<T>。

定义很简单,我们可以看到这个接口只定义了一个事件属性——PropertyChanged。所以这个PropertyChanged就是消息的核心了。

    </Style>

0x03 数据绑定的示例

有了NotifyObject这个基类后,我们就可以测试数据绑定了。为了让示例针对性更强,该示例仅仅用到了数据绑定,未添加命令绑定等其它内容。示例界面如图所示:

1. 拖动滑块时,最上面TextBox中的数值会跟着变化,显示滑块条的当前值,同时主界面背景色的透明度也会跟着变化。

2. 左下角的DataGrid和右下角的ListBox以及右边标签为下拉菜单的ComboBox中的数据都是一样的。选中这三个控件中的某行时,其它两个控件也会选中该项。右上方紫色方框内会显示选中行的信息。

3. 在左下角DataGrid控件、右下角ListBox控件、右上角紫色区域的某一处修改数据时,其它两处的数据也会随着修改。

图片 2

下面说明如何通过数据绑定实现上面的功能。

先说一下主界面的ViewModel,其中有double型属性DoubleValue,TestData型属性SelectedData,List<TestData>型属性TestDataList。这里没有使用ObservableCollection集合因为不涉及到集合内数据项的动态添加和删除。如果要使用ObservableCollection也非常简单,只需要把List<TestData>改为ObservableCollection<TestData>即可。

功能1:Slider的Value、TextBox的Text和DockPanel的Background的Opacity都绑定了ViewModel中的DoubleValue。当拖动滑块时,Slider的Value发生了变化,会更新ViewModel中的DoubleValue,DoubleValue更新后会调用RaisePropertyChanged方法触发INotifyPropertyChanged中的PropertyChanged事件,并在事件参数中保存了发生改变的属性名称“DoubleValue”,这样View中绑定了DoubleValue的属性就要更新数据,TextBox的Text属性绑定了DoubleValue,所以TextBox更新了Text以显示最新的Slider的Value。同样主界面最顶层的布局容器DockPanel的Background中的Opacity也绑定了DoubleValue,更改后的表现就是背景色透明度发生了变化。整个过程如图中蓝色箭头所示。

功能2:DataGrid、ComboBox、ListBox的ItemsSource都绑定了ViewModel中的TestDataList,所以他们的列表项都是一样的。在DataGrid中我们显示了TestData的所有属性,ComboBox中我们只显示了StringValue属性,在ListBox中则重写了数据项模板,按照我们想要的方式显示TestData中的BoolValue、AddDateTime、和IntValue。同时这三个控件的SelectedItem也都绑定了ViewModel中的SelectedData,因此当其中一个的选中项发生改变时,其它两个控件的选中项也会相应发生改变,原理参照功能1。此外右上角紫色区域的几个TextBox和一个CheckBox分别绑定了SelectedData的不同属性,因此当SelectedData发生改变时,紫色区域内各个控件的显示内容也会发生改变。

功能3:因为TestData类也继承自NotifyObject,而且几个属性在发生改变时也会调用RaisePropertyChanged方法发出通知,因此所有绑定了这些属性的控件也会随着更新数据。表现出来就是在任何地方修改了TestData中的属性,所有绑定了这些属性的控件都会更新。

当然了,还需要在主界面的后台代码中把DataContext设置为ViewModel的一个实例。

DataContext = new MainWindowViewModel();

其实上面很多功能可以不借助ViewModel来实现的。例如功能1中把TextBox的Text直接绑定到Slider的Value上,同样功能二中ListBox的SelectedItem也可直接绑定到DataGrid的SelectedItem上,之所以使用ViewModel是为了演示MVVM模式下的数据绑定。

那么学习应用消息的方法就出现了,即,创建一个继承INotifyPropertyChanged接口的类,然后在类内,实现PropertyChanged就可以了。

  Style中还可以添加Template,然后放置更多的样式模板。

0x04 相关下载

示例代码:

消息的应用

2、数据绑定,可以说是MVVM的核心。界面和后台的数据交互代码,统统放置在VM(ViewModel)中,M(Model)中放置数据对象,如SQL数据库中的订单表,在Modle中就是一个对象类。V(View)是界面层。

上面介绍消息是用来传递信息的。那么可能会有同学好奇,引用类型的对象不就可以封装传递信息吗?为什么还要用消息呢?

  最近做了一个DataGrid的数据绑定,列中放置了TextBox、ComboBox、Button的控件,使用数据绑定驱动控件。

因为有些数据是存储在非引用类型的对象中的。比如字符串,或数字等。

图片 3

为了让字符串、数字等数据的修改也能如引用类型一样,可以传递回给源,就需要使用消息了。

DataGrid的Columns中使用DataGridTemplateColumn,可以放置TextBox等控件。并在TextBox中添加TextBoxChanged事件,引用(xmlns:ie=",

下面我们来看下消息的基础用法。

<ie:Interaction.Trigger>

首先,我们使用WPF创建一个项目,然后创建一个页面,起名为WindowNotify,编辑内容如下:

  <ie:EvenTrigger EventName="TextChanged">

<Window x:Class="WpfApplication.WindowNotify"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WindowNotify" Height="120" Width="200">
    <Grid>
        <StackPanel>
            <TextBox Name="txtName" VerticalAlignment="Top" Height="24" ></TextBox>
            <TextBox Name="txtNameNotify" VerticalAlignment="Top"  Height="24" ></TextBox>
            <Button Click="Button_Click" Height="30" Content="查看结果"></Button>
        </StackPanel>
    </Grid>
</Window>

    <ie:InvokeCommandAction Command="{Binding String,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" CommandParameter="String" />

接下来,编辑Xaml对于的cs文件,内容如下:

 </ie:Interaction.Trigger>

public partial class WindowNotify : Window
{ 
    private string _KName = "Kiba518"; 
    public string KName
    {
        get { return _KName; }
        set { _KName = value; }
    }
    WindowNotifyViewModel vm;
    public WindowNotify()
    {
        InitializeComponent();
        vm = new WindowNotifyViewModel(); 
        Binding bding = new Binding();
        bding.Path = new PropertyPath("KName");
        bding.Mode = BindingMode.TwoWay; 
        bding.Source = vm; 
        txtNameNotify.SetBinding(TextBox.TextProperty, bding);  
        txtName.Text = KName;
        txtNameNotify.Text = vm.KName; 
    }
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("[txtName:" + KName + "]     |    [txtNameNotify:" + vm.KName + "]");
    } 
}
public class WindowNotifyViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string _KName = "Kiba518Notify";
    public string KName
    {
        get { return _KName; }
        set
        {
            _KName = value;
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs("KName"));
            }
        }
    }
}

在Button中直接可以使用Command和CommandParameter,CommandParameter中可以使用ElementName传递任何控件到VM层。当然这样就违背了MVVM的设计初中,但是必要情况下,也可以这么用。如在选择了DataGrid的一行中的Button,如何取得Button所在行的其他列的信息呢?把DataGrid传过去就很方便了,直接使用SelectedItem。当然也可以在V层 .cs代码中获取后传递到VM层。

这里我们创建了一个ViewModel——WindowNotifyViewModel,我们让这个VM继承INotifyPropertyChanged,然后定义了一个KName属性,并定义了PropertyChanged事件触发的位置。

在DataGrid绑定数据时,指定ItemsSource=“{Binding xxx}“,VM层中使用ObservableCollection<xxxModel> 集合,并设置OnPropertyChanged。DataGrid列中Binding对象xxModel中的属性就可以了。

有同学可能会好奇,PropertyChanged事件是何时被赋值的呢?别心急,请耐心往下看。

如此就可以在DataGrid中显示数据。有时候这样Binding后还是不能显示数据,可能是Binding数据对象需要静态什么的。如ComboBox中绑定,这个我是设定类ComboBox类,其中有Value和Text及Guid属性,并在xxxModle(DataGrid数据源对象中)定义集合,并在集合中添加值。并且Binding时这样写(别问为为什么,也是在网上找到代码):”{Binding xxxModel.xxxCbBox},RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=DataGrid},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}“。

ViewModel定义完成之后,我们再看Xaml对应的cs文件。这里我们也定义了一个KName属性。然后初始化时,将cs文件的KName和VM的KName分别赋值给前台定义的两个TextBox控件。

 

这里用vm的KName属性赋值时,稍微有点特别,稍后再介绍。

Button的Visibility属性同样可以做Banding。

然后我们运行页面,并修改两个文本框内的值。再点击查看结果按钮。得到界面如下:

图片 4

版权声明:本文由bob体育app发布于bob体育平台,转载请注明出处:MVVM模式和在WPF中的实现(二)数据绑定