Silverlight之MVVM：模型－视图－视图模型（Model-View-ViewModel）（16）

Silverlight之MVVM：模型－视图－视图模型（Model-View-ViewModel）（16）

 



概述

组成部分Model、View、ViewModel，程序=数据结构+算法。Model就是数据结构，ViewModel实现算法数据处理，View实现数据展现。

View：UI界面

ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；

Model：数据层

View与ViewModule连接可以通过下面的方式

Binding Data：实现数据的传递

Command：实现操作的调用

AttachBehavior：实现控件加载过程中的操作

View没有大量代码逻辑。结合WPF、Silverlight绑定机制，MVP演变出了MVVM，充分利用了WPF、Silverlight的优势，将大量代码逻辑、状态转到ViewModel，

可以说MVVM是专门为WPF、Silverlight打造的。

View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。

这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易，外观设计师就越容易使用Blend来创建一个漂亮的界面。

同时，当UI和功能越来越松耦合的时候，功能的可测试性就越来越强。

下面是一个具体的代码实现例子：

1.Model

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace MVVM模式.Model

{

    public class AddModel : DependencyObject

    {

        public static readonly DependencyProperty Num1Property = DependencyProperty.Register("Num1", typeof(int), typeof(AddModel), null);

        public int Num1

        {

            get { return (int)GetValue(Num1Property); }

            set { SetValue(Num1Property, value); }

        }

 

        public int Num2

        {

            get { return (int)GetValue(Num2Property); }

            set { SetValue(Num2Property, value); }

        }

        // Using a DependencyProperty as the backing store for Num2.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty Num2Property =

            DependencyProperty.Register("Num2", typeof(int), typeof(AddModel), null);

        public static readonly DependencyProperty ResoultProperty = DependencyProperty.Register("Resoult", typeof(int), typeof(AddModel), null);

        public int Resoult

        {

            get { return (int)GetValue(ResoultProperty); }

            set { SetValue(ResoultProperty, value); }

        }

    

    }

}

2.ViewModel

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using MVVM模式.Model;

namespace MVVM模式.ViewModel

{

    public class AddViewModel

    {

        public AddModel MyModel

        {

            get { return new AddModel(); }

        }

        public ICommand AddCommand

        {

            get

            {

                return new AddParams();

            }

        }

    }

    public class AddParams : ICommand

    {

        public bool CanExecute(object parameter)

        {

           return true;

        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)

        {

          AddModel  am=parameter as AddModel;

          am.Resoult = am.Num1 + am.Num2;

        }

    }

}

3.View

后台代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using MVVM模式.ViewModel;

namespace MVVM模式

{

    public partial class MainPage : UserControl

    {

        private AddViewModel am = new AddViewModel();

        public MainPage()

        {

            InitializeComponent();

            this.DataContext = am.MyModel;

            this.button1.Command = am.AddCommand;

        }

     

    }

}

前台代码：

<UserControl x:Class="MVVM模式.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"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <TextBox Height="23" HorizontalAlignment="Left" Margin="42,70,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Num1,Mode=TwoWay}" />

        <TextBox Height="23" HorizontalAlignment="Left" Margin="213,70,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Text="{Binding Num2,Mode=TwoWay}" />

 

        <TextBox Height="23" HorizontalAlignment="Left" Margin="127,120,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" Text="{Binding Resoult,Mode=TwoWay}"/>

        <TextBlock Height="23" HorizontalAlignment="Left" Margin="178,71,0,0" Name="textBlock1" Text="+" VerticalAlignment="Top" />

        <Button Content="计算" Height="23" HorizontalAlignment="Left" Margin="149,150,0,0" CommandParameter="{Binding}" Name="button1" VerticalAlignment="Top" Width="75" />

    </Grid>

</UserControl>

4.注意附加属性应用

  public int Num1

        {

            get { return (int)GetValue(Num1Property); }

            set { SetValue(Num1Property, value); }

        }

        // Using a DependencyProperty as the backing store for Num1.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty Num1Property =

            DependencyProperty.Register("Num1", typeof(int), typeof(TestModel), new PropertyMetadata(0, new PropertyChangedCallback(xxx)));

        static void xxx(DependencyObject d, DependencyPropertyChangedEventArgs e)

        {

            MessageBox.Show("sss");

        }