WPF学习07:MVVM 预备知识之数据绑定

MVVM是一种模式,而WPF的数据绑定机制是一种WPF内建的功能集,两者是不相关的。

但是,借助WPF各种内建功能集,如数据绑定、命令、数据模板,我们可以高效的在WPF上实现MVVM。因此,我们需要对各种MVVM相关的WPF内建功能集进行了解,才能在扎实的基础上对MVVM进行学习与实践。

本文是WPF学习03:Element Binding的后续,将说明实现数据绑定的三个重点:DataContext INotifyPropertyChanged IValueConverter

MVVM简介

MVVM将User Interface切成了3个部分,View、Model、View Model.

三个部分区分如下:

View:界面代码,并完成数据可视化。

Model:一系列我们与业务层交互的类。

View Model:1.将Model中需要显示的部分,转化为对View友好的数据。    2.管理View与View之间的交互。

依赖关系如上图所示,V依赖于VM,反之不应该成立,VM依赖于M,反之亦不应成立。

在完成了对数据绑定、命令、数据模板的理解后,我们再重新回来解释MVVM。


DataContext

WPF学习03:Element Binding中,我们只研究了如何在控件间实现数据绑定,在不指定ElementName时,Binding会在Source与RelativeSource也没有设置的情况下,一级一级的寻找DataContext,直到找到。

例子:

<StackPanel HorizontalAlignment="Center" TextBlock.Foreground="#019AFF" DataContext="{x:Static Colors.White}">
    <!--指定Path,绑定对象的某个属性-->
    <TextBlock Text="{Binding Path=R}"></TextBlock>
    <TextBlock Text="{Binding Path=G}"></TextBlock>
    <TextBlock Text="{Binding Path=B}"></TextBlock>
    <!--不指定Path,绑定整个对象-->
    <TextBlock Text="{Binding}"></TextBlock>
</StackPanel>

比较常用的情况下,我们将DataContext设置在最顶层元素,一般情况下为Window。

我们可以在后台代码中配置DataContext:

public class Person
{
    private Int32 _age;

    public Int32 Age
    {
        get { return _age; }
        set { _age = value; }
    }

    private String _name;

    public String Name
    {
        get { return _name; }
        set { _name = value; }
    }
}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    person = new Person() { Name = "Kenny", Age = 30 };
    this.DataContext = person;
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    person.Name = "John Locke";
    person.Age = 40;
}

XAML做的改动:

<StackPanel HorizontalAlignment="Center" TextBlock.Foreground="#019AFF">
    <TextBlock Text="{Binding Path=Name}"></TextBlock>
    <TextBlock Text="{Binding Path=Age}"></TextBlock>
    <Button Click="Button_Click">Click me</Button>
</StackPanel>

效果如下:

我们可以看到的确显示了期望值,但是如果点击按键的话,是看不到任何变化的,接下来即解释原因与解决方法。


INotifyPropertyChanged

WPF内建的数据绑定机制中,Dependency Property不需额外做任何配置,即可在一般情况下建立数据绑定关系。WPF自建控件的各类属性都是依赖属性经传统的.Net属性包装而成。

如果我们希望将数据绑定的源设为我们自己定义的对象的属性,且该属性不为依赖属性,那么就只有靠实现INotifyPropertyChanged接口,并在相应的属性改变时调用PropertyChanged事件以通知目标元素。

我们将之前的后台代码做如下的改动:

public class Person : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private Int32 _age;
    public Int32 Age
    {
        get { return _age; }
        set {
            _age = value;
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this,new PropertyChangedEventArgs("Age"));
        }
    }

    private String _name;
    public String Name
    {
        get { return _name; }
        set {
            _name = value;
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Name"));
        }
    }

}

效果如下:


IValueConverter

某些特殊的时候,源属性与目标属性是无法连接,需要进行转换,这时,就需要用到ValueConverter.直接给个例子:

数据绑定实现根据年龄不同,文字显示同颜色,效果:

XAML代码:

<TextBlock Text="{Binding Path=Name}"></TextBlock>
<TextBlock Name="AgeTextBlock" Text="{Binding Path=Age}">
<TextBlock.Foreground>
        <Binding Path="Age">
            <Binding.Converter>
                <local:TextBlockColorValueConverter></local:TextBlockColorValueConverter>
            </Binding.Converter>
        </Binding>
</TextBlock.Foreground>
</TextBlock>

后台代码:

[ValueConversion(typeof(Boolean), typeof(Int32))]
public class TextBlockColorValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((int)value < 18)
            return new SolidColorBrush(Colors.Violet);
        else
            return new SolidColorBrush(Colors.Red);
    }

    //这里用不上数据从目标返回源,故返回null
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

数据绑定的后台代码实现

之前的数据绑定都是用XAML实现的,在此给出后台代码实现数据绑定的方法,实现刚才的例子:

首先给两个控件标个Name,并去掉之前的所有绑定相关代码:

<TextBlock Name="NameTextBlock"></TextBlock>
<TextBlock Name="AgeTextBlock"></TextBlock>

后台代码:

var bind = new Binding("Name")
{
    Source = person,
};
NameTextBlock.SetBinding(TextBlock.TextProperty, bind);
bind = new Binding("Age")
{
    Source = person,
};
AgeTextBlock.SetBinding(TextBlock.TextProperty, bind);
bind = new Binding("Age")
{
    Source = person,
    Converter = new TextBlockColorValueConverter()
};
AgeTextBlock.SetBinding(TextBlock.ForegroundProperty, bind);

效果与之前一致。

时间: 2024-08-29 07:00:25

WPF学习07:MVVM 预备知识之数据绑定的相关文章

WPF学习08:MVVM 预备知识之COMMAND

WPF内建的COMMAND是GOF 提出的23种设计模式中,命令模式的实现. 本文是WPF学习07:MVVM 预备知识之数据绑定的后续,将说明实现COMMAND的三个重点:ICommand  CommandManager InputBindings COMMAND简介 一般情况我们应用设计如下,一个个控件的各类Handler直接关心了如何实现具体的应用逻辑. 借助COMMAND,我们将具体实现的应用逻辑放在COMMAND中实现,控件只需要绑定相应的COMMAND,而无需关心应用逻辑,从而实现界面

java学习的一些预备知识和一些简单的java小程序

1先了解一些基本的dos命令 dir     ·列出当前目录下的文件和文件夹 md      创建文件夹 rd        删除文件夹(文件下没有子文件) del "文件夹名"    可以删除带子文件的文件夹 cd..    使文件夹目录一层一层后退 cd\    回到根目录 haha>1.txt    创建文档,并将haha写入到1.txt文档中 del 1.txt    删除文件(不走回收站) del  *.txt    只删除txt文件 exit    退出命令行 set

[傅里叶变换及其应用学习笔记] 一. 预备知识

这份是本人的学习笔记,课程为网易公开课上的斯坦福大学公开课:傅里叶变换及其应用. 本课程学习路线: 从傅里叶级数开始,后续过渡到傅里叶变换. 扼要描述 傅里叶级数(fourier series),几乎等同于周期性现象的学习. 傅里叶变换(fourier transform),可作为傅里叶级数的极限情况,是对非周期性现象的数学分析. 两者间的共同点 分析(analysis),分解一个信号(函数),把它拆分成一系列组成部分,并希望这些组成部分比复杂的原始信号(函数)简单. 合成(synthesis)

WPF学习09:数据绑定之 Binding to List Data

从WPF学习03:Element Binding我们可以实现控件属性与控件属性的绑定. 从WPF学习07:MVVM 预备知识之数据绑定 我们可以实现控件属性与自定义对象属性的绑定. 而以上两个功能在实际应用中还是不够的,我们经常需要将列表数据与控件属性进行绑定. 例子 ListBox切换人物,下面两个文本框跟随切换,很常用的功能. XAML代码: <Window x:Class="DataTemplate.MainWindow" xmlns="http://schema

WPF中使用MVVM模式进行简单的数据绑定

计划慢慢整理自己在WPF学习和工作应用中的一些心得和想法,先从一个简单的用法说起 在WPF中,XAML标记语言中绑定数据,而数据源就是指定为ViewModel类,而非界面本身的逻辑代码类 这样一定程度上达到界面与业务逻辑分离的思想,UI层只需要对ViewModel类进行依赖,只要ViewModel公开出来的属性不变,界面层就不用根据业务逻辑变化而进行修改 这大概就是MVVM模式的一个基本出发点,配合WPF的依赖属性和命令等结合使用,会有更复杂的用法及更好的效果 这里先从一个简单的数据绑定用法为例

WPF学习11:基于MVVM Light 制作图形编辑工具(2)

本文是WPF学习10:基于MVVM Light 制作图形编辑工具(1)的后续 这一次的目标是完成 两个任务. 画布 效果: 画布上,选择的方案是:直接以Image作为画布,使用RenderTargetBitmap绑定为Image的图片源,这样可以为后续的导出图片功能提供很大的便利. 对拖动栏XAML进行如下修改: <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="

MvvmLight学习篇—— Mvvm Light Toolkit for wpf/silverlight系列(导航)

一.Mvvm Light Toolkit for wpf/silverlight系列之准备工作 二.Mvvm Light Toolkit for wpf/silverlight系列之搭建mvvmlight开发框架 三.Mvvm Light Toolkit for wpf/silverlight系列之数据绑定 四.Mvvm Light Toolkit for wpf/silverlight系列之Command和Events 五.Mvvm Light Toolkit for wpf/silverli

最大熵学习笔记(一)预备知识

  生活中我们经常听到人们说"不要把鸡蛋放到一个篮子里",这样可以降低风险.深究一下,这是为什么呢?其实,这里边包含了所谓的最大熵原理(The Maximum Entropy Principle).本文为一则读书笔记,将对最大熵原理以及由此导出的最大熵模型进行介绍,重点给出其中所涉及数学公式的理解和详细推导. 相关链接 最大熵学习笔记(零)目录和引言 最大熵学习笔记(一)预备知识 最大熵学习笔记(二)最大熵原理 最大熵学习笔记(三)最大熵模型 最大熵学习笔记(四)模型求解 最大熵学习笔

android金阳光自动化测试——学习历程:自动化预备知识上&amp;&amp;下

章节:自动化基础篇——自动化预备知识上&&下 网易云课堂: 上:http://study.163.com/course/courseLearn.htm?courseId=712011#/learn/video?lessonId=877113&courseId=712011 下:http://study.163.com/course/courseLearn.htm?courseId=712011#/learn/video?lessonId=877114&courseId=71