Silverlight中的MVVM框架入门(以MVVM Light Toolkit为例)
2011-11-16 16:55
399 查看
在本文将以MVVM Light Toolkit为例讲解MVVM框架在现实中的使用入门,首先我们在http://mvvmlight.codeplex.com/下载它的MVVM框架下来。也可以通过 http://files.cnblogs.com/chengxingliang/GalaSoft.MvvmLight.V3.rar 下载MVVM Light Toolkit。然后我们安装这个安装包,然后重新打开VS2010,新建一个项目,如下图所示:
![](http://pic002.cnblogs.com/images/2011/140041/2011080715402389.jpg)
Tip:MVVM分为Model、ViewMode、View三层。
•Model是实体类层,它存放所有需要用到的实体类。
•ViewMode层是逻辑层,操作所有Model层和View界面层的逻辑运算并且作为一个大的实体类,提供属性绑定到View层上面去。
•View层是界面显示层,只需要它的Xaml代码去绑定相应的ViewMode层的属性即可。
下面我们来看新建成功的项目结构如下:
![](http://pic002.cnblogs.com/images/2011/140041/2011080715403683.jpg)
一、在这里我们先来看MainPage.xaml中的代码,在这里绑定的MainPage.xaml是View层,它绑定上了ViewModel层,也就是MainViewModel.cs类
二、然后我们看ViewModel层,在这里我们申明了一些string属性以绑定到View层得显示内容上,然后对于鼠标的点击事件采用Command命令传递事件和处理方法,并且设置绑定。这样我们可以直接将前台的点击事件等和后台分离,并且我们可以继承INotifyPropertyChanged接口,以让ViewModel层的属性被改变的时候,也反映到View层,在Command方法中改变ViewModel层的属性即可改变View层的前台显示。其具体的详解在下面的代码中已经给出。
三、在这里我们没有使用到Model层,它用于构造实体集合以绑定诸如DataGrid之类的控件。
最后我们来看实例的运行效果如下,如需源码请点击 MvvmLight1.rar 下载。
![](http://pic002.cnblogs.com/images/2011/140041/2011080715572155.jpg)
分类: Silverlight实用窍门序列
![](http://pic002.cnblogs.com/images/2011/140041/2011080715402389.jpg)
Tip:MVVM分为Model、ViewMode、View三层。
•Model是实体类层,它存放所有需要用到的实体类。
•ViewMode层是逻辑层,操作所有Model层和View界面层的逻辑运算并且作为一个大的实体类,提供属性绑定到View层上面去。
•View层是界面显示层,只需要它的Xaml代码去绑定相应的ViewMode层的属性即可。
下面我们来看新建成功的项目结构如下:
![](http://pic002.cnblogs.com/images/2011/140041/2011080715403683.jpg)
一、在这里我们先来看MainPage.xaml中的代码,在这里绑定的MainPage.xaml是View层,它绑定上了ViewModel层,也就是MainViewModel.cs类
<UserControl x:Class="MvvmLight1.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" Height="300" Width="300" DataContext="{Binding Main, Source={StaticResource Locator}}"> <!--在这里绑定App.xaml中的静态资源,以连接MainViewModel类(ViewMode层) MainPage.xaml代码为View层--> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Skins/MainSkin.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <TextBlock FontSize="36" FontWeight="Bold" Foreground="Purple" Text="{Binding Welcome}" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Margin="12,25,20,171"/> <Button Content="{Binding BtnContent}" Height="23" HorizontalAlignment="Left" Margin="12,178,0,0" Command="{Binding ShowMessage}" Name="button1" VerticalAlignment="Top" Width="75"/> <Button Content="点我改变文字" Height="23" HorizontalAlignment="Left" Command="{Binding ChangeText}" Margin="187,178,0,0" Name="button2" VerticalAlignment="Top" Width="75"/> </Grid> </UserControl>
二、然后我们看ViewModel层,在这里我们申明了一些string属性以绑定到View层得显示内容上,然后对于鼠标的点击事件采用Command命令传递事件和处理方法,并且设置绑定。这样我们可以直接将前台的点击事件等和后台分离,并且我们可以继承INotifyPropertyChanged接口,以让ViewModel层的属性被改变的时候,也反映到View层,在Command方法中改变ViewModel层的属性即可改变View层的前台显示。其具体的详解在下面的代码中已经给出。
using GalaSoft.MvvmLight; using System.Windows.Input; using GalaSoft.MvvmLight.Command; using System.Windows; using System.ComponentModel; namespace MvvmLight1.ViewModel { ///<summary> /// This class contains properties that the main View can data bind to. ///<para> /// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel. ///</para> ///<para> /// You can also use Blend to data bind with the tool's support. ///</para> ///<para> /// See http://www.galasoft.ch/mvvm/getstarted ///</para> ///</summary> publicclass MainViewModel : ViewModelBase, INotifyPropertyChanged { publicstring Welcome { get { return"欢迎使用MVVM Light! "; } } ///<summary> /// 类初始化 ///</summary> public MainViewModel() { _btnContent ="点击我"; RegistCommand(); } //A.对于属性的绑定 privatestring _btnContent; publicstring BtnContent { set { _btnContent = value; NotifyPropertyChanged("BtnContent"); } get { return _btnContent; } } //B.1申明对于点击事件的绑定 public RelayCommand ShowMessage { get; set; } //使用C步骤的注册,将Command和需要运行的方法联系起来。 privatevoid showmsg() { MessageBox.Show("你成功的将命令绑定到界面层!"); } //B.2改变界面上的控件显示文字 public RelayCommand ChangeText { get; set; } //执行改变文字操作 privatevoid changeTxt() { BtnContent ="我已经被改变了"; } //是否可以改变文字 privatebool canchangeTxt() { if (BtnContent =="点击我") { returntrue; } else { returnfalse; } } //C.对于所有的事件进行注册 privatevoid RegistCommand() { //C.1指定需要执行的函数showmsg() ShowMessage =new RelayCommand(() => showmsg()); //先执行canchangeTxt()函数,验证是否可以改变文字,如果可以改变则执行changeTxt()函数 ChangeText =new RelayCommand(() => changeTxt(), () => canchangeTxt()); } publicevent PropertyChangedEventHandler PropertyChanged; publicvoid NotifyPropertyChanged(string propertyName) { if (PropertyChanged !=null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } }
三、在这里我们没有使用到Model层,它用于构造实体集合以绑定诸如DataGrid之类的控件。
最后我们来看实例的运行效果如下,如需源码请点击 MvvmLight1.rar 下载。
![](http://pic002.cnblogs.com/images/2011/140041/2011080715572155.jpg)
分类: Silverlight实用窍门序列
相关文章推荐
- Silverlight实用窍门系列:52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)
- Silverlight实用窍门系列:52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)
- Silverlight实用窍门系列:52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)
- Mvvm Light Toolkit for wpf/silverlight系列之搭建mvvmlight开发框架 .
- Mvvm Light Toolkit for wpf/silverlight 入门博客
- Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架
- Mvvm Light Toolkit for wpf/silverlight系列之搭建mvvmlight开发框架
- Mvvm Light Toolkit for wpf/silverlight系列之Command和Events
- MvvmLight框架使用入门(一)
- MvvmLight框架使用入门(三)
- Mvvm Light Toolkit for wpf/silverlight系列之Command和Events
- Mvvm Light Toolkit for wpf/silverlight系列之Messenger
- silverlight 学习笔记 (六): MVVM Light Toolkits 之 Messager
- MvvmLight学习篇—— Mvvm Light Toolkit for wpf/silverlight系列(子林)
- MvvmLight框架使用入门(一)
- silverlight 学习笔记 (六): MVVM Light Toolkits 之 Messager
- Mvvm Light Toolkit 入门
- Mvvm Light Toolkit for wpf/silverlight系列之Command和Events
- MvvmLight框架使用入门(二)
- Mvvm Light Toolkit for wpf/silverlight系列之Command和Events