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 != 0;
        }
        //当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）进行测试。