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");
        }