管窥MVVMLight Command参数绑定和事件传递

前言

由于在实际项目中,业务功能的增加导致软件开发规模在逐渐变大,所以我准备找个Silverlight框架来组织当前项目中的文件,以期能够让后续的业务功能增添和维护更加容易一些。无意中,我在这篇文章中看到了当前Silverlight下所有的框架的评测:Discover and compare existing MVVM frameworks !,当我看到MvvmLight toolkit在各方面都比较完备的时候,于是决定选择这个框架:

Codeplex网站上,下载了MVVM Light Toolkit V4 RTM这个版本,因为我用的是vs2010,所以我下载了支持当前机器IDE的版本。

新建项目,选择MvvmLight(SL4),之后我们就可以看到项目结构了:

其中:

Design文件夹中的文件主要提供设计时运行支持

Model文件夹则放置了富实体模型

Skins文件夹则放置了样式文件定义

ViewModel文件夹则放置了ViewModel对象,其实MainViewModel和MainPage是一对一的(ViewMoel-View)关系.二者的映射通过ViewModelLocator进行。

MainPage.xaml就是我们的视图页面

下面我们就以例子来演示MvvmLight Toolkit中是如何实现MVVM模式,如何绑定命令,如何进行事件消息传递的。

首先,在这个框架中,MVVM模式的入口点为ViewModelLocator类,在这个类中,可以定义多个ViewModel属性,并且每个属性都可以通过ServiceLocator.Current.GetInstance方法进行映射,以便于暴露给前台绑定。同时,在新增一个ViewModel类的时候,一定要在其提供的SimpleIoc对象容器中进行注册,以便于能够通过IOC的方式获取其实例。

做完映射后,就是我们的ViewModel对象了。它需要继承自ViewModelBase类,这个类封装了ICommand,INotifypropertyChanged等接口,使用起来很方便。比如可以用RaisePropertyChanged直接来抛出变更通知。

之后就是View了,在View中,我们需要先对DataContext进行绑定:

DataContext="{Binding Main, Source={StaticResource Locator}}"

然后就可以随心所欲的操作了。

然后,我们来讲解下绑定命令。

由于命令绑定是应用程序中必不可少的环节,所以这里我以 绑定无参事件,绑定一个参数事件,绑定多个参数事件来说明。

绑定无参事件:

  #region Command without parameters
        private RelayCommand showText;
        public RelayCommand ShowText
        {
            get
            {
                if (showText == null)
                    showText = new RelayCommand(ShowTextFunc);
                return showText;
            }
        }
        public RelayCommand PassEvent { get; set; }

        private void ShowTextFunc()
        {
            MessageBox.Show("I am RealyCommand!");
        }
        #endregion

上面代码就是绑定无参事件,在View上可以通过如下方式绑定:

 <Button Content="绑定无参事件"
 		 Command="{Binding ShowText}"
		 Height="23"
		 HorizontalAlignment="Left"
		 Margin="32,62,0,0"
		 Name="button1"
		 VerticalAlignment="Top"
		 Width="141" />

绑定一个参数事件:

 #region Command with a parameter
        private RelayCommand<int> showValue;
        public RelayCommand<int> ShowValue
        {
            get
            {
                if (showValue == null)
                    showValue = new RelayCommand<int>(x=>ShowValueFunc(x));
                return showValue;
            }
        }

        private int ShowValueFunc(int a)
        {
            int c = a + 10;
            MessageBox.Show(c.ToString());
            return c;
        }
        #endregion

上面的代码部分就是绑定一个参数的事件定义,我们来驱动view层:

<Button Content="绑定一个参数事件"
        Command="{Binding ShowValue}"
		CommandParameter="{Binding ElementName=textBox1,Path=Text,Converter={StaticResource IntConverter}}"
		Height="23"
		HorizontalAlignment="Left"
		Margin="32,103,0,0"
		Name="button2"
		VerticalAlignment="Top"
		Width="141" />

需要说明的是,上面代码示例中,CommandParameter的值来自于textBox1的Text属性中。这个值加上10以后返回。

如果遇到用户输入不是数字的情况,则通过IntConverter方法将用户输入格式化,然后返回:

public class IntConverter:IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int result;
            if(Int32.TryParse(value.ToString(),out result))
            {
                return result;
            }
            return "0";
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

绑定多个参数事件:

由于RelayCommand默认最多允许一个参数传递,所以这里如果想传递多个数据对象,只能够去构建自己的DTO了。

在Model文件夹新建一个BookItem类:

public class BookItem
    {
        public string BName { get; set; }
        public string BAuthor { get; set; }
    }

然后在ViewModel中进行如下控制:

 #region Command with multiple parameters
        private RelayCommand<BookItem> showBooks;
        public RelayCommand<BookItem> ShowBooks
        {
            get
            {
                if (showBooks == null)
                    showBooks = new RelayCommand<BookItem>(x=>ShowBooksFunc(x));
                return showBooks;
            }
        }

        private void ShowBooksFunc(BookItem bookItem)
        {
            MessageBox.Show(bookItem.BName+"|"+bookItem.BAuthor);
        }
        #endregion

驱动View层:

 <Button Command="{Binding ShowBooks}"
         Content="绑定多个参数事件"
		 Height="23"
		 HorizontalAlignment="Left"
		 Margin="32,141,0,0"
		 Name="button3"
		 VerticalAlignment="Top"
		 Width="141" >
            <Button.CommandParameter>
                <model:BookItem BName="testName" BAuthor="TestAuthor" ></model:BookItem>
            </Button.CommandParameter>
 </Button>

运行起来得时候,我们发现BookItem参数已经被自动赋值了。

ViewModel之间事件传递

最后需要讲解的是如何在ViewModel之间进行事件传递。由于在MVVMLight Toolkit中已经集成了Messenger对象,所以我们可以利用其很方便的进行事件传递,下面新建一个ChildWindow1.xaml子窗体,然后在ViewModelLocator中添加如下代码:

 public ChildViewModel Child
        {
            get
            {
                return ServiceLocator.Current.GetInstance<ChildViewModel>();
            }
        }
SimpleIoc.Default.Register<ChildViewModel>();

然后在ViewModel文件夹中新建一个ChildViewModel类,在其中添加如下代码:

 public class ChildViewModel:ViewModelBase
    {
        public ChildViewModel()
        {
            Messenger.Default.Register<BookItem>(this, message =>
            {
                MyText = message.BName + "|" + message.BAuthor;
            });
        }
        public string MyText { get; set; }
    }

由于我们传递的对象是从 MainViewModel到ChildViewModel,所以我们在MainViewModel中添加如下发送代码:

 #region Messenger communication cross page
        private RelayCommand showChildWindow;
        public RelayCommand ShowChildWindow
        {
            get
            {
                if (showChildWindow == null)
                    showChildWindow = new RelayCommand(ShowChildWindowFunc);
                return showChildWindow;
            }
        }

        private void ShowChildWindowFunc()
        {
            ChildWindow1 child = new ChildWindow1();
            child.Show();
            var bookItem = new BookItem() { BAuthor="TestAuthor",BName="TestName" };
            Messenger.Default.Send<BookItem>(bookItem);
        }
        #endregion

这样当运行起来的时候,我们就能看到效果了:

好了,暂时就到这里,后面我们再深入挖掘。

百度网盘下载

腾讯微盘下载

管窥MVVMLight Command参数绑定和事件传递

时间: 2024-08-29 11:26:53

管窥MVVMLight Command参数绑定和事件传递的相关文章

如何给html元素的onclick事件传递参数(即如何获取html标签的data-*属性)

最近好忙,吐个槽先... 现在做的一个小系统为了达到领导所说的很炫的效果有用到Metro UI CSS,但是因为如何给每个磁贴(div标签)的click事件传递参数折腾了蛮久(偶是菜鸟),后来终于找到一个解决方案即通过data-*属性,下面分别为jQuery和js实现: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <

关于javaScript注册事件传递参数的浅析

最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限.柜员类型权限.岗位权限,业务权限等等,并且要对这些权限要做多次的交集或者并集处理,页面上不得不用许多的javascript来进行控制.造成了这一功能模块的实现上javaScript代码比java代码负责的情况. 而现在又要给某银行开发一个保管箱管理系统,其核心功能块保管箱座管理以及保管箱管理,为实

将命令绑定到事件中(WPF)

转自链接(王旭博客 » WPF 在事件中绑定命令):http://blog.csdn.net/andrew_wx/article/details/37757187 (该文章是<关于 MVVMLight 设计模式系列>中的一节) 本文主要介绍如何在WPF中实现将命令绑定到事件中,很多情况下我们都需要在某个事件触发的时候才去触发命令,所以将命令绑定到事件上是非常有效的做法,下面我们来接着实现将命令绑定到事件中. WPF实现命令绑定到事件 使用 System.Windows.Interactivit

Atitit. &#160;Js 冒泡事件阻止&#160;事件捕获&#160;&#160;&#160;事件传递 &#160;事件代理

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 4. 事件代理3 5. 冒泡还是捕获?3 6. Js 冒泡事件阻止3 6.1. 返回false5 7. 事件冒泡 使处理函数有范围较大的触发面积,在“拖拽效果”脚本中是必须的5 8. refe6 8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6   1. 事

利刃 MVVMLight 5:绑定在表单验证上的应用

表单验证是MVVM体系中的重要一块.而绑定除了推动 Model-View-ViewModel (MVVM) 模式松散耦合 逻辑.数据 和 UI定义 的关系之外,还为业务数据验证方案提供强大而灵活的支持. WPF 中的数据绑定机制包括多个选项,可用于在创建可编辑视图时校验输入数据的有效性. 常见的表单验证机制有如下几种: 验证类型 说明 Exception 验证 通过在某个 Binding 对象上设置 ValidatesOnExceptions 属性,如果源对象属性设置已修改的值的过程中引发异常,

OGEngine学习笔记--- 事件传递

事件传递 Android中的事件在表现形式上有很多,如onTouch.onClick和onLongClick等,在具体微观上的表现形势有action_down.action_move和action_up等. 无论哪种事件表现类型,首先都是基于事件的传递模型.其实Android中的事件传递有点类似于JS中事件传递模型.都是基于先捕获然后冒泡的形式. 在OGEngine的API中,OGEngine负责捕获触摸事件,如果我们需要监听触摸事件,则需要向Scene注册. mScene.registerTo

jquery 元素绑定on事件

在选择元素上绑定一个或多个事件的事件处理函数. on()方法绑定事件处理程序到当前选定的jQuery对象中的元素.在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能.帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off(). 参数 events,[selector],[data],fnV1.7 events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click

JQuery事件——绑定多事件.on()和卸载事件.off()

绑定多事件.on()和卸载事件.off() 1   .on()绑定事件,通过空格分离传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法,可以通过第二对象或参数,当一个事件被触发时,要传递给事件处理函数 2   .on()绑定2个事件      $("elem").on("mousedown  mouseup",fn) 3   快捷方式与on的不同 on可以自定义事件名 多个事件绑定同一个函数 多个事件绑定不同函数 将数据传递到处理程序 4   事件

vue2.0中v-on绑定自定义事件的理解

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码: 1 <div id="counter-event-example"> 2 <p>{{ total }}</p>