如果你不知道MVVM模式,我建议你先了解一下MVVM模式,至少要知道实现该模式的意图是什么。

那么我主要通过我认为是已经算是比较简单的例子进行讲解这个模式,当然后面我们会在这个例子的基础上一步一步的进行扩展。

先来看一看我们的项目架构:

很典型的MVVM的分层方式

我们先来构建Model,首先在Person.cs中简单声明了一个类型

public class Person

{

public int age  { get; set; }

public string name { get; set;}

}

类型定义好后,我们在Persons.cs中得到一个Person的集合

public class Persons

{

public List<Person> person;

public List<Person> getPerson()

{

person = new List<Person>()

{

new Person{name = "Tom",  age = 21 },

new Person{name = "Jack", age = 22 },

new Person{name = "Rose", age = 23 },

};

return person;

}

}

那么这里我们就简单的完成了Model的工作,下面开始完成ViewModel部分的工作

public class PageViewModel

{

public List<Person> Human { get; set; }

public PageViewModel()

{

Human = new Persons().getPerson();

}

}

ViewModel也设计的很简单,只是简单的获取了之前定义的集合。

下面就是PageView部分了,这里用DataGrid进行显示数据

<data:DataGrid AutoGenerateColumns="False" Height="200" ItemsSource="{Binding Path=Human}" HorizontalAlignment="Left" Margin="36,51,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="200">

<data:DataGrid.Columns>

<data:DataGridTemplateColumn>

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<StackPanel>

<TextBlock Height="23" HorizontalAlignment="Left" Name="textBlock1" Text="{Binding name}" VerticalAlignment="Top" />

<TextBlock Height="23" HorizontalAlignment="Left" Name="textBlock2" Text="{Binding age}" VerticalAlignment="Top" />

</StackPanel>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

</data:DataGrid.Columns>

</data:DataGrid>

这里我们将DataGrid的源设为Human,这样我们就完成了MVVM模式各个层次的初步构建,关键的问题是怎样将这几个部分有效的联系起来

我们将PageView,PageViewModel引入到MainPage中

<UserControl x:Class="UseMVVMInApp.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

xmlns:viw="clr-namespace:UseMVVMInApp.View"

xmlns:vmmodel="clr-namespace:UseMVVMInApp.ViewModel"

d:DesignHeight="300" d:DesignWidth="400">

<UserControl.Resources>

<vmmodel:PageViewModel x:Key="vm"></vmmodel:PageViewModel>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource vm}" >

<viw:PageView></viw:PageView>

</Grid>

</UserControl>

这里的工作就是将PageViewModel声明为一个资源,然后通过页面引用它,这样就实现了我们所谓的MVVM模式。

当然了,这个例子是很简单的,似乎用MVVM模式未免小题大作,但是实际上,页面与逻辑分离的情况下,我们改动其中任何一个部分都是比较清楚的。

一、Silverlight中使用MVVM(一)——基础的更多相关文章

  1. Silverlight中使用MVVM(1)--基础

    Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...

  2. Silverlight中使用MVVM(4)

    Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...

  3. Silverlight中使用MVVM(3)

    Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...

  4. Silverlight中使用MVVM(2)

    Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...

  5. Silverlight中使用MVVM(1)

    Silverlight中使用MVVM(1)   Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 ...

  6. 三、Silverlight中使用MVVM(三)——进阶

    这篇主要引申出Command结合MVVM模式在应用程序中的使用 我们要做出的效果是这样的 就是提供了一个简单的查询功能将结果绑定到DataGrid中,在前面的基础上,这个部分相对比较容易实现了 我们在 ...

  7. Silverlight中在MVVM模式下对DatagridRow选择控件封装

    在项目中,凡是涉及到表格的地方用的最多的控件,自然少不了DataGrid的身影,它明了的展示各种数据让人十分喜欢.现在要实现一个功能,使DataGrid具有全选和项选中的功能,如果在传统后台代码中完成 ...

  8. Silverlight中使用MVVM(2)-(提高)

    在第一篇文章中的示例中,我们已经简单的了解了应用MVVM模式的流程,我的本意是你已经了解了一点MVVM的概念,然后又没有一个较好的例子学习,可以跟着我一起学习MVVM模式,所以这个部分,都是没有理论知 ...

  9. 二、Silverlight中使用MVVM(二)——提高

    在第一篇文章中的示例中,我们已经简单的了解了应用MVVM模式的流程,我的本意是你已经了解了一点MVVM的概念,然后又没有一个较好的例子学习,可以跟着我一起学习MVVM模式,所以这个部分,都是没有理论知 ...

随机推荐

  1. Javascript&Html-延迟调用和间歇调用

    Javascript&Html-延迟调用和间歇调用 Javascript 是一种单线程语言,所有的javascript任务都会放到一个任务列表中,这些javascript任务会按照插入到列表中 ...

  2. java网络编程学习笔记(四):线程池的实现

    package QQ; import java.util.LinkedList; /** * Created by hu on 2015/11/9. */ public class ThreadPoo ...

  3. android的布局-----TableLayout(表格布局)

    学习导图 (1)TableLayout的相关简介 java的swing编程和html中经常会使用到表格,可见表格的应用开发中使用还是比较多的,同样android也为我们提供这样的布局方式. (2)如何 ...

  4. 让你的qstardict读单词

    作为编程行当的人员,英语是躲不掉的,很多资料英文更加有效,字典就显得尤为重要,我希望字典不但能查到中文意思,还能发生,那就跟我来吧: 一.安装字典程序: pacman -S qstartdic sox ...

  5. 反射$change属性问题

    写DB框架的时候,使用反射获取属性的时候,多了一个$change属性,当场一脸懵比.   stackoverflow 发现是Android Studio2.0的.Instant Run 的问题.  解 ...

  6. MariaDB+Galera+Haproxy+Keepalived搭建集群

    1.MariaDB Galera Cluster介绍 MariaDB Galera Cluster是MariaDB同步多主机集群,它仅支持XtraDB/InnoDB存储引擎,在MySQLInnoDB存 ...

  7. NOIP2016模拟赛三 Problem B: 神奇的树

    题面 Description 有一棵神奇的树.这棵树有N个节点,在每个节点上都有宝藏,每个宝藏价值V[i]金币:对于每条边,每经过一次都要花费C[i]金币. 值得注意的是,每个宝藏只能领取一次(也可以 ...

  8. XCode设置竖屏

    选中你的项目,在General这个标签内,Deoployment info的这个分组,有一个Device Orientation 标签,内有一个Portrait的选项,选中是竖屏,取消选中是横屏

  9. 深入理解OAuth2.0 XSS CSRF CORS 原理

    基于Token的WEB后台认证机制 http://www.cnblogs.com/xiekeli/p/5607107.html 深入理解OAuth2.0协议http://blog.csdn.net/s ...

  10. 简单便捷的纯PHP网盘程序 Veno File Manager 2.6.3(VFM2)

    体验过很多国外网盘程序,例如:Owncloud.Bedrive.YetiShare.XFilesharing.uCloud.Cloudshare 等等,诸如此类,VFM2与这些臃肿的商用或非商用来的程 ...