MVVMLight绑定数据

  我们先新建一个WPF项目MVVMLightDemo,添加GalaSoft.MvvmLight.dll(没有可以自己下载)

  

  然后在项目中添加三个文件夹,如图:

    

  先添加我们的Model,在Model下新建一个类Student

  

using GalaSoft.MvvmLight;
using System.Collections.ObjectModel;

namespace MVVMLightDemo.Model
{
    public class Student : ObservableObject
    {
        private int stuNo;

        public int StuNo
        {
            get { return stuNo; }
            set { stuNo = value; RaisePropertyChanged(() => StuNo); }
        }
        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; RaisePropertyChanged(() => Name); }
        }

        public static ObservableCollection<Student> GetStudentList()
        {
            ObservableCollection<Student> list = new ObservableCollection<Student>();
            list.Add(new Student() { StuNo = 1, Name = "张三" });
            list.Add(new Student() { StuNo = 2, Name = "李四" });
            return list;
        }
    }
}

  注意:1.该类继承了ObservableObject,该类主要实现了属性变更通知接口,如我们用到的:RaisePropertyChanged 方法

     2.该类中的GetStudentList()方法只是为了得到数据,我们项目里一般都是从数据库查数据。

接着,我们在ViewModel下添加StudentViewModel文件,代码如下:

using GalaSoft.MvvmLight;
using MVVMLightDemo.Model;
using System.Collections.ObjectModel;

namespace MVVMLightDemo.ViewModel
{
    public class StudentViewModel : ViewModelBase
    {
        private ObservableCollection<Student> studentData;
        public ObservableCollection<Student> StudentData
        {
            get
            {
                return studentData;
            }
            set
            {
                studentData = value;
                RaisePropertyChanged(() => StudentData);
            }
        }

        public StudentViewModel()
        {
            studentData = Student.GetStudentList();
        }
    }
}

  注意:该类继承了ViewModelBase(ViewModelBase 也继承了ObservableObject),不要忘记using System.Collections.ObjectModel;

  我在该类的构造函数中,对 StudentData 进行了初始化,把数据给赋值上去了,那么在接下来的View中绑定 StudentData 才会出现数据。

最后,在View文件夹下添加StudentView.xaml文件。代码如下:

1 <Window x:Class="MVVMLightDemo.View.StudentView"
2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4         Title="StudentView" Height="300" Width="300">
5     <Grid>
6         <DataGrid Name="studentDataGrid" ItemsSource="{Binding Path=StudentData}"/>
7     </Grid>
8 </Window>

仅这样还不行,我们还需要让View与ViewModel关联起来,那么需要设置这个View的数据上下文。 在后台编写如下代码(也可在前台编写绑定DataContext)

 1 using System.Windows;
 2 using MVVMLightDemo.ViewModel;
 3
 4 namespace MVVMLightDemo.View
 5 {
 6     public partial class StudentView : Window
 7     {
 8         public StudentView()
 9         {
10             InitializeComponent();
11             this.DataContext = new StudentViewModel();
12         }
13     }
14 }

好了,到这里我们实现了MVVMLight的数据绑定,后面将在这个代码的基础上,介绍命令绑定。

装模作样的声明一下:本博文章若非特殊注明皆为原创,若需转载请保留原文链接(http://www.cnblogs.com/kest/p/4691423.html)及作者信息k_est

时间: 2024-10-11 06:04:18

MVVMLight绑定数据的相关文章

使用 MVVMLight 绑定数据

如果你还不知道如何在VS中加入MVVMLight的引用,那么建议你先翻阅这篇文章:在VS中安装/使用 MVVMLight 这篇文章主要是介绍如何使用MVVMLight来绑定数据到界面中(View),以此来了解MVVMLight的一些基础的类的用法. 文章底部会提供本示例的源码下载. MVVMLight绑定数据示例 好了,我们在新建了两个项目,分别是“MVVMLight的主程序” 与  “Model层”,运行的效果及解决方案结构如下: 其实很简单,就是绑定了一个数据源而已,编写的代码也不多,下面我

使用 MVVMLight 绑定数据(转)

MVVMLight绑定数据示例 好了,我们在新建了两个项目,分别是“MVVMLight的主程序” 与  “Model层”,运行的效果及解决方案结构如下: 其实很简单,就是绑定了一个数据源而已,编写的代码也不多,下面我们来一步一步的实现使用MVVMLight来绑定数据,并了解其中的细节. 如何实现? 我这里使用的是.NET 4.5  , 你可以使用至少4.0以上的版本来实现这个项目(选择4.0/4.5 要选择想要的MVVMLight的引用文件),下面依次建立两个项目来实现. 1.建立Model层的

GridView等表格模板列绑定数据的方法

//绑定GridView每一行中的CheckBoxList protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { CheckBoxList cbl = (CheckBoxList)e.Row.FindControl("ckbCheckBox"); if (cbl != null) {

关于angularJS绑定数据时自动转义html标签

折磨了两天,最后发现答案竟如此简单,不过辛苦还是值得的,毕竟为了弄明白这一点又学习了更多代码. angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-saniti

【 D3.js 入门系列 — 2 】 绑定数据和选择元素

1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定到一起. D3 中是通过 data() 和 datum() 函数来绑定数据的,最常用的是 data(). 现有如下 HTML 代码: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3

关于JQuery中$.data绑定数据原理或逻辑

问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个引用?下面通过以下小例子来测试下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test<

asp.net中Repeater中用ul li绑定数据

<ul class="tit1"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li> <p class="tit1-p-1"> <img style="border: 0px;" src="/image/biaozhi.jpg" /> &

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推.也可以不按照此顺序进行绑定,这就要用到data()的第二个参数.这个参数是一个函数,称为键函数(key function). 要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序.请看以下代码: <body> <!-- 三个空

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程 假设body中有三个段落元素p