Windows Phone 十一、MVVM模式

MVVM 模式介绍

模型-视图-视图模型 (MVVM) 是一种用来分离 UI 和非 UI 代码的应用设计模式

MVVM – 模型（Model）

MVVM 中的 Model 与 MVC 中的一致，用于封装业务逻辑以及数据处理。

Model 不依赖 View 和 ViewModel，可以独立存在，也就是说模型不关心自身被谁操作和展示。

Model 中不允许有任何跟界面相关的逻辑，比如操作界面上的控件。

通常在实际开发过程中 Model 可以再被划分成 Model 和 Service，区分业务和数据。

MVVM – 视图（View）

视图仅仅负责界面展示。

通过 DataContext（数据上下文）进行数据绑定。

不允许直接与 Model 交互。

可以通过绑定 Comand 来调用 ViewModel 的行为。

Command 是 View 到 ViewModel 的单向通行。

用户在 View 中触发事件，在 ViewModel 中处理。

MVVM – 视图模型（ViewModel）

ViewModel 是对 View 的抽象

视图模型包括界面模型数据和 Command 事件响应。

是 View 和 Model 的桥梁，是对 Model 的包装和抽象。

实现视图模型需要让类型实现 INotifyPropertyChanged 接口，用于实现属性和集合的变更通知，使用户在 View 上所做的操作可以实时通知到视图模型。

MVVM - Demo

利用 MVVM 实现一个计算器；

要求界面和业务逻辑完全剥离；

比如我们可以更改界面展示形式，功能仍然相同；

第一步：先对页面进行抽象（建模）

第二步：让视图模型实现INotifyPropertyChanged接口

第三步：后台代码中声明一个视图模型属性交给当前数据上下文

第四步：前台数据绑定

第五步：定义Command命令

 <Page
     x:Class="MyJiSuanQi.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:MyJiSuanQi"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     DataContext="{Binding ViewModel,RelativeSource={RelativeSource Mode=Self}}"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

     <StackPanel>
         <Slider
             Header="参数1"
             Value="{Binding Parameter1,Mode=TwoWay}"/>
         <!--<TextBox
             x:Name="txtP1"
             Header="参数1"
             Text="{Binding Parameter1,Mode=TwoWay}"/>-->
         <TextBox
             x:Name="txtP2"
             Header="参数2"
             Text="{Binding Parameter2,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
         <AppBarButton
             x:Name="btnAdd"
             Icon="Italic"
             Label="Except"
             Command="{Binding ExceptCommand}"
             CommandParameter="{Binding}"/>
         <TextBox
             x:Name="txtResult"
             Header="结果"
             Text="{Binding Result,Mode=OneWay}"/>
     </StackPanel>
 </Page>

 namespace MyJiSuanQi
 {
     /// <summary>
     /// 可用于自身或导航至 Frame 内部的空白页。
     /// </summary>
     public sealed partial class MainPage : Page
     {
         public MainPageViewModel ViewModel { get; set; }
         public MainPage()
         {
             ViewModel = new MainPageViewModel();
             this.InitializeComponent();

             this.NavigationCacheMode = NavigationCacheMode.Required;
         }

         /// <summary>
         /// 在此页将要在 Frame 中显示时进行调用。
         /// </summary>
         /// <param name="e">描述如何访问此页的事件数据。
         /// 此参数通常用于配置页。</param>
         protected override void OnNavigatedTo(NavigationEventArgs e)
         {
             // TODO: 准备此处显示的页面。

             // TODO: 如果您的应用程序包含多个页面，请确保
             // 通过注册以下事件来处理硬件“后退”按钮:
             // Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
             // 如果使用由某些模板提供的 NavigationHelper，
             // 则系统会为您处理该事件。
         }
         //第一步：先对页面进行抽象（建模）
         //第二步：让视图模型实现INotifyPropertyChanged接口
         //第三步：后台代码中声明一个视图模型属性交给当前数据上下文
         //第四步：前台数据绑定
         //第五步：定义Command命令
         private void btnAdd_Click(object sender, RoutedEventArgs e)
         {
             //var d1 = double.Parse(txtP1.Text);
             //var d2 = double.Parse(txtP2.Text);
             //txtResult.Text = (d1 + d2).ToString();
             ViewModel.Result = ViewModel.Parameter1 + ViewModel.Parameter2;
         }
     }
     public class MainPageViewModel : INotifyPropertyChanged
     {
         public MainPageViewModel()
         {
             AddCommand = new AddCommand();
             ExceptCommand = new ExceptCommand();
         }
         public double Parameter1 { get; set; }
         private double parameter2;
         //影响当前命令是否可以被执行的依据
         public double Parameter2
         {
             get { return parameter2; }
             set
             {
                 if (parameter2 == value)
                 {
                     return;
                 }
                 parameter2 = value;
                 //通知命令对象重新判断是否可以执行
                 ExceptCommand.OnCanExecuteChanged();
             }
         }
         //public double Result { get; set; }
         private double result;
         public double Result
         {
             get { return result; }
             set { result = value; OnPropertyChanged("Result"); }
         }
         public ICommand AddCommand { get; set; }
         public ExceptCommand ExceptCommand { get; set; }
         private void OnPropertyChanged(string propertyName)
         {
             if (PropertyChanged != null)
             {
                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
             }
         }
         public event PropertyChangedEventHandler PropertyChanged;
     }
     //命令对象必须实现ICommand接口
     public class AddCommand : ICommand
     {
         //判断当前命令对象是否可以被执行
         public bool CanExecute(object parameter)
         {
             throw new NotImplementedException();
         }

         public event EventHandler CanExecuteChanged;
         //如何执行
         public void Execute(object parameter)
         {
             var model = parameter as MainPageViewModel;
             model.Result = model.Parameter1 + model.Parameter2;
         }
     }
     //命令对象必须实现ICommand接口
     public class ExceptCommand : ICommand
     {
         //判断当前命令对象是否可以被执行
         public bool CanExecute(object parameter)
         {
             var model = parameter as MainPageViewModel;
             return model != null && model.Parameter2 != ;
         }
         //当CanExecute判断依据发生变化时，触发事件
         public event EventHandler CanExecuteChanged;
         public void OnCanExecuteChanged()
         {
             if (CanExecuteChanged != null)
                 CanExecuteChanged(this, EventArgs.Empty);
         }
         //如何执行
         public void Execute(object parameter)
         {
             var model = parameter as MainPageViewModel;
             model.Result = model.Parameter1 / model.Parameter2;
         }
     }
 }

MVVM 模式优点

低耦合：View 可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。

可重用性：可以把一些视图的逻辑放在 ViewModel 里面，让很多View重用这段视图逻辑。

独立开发：开发人员可以专注与业务逻辑和数据的开发（ViewModel）。设计人员可以专注于界面（View）的设计。

可测试性：可以针对ViewModel来对界面（View）进行测试。