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