Silverlight中使用MVVM(3)—进阶

这篇主要引申出Command结合MVVM模式在应用程序中的使用

我们要做出的效果是这样的

就是提供了一个简单的查询功能将结果绑定到DataGrid中,在前面的基础上,这个部分相对比较容易实现了

我们在PageViewModel中添加两个属性

         private string _searchText;
        //查询关键字
        public string SearchText
        {
            get { return _searchText; }
            set { _searchText = value;
            if (PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs("SearchText"));
            }
            }
        }
        private List<Person> _resultText;
        //查询结果
        public List<Person> ResultText
        {
            get { return _resultText; }
            set { _resultText = value;
            if (PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs("ResultText"));
            }
            }
        }

这两个属性我们后面将绑定到View中,下面实现查询方法

        //查询方法
        public void Searhing()
        {
            List<Person> person = null;
            if (!string.IsNullOrEmpty(SearchText))
            {
                person = new List<Person>();
                foreach (Person p in Human)
                {
                    if (p.name.Contains(SearchText))
                    {
                        person.Add(p);
                    }
                }
            }
            if (person != null)
            {
                ResultText = person;
            }
        }

我们这里就是通过查询到的集合person赋值给查询结果,这两步比较好理解,然后我们需要在ViewModel中声明一个Command对象来执行页面的单击事件

        private ICommand _cmd;
        //声明Command
        public ICommand Cmd
        {
            get { return _cmd; }
        }
        public PageViewModel()
        {
            Human = new List<Person>();
            Human = new Persons().getPerson();
            _cmd = new QueryCommand(this);
        }

在构造函数中实例了Command对象,在这里我们仍然有一步工作需要完成,就是对QueryCommand的实现

         public class QueryCommand:ICommand
       {
        public PageViewModel _pageVM = null;
        public QueryCommand(PageViewModel vm)
        {
            _pageVM = vm;
        }
        public bool CanExecute(object parameter)
        {
            return true;
        }
        public event EventHandler CanExecuteChanged
        {
            add { }
            remove { }
        }
        public void Execute(object parameter)
        {
            _pageVM.Searhing();
        }
      }

你可以看出来Command类是用ViewModel来实例的,自然这里面由Execute()完成查询这个工作。

最后我们将UI上做点小小的变动

        <data:DataGrid ItemsSource="{Binding ResultText}" Height="200" HorizontalAlignment="Left" Margin="12,88,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="200" />
        <TextBox Height="23" Text="{Binding SearchText,Mode=TwoWay}" HorizontalAlignment="Left" Margin="12,46,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
        <Button Content="查询" Height="23" HorizontalAlignment="Left" Margin="137,46,0,0" Name="btnSearch" VerticalAlignment="Top" Width="75" />

我们将DataGrid的ItemSource属性绑定到ResultText上,对于输入框我们则将其绑定到SearchText属性上,这样我们就完成了大部分的工作

下面就是将View和ViewModel两者之间如何关联了,因为Sl3中不支持Commnad这个属性,所以这里我们就在后台进行声明

        PageViewModel pageviewmodel=new PageViewModel();
        public PageView()
        {
            InitializeComponent();
            this.btnSearch.Click += new RoutedEventHandler(btnSearch_Click);
            this.DataContext =pageviewmodel;
        }
        void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            pageviewmodel.SearchText = this.textBox1.Text.Trim();
            pageviewmodel.Cmd.Execute(null);
        }

这一步完成后,我们就实现了开头的功能,这个功能虽然实现了,但是你可能会发现一个问题,我们将Searching()的执行写在了QueryCommand.Execute()中,

在这种情况下我们需要为每一个方法声明一个Command类,自然这不是我们期望做的事情,所以我们下面将这个问题优化一下:

我们先声明一个RelayCommand类

       public class RelayCommand : ICommand
      {
        private Action _handler;
        public RelayCommand(Action handler)
        {
            _handler = handler;
        }
        private bool _isEnabled;
        public bool IsEnabled
        {
            get { return _isEnabled; }
            set
            {
                if (value != _isEnabled)
                {
                    _isEnabled = value;
                    if (CanExecuteChanged != null)
                    {
                        CanExecuteChanged(this, EventArgs.Empty);
                    }
                }
            }
        }
        public bool CanExecute(object parameter)
        {
            return IsEnabled;
        }
        public event EventHandler CanExecuteChanged;
        public void Execute(object parameter)
        {
            _handler();
        }

这里RelayCommand类可以作为一个派生类用于与页面Command的实现,那么ViewModel中,我们声明一个ICommand属性

        private readonly ICommand _searchCommand;
        public ICommand SearchCommand
        {
            get { return _searchCommand; }
        } 

自然我们需要将构造函数变动一下

        public PageViewModel()
        {
            Human = new List<Person>();
            Human = new Persons().getPerson();
            _searchCommand = new RelayCommand(Searhing) { IsEnabled = true };
        }

通过第3行代码,我们其实就是将ViewModel与Command分离了,最后我们将button事件代码修改一下

        void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            pageviewmodel.SearchText = this.textBox1.Text.Trim();
            pageviewmodel.SearchCommand.Execute(null);
        }

这样的话,看起来似乎优雅了点,关于这部分内容网上资源也比较多,就不多解释了。下篇我将结合MVVM与Command实现一个简单的CRUD操作

代码下载:CommandInMVVMSL3+VS2010

Silverlight中使用MVVM(3)—进阶,布布扣,bubuko.com

时间: 2024-12-26 07:04:20

Silverlight中使用MVVM(3)—进阶的相关文章

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

Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)-提高 Silverlight中使用MVVM(3)-进阶 Silverlight中使用MVVM(4)-演练 这是我第一篇关于设计模式方面的文章,以前除了对单例模式等几个常用的模式有所研究之外,对设计模式不是太重视,总觉得要到一定的程度才需要接触, 最近的项目中使用了MVVM模式,所以这段时间查阅了大量这方面模式的文章,理论上的东西大家都说的比较好,这里我也不大谈MVVM模式的优势了,只是 美中不足的是大

Silverlight中使用MVVM(4)—演练

本来打算用MVVM实现CRUD操作的,这方面例子网上资源还挺多的,毕竟CRUD算是基本功了,因为最近已经开始学习Cailburn框架了,感觉时间 挺紧的,这篇就实现其中的更新操作吧.         功能很明确,当我们更改DataGrid中的CheckBox时,将源中当前发生变化的数据项在界面上显示出来.我们仍然在前面项目的基础上实现这个功能 首先我们需要给实体Person类添加一个Bool的属性,因为这里我们只对这个属性值操作,所以对于age,name属性也就无必要实现更改通知了 public

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

在第一篇文章中的示例中,我们已经简单的了解了应用MVVM模式的流程,我的本意是你已经了解了一点MVVM的概念,然后又没有一个较好的例子学习,可以跟着我一起学习MVVM模式,所以这个部分,都是没有理论知识的,当然整个例子学完后,我们会回过头探讨一下,将其总结出来. 现 在我们主要在前面的示例上进行扩展,前面的示例中我们主要是将一个源对象绑定到DataGrid中的,接下来我们继续使用MVVM模式,将 DataGrid选择行的变化体现界面中,其实通过这个需求变化,你会发现UI与逻辑分离带来的优势,尽管

Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别

问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A.B.C.D.E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有使用了这个字段的控件呢? 回答:使用Element to Element Binding,将AgeFiled绑定到A控件,然后再让B.C.D.E控件绑定A控件的使用AgeField字段的属性. 例如:字段(AgeField)的数据是年龄大小,A.B.C.D.E控件分别是Ellipse.Label.S

js架构设计模式——理解javascript中的MVVM开发模式

理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverligh

angular中的MVVM模式

在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(Whatever)框架,但angular框架整体上更接近MVVM模式.下面是Igor Minar发布在Google+ https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV的文章内容: MVC vs MVVM vs MVP. What a controver

转 。。理解javascript中的MVVM开发模式

MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverlight 和 t ZK framework,Adobe Flex. 对这种模式的实现,大部分都是通过在view层声明数据绑定来和其他层分离的,这样就方便了

ArcGIS API for Silverlight中加载Google地形图(瓦片图)

原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS API for Silverlight中加载Google地 形图.先上一个图,初步制作,待后续继续改进 ArcGIS API for Silverlight 中的ArcGISTiledMapServiceLayer图层,继承自TiledMapServiceLayer.如果想实现自己的缓存地图图 层

[Win10]1 WPF和WP8 Silverlight中的导航问题

一.Frame.Page框架的相关介绍 1.Frame类: 继承层次结构 System.Object   System.Windows.Threading.DispatcherObject     System.Windows.DependencyObject       System.Windows.Media.Visual         System.Windows.UIElement           System.Windows.FrameworkElement