Silverlight/MVVM

百度百科上这样解释Silverlight:

         微软Silverlight是一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验与富交互(RIA,Rich Interface Application)的网络交互程序。

 

        根据公司的项目需要及公司的安排,最近我也在学习Silverlight相关内容,昨天还参加了公司的技术培训,在培训过程中给我们引入了MVVM的概念,不难猜想出MVVM是Model-View-ViewModel的简写.MVVM框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性揉合进去，以应对客户日益复杂的需求变化。

 

         MVVM模式跟经典的MVP（Model-View-Presenter）模式很相似，除了你需要一个为View量身定制的model，这个model就是ViewModel。ViewModel包含所有由UI特定的接口和属性，并由一个 ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，所以需要在ViewModel 直接更新视图中编写相应代码。数据绑定系统还支持提供了标准化的方式传输到视图的验证错误的输入的验证。

     

        对于传统的web开发而言，如果我们想改变页面控件中的内容，我们会在后台代码中【或其他方式】找到该控件，然后对控件重新赋值。而MVVM模式的项目的不同之处在于,我们只需要操作VM 便可以更改界面上的信息而无需对界面控件进行操作;简单来讲就是,当我们在View页面绑定了一个VM实体模型,首次加载时我们可以看到信息呈现在界面上,如果我们想对页面上的信息进行分页,那么我们只需要对vm进行操作,而不需要对界面上的控件再次进行绑定操作；微软是如何做到这一点的呢，在这里，运用了事件。看完下面的例子便可以从中得到答案。

 

新建Silverlight的应用程序,如下图所示:

DataGridResultItem.cs文件代码:

/// <summary> /// 自定义列表的ViewModel /// </summary> public class DataGridResultItem : INotifyPropertyChanged { private Guid _id; /// <summary> /// 编号 /// </summary> public Guid ID { get { return _id; } set { _id = value; ChangeProperty("ID"); } } private string _name; /// <summary> /// 姓名 /// </summary> public string Name { get { return _name; } set { _name = value; ChangeProperty("Name"); } } private int _age; /// <summary> /// 年龄 /// </summary> public int Age { get { return _age; } set { _age = value; ChangeProperty("Age"); } } private bool _isExamPass; /// <summary> /// 是否考试及格 /// </summary> public bool IsExamPass { get { return _isExamPass; } set { _isExamPass = value; ChangeProperty("IsExamPass"); } } public event PropertyChangedEventHandler PropertyChanged; private void ChangeProperty(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }

在这里,需要解释一下代码第一行的继承接口INotifyPropertyChanged;

INotifyPropertyChanged中定义了了一个事件PropertyChanged,这个事件在属性值被更改时触发,所以在这里我们要写该事件的实现;

DataGridResultCollection.cs中的代码：

/// <summary> /// 自定义列表的ViewModel /// </summary> public class DataGridResultCollection :ObservableCollection<DataGridResultItem> { ///ObservableCollection实现了INotifyCollectionChanged接口中的方法，它是一个list ///类型的对象 private DataGridResultItem _selectedItem; /// <summary> /// 选中的项 /// </summary> public DataGridResultItem SelectedItem { get { return _selectedItem; } set { _selectedItem = value; OnPropertyChanged(new PropertyChangedEventArgs("SelectedItem")); } } }

MainPage.xaml中的代码：

<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication1.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="480" Width="640"> <toolkit:DockPanel LastChildFill="True"> <StackPanel toolkit:DockPanel.Dock="Top" Orientation="Horizontal"> <Button Name="BtnTest" Content="随机添加" ToolTipService.ToolTip="添加一行，内容随机。" Click="BtnAdd_Click" /> <Button Name="BtnRemoveItem" Content="删除信息" ToolTipService.ToolTip="删除不及格的行。" Click="BtnRemoveItem_Click" /> <Button Name="BtnShow" Content="{Binding Name, RelativeSource={RelativeSource Self}}" ToolTipService.ToolTip="显示当前先选中行的部分信息。" Click="BtnShow_Click" /> <Button Name="BtnNoSelect" Content="取消选中" ToolTipService.ToolTip="取消当前选中的行。" Click="BtnNoSelect_Click" /> <Button Name="BtnCheckAll" Content="全部及格" ToolTipService.ToolTip="勾选所有行的"及格"列。" Click="BtnCheckAll_Click" /> <Button Name="BtnChangePage" Content="改变页数" ToolTipService.ToolTip="跳转到第1页。" Click="BtnChangePage_Click" /> <Button Name="BtnEditItem" Content="变更内容" ToolTipService.ToolTip="改变当前选中行的内容。" Click="BtnEditItem_Click" /> <sdk:Label Content="编辑内容" ToolTipService.ToolTip="编辑string、int等简单列，直接单击两次列表中的单元格，编辑完成后对应的ViewModel自动改变。如果要编辑Guid等需要验证输入格式的复杂内容，可以考虑使用转换器或做个编辑窗口。" /> </StackPanel> <sdk:DataPager Name="DataPager1" PageSize="17" toolkit:DockPanel.Dock="Bottom" Source="{Binding}" /> <sdk:DataGrid Name="DataGrid1" AutoGenerateColumns="False" toolkit:DockPanel.Dock="Top" ItemsSource="{Binding}" > <sdk:DataGrid.Columns> <sdk:DataGridTextColumn Binding="{Binding ID}" Header="编号" /> <sdk:DataGridTextColumn Binding="{Binding Name}" Header="姓名" /> <sdk:DataGridTextColumn Binding="{Binding Age}" Header="年龄" /> <sdk:DataGridCheckBoxColumn Binding="{Binding IsExamPass}" Header="及格" /> </sdk:DataGrid.Columns> </sdk:DataGrid> </toolkit:DockPanel> </UserControl>

 MainPage.xaml.cs中的代码：

public partial class MainPage : UserControl { private DataGridResultCollection _dataGridResult; //View:DataGrid1的ViewModel private PagedCollectionView _pagedResult; //View:DataPager1的ViewModel public MainPage() { InitializeComponent(); _dataGridResult = new DataGridResultCollection(); _pagedResult = new PagedCollectionView(_dataGridResult); //绑定ViewModel到View。 DataPager1.DataContext = _pagedResult; DataGrid1.DataContext = _pagedResult; //有些属性使用xaml不易绑定，就用代码绑定 Binding binding = new Binding(); binding.Source = _dataGridResult; binding.Path = new PropertyPath("SelectedItem"); binding.Mode = BindingMode.TwoWay; DataGrid1.SetBinding(DataGrid.SelectedItemProperty, binding); //从绑定完这一刻开始，代码中就不应该再使用DataPager1和DataGrid1这样的View名称，要始终记得： //改变ViewModel就是改变View；如果要操作View，通过操作ViewModel来达到目的。 } //在View中添加一行，就是在ViewModel中添加一个新项。 private void BtnAdd_Click(object sender, RoutedEventArgs e) { Random random = new Random(); _dataGridResult.Add(new DataGridResultItem() { ID = Guid.NewGuid(), Name = random.Next().ToString(), Age = random.Next(100), IsExamPass = random.Next(2) == 0 ? false : true }); } //获取View中被选中的SelectedItem，就是访问对应ViewModel的相应属性 private void BtnShow_Click(object sender, RoutedEventArgs e) { DataGridResultItem selectedItem = _dataGridResult.SelectedItem; if (selectedItem == null) { MessageBox.Show("未选中任何项"); } else { MessageBox.Show("选中项的编号为：[" + selectedItem.ID.ToString() + "]，考试结果是：" + selectedItem.IsExamPass.ToString()); } } //取消View中选中的行，就是把对应的ViewModel中的相应属性设成null private void BtnNoSelect_Click(object sender, RoutedEventArgs e) { _dataGridResult.SelectedItem = null; } //勾选View中的复选框，就是把复选框对应的ViewModel属性设为True private void BtnCheckAll_Click(object sender, RoutedEventArgs e) { foreach (DataGridResultItem item in _dataGridResult) { item.IsExamPass = true; } } //改变DataPager这个View的页数，就是执行_pagedResult这个ViewModel的MoveToPage方法。 private void BtnChangePage_Click(object sender, RoutedEventArgs e) { _pagedResult.MoveToPage(0); } //删除DataGrid里的行，就是删除它对应ViewModel里的Item private void BtnRemoveItem_Click(object sender, RoutedEventArgs e) { Array.ForEach(_dataGridResult.ToArray(), item => { if (item.IsExamPass == false) { _dataGridResult.Remove(item); } }); } //改变当前选中行的内容，就是改变对应ViewModel的属性 private void BtnEditItem_Click(object sender, RoutedEventArgs e) { if (_dataGridResult.SelectedItem == null) { MessageBox.Show("未选中任何项"); return; } Random random = new Random(); _dataGridResult.SelectedItem.ID = Guid.NewGuid(); _dataGridResult.SelectedItem.IsExamPass = random.Next(2) == 0 ? false : true; _dataGridResult.SelectedItem.Name = random.Next().ToString(); _dataGridResult.SelectedItem.Age = random.Next(100); } }