MVVM of Silverlight: Model-View Model (Model-View-ViewModel) (16)

MVVM of Silverlight: Model-View Model (Model-View-ViewModel) (16)

 

Overview
Component Model, View, ViewModel, program = Data Structure + algorithm. Model is the data structure. ViewModel implements algorithm Data Processing and View to display data.
View: UI
ViewModel: it is the abstract of the View. It is responsible for converting the information between the View and the Model and transmitting the View Command to the Model;
Model: Data Layer

The following method can be used to connect View and ViewModule:

Binding Data: Data Transmission
Command: Call the operation.
AttachBehavior: Implements operations during control loading.

View does not have a lot of code logic. Combined with the WPF and Silverlight binding mechanisms, MVP evolved into MVVM, making full use of the advantages of WPF and Silverlight to switch a large amount of code logic and status to ViewModel,
MVVM is specially designed for WPF and Silverlight.

The View is bound to the ViewModel, and some commands are executed to request an action from it. In turn, ViewModel communicates with the Model and tells it to update to respond to the UI.
This makes it easy to build the UI for the application. The easier it is to paste an interface to an application, the easier it is for the designer to use Blend to create a beautiful interface.
At the same time, when the UI and functions become increasingly loosely coupled, the functional testability is getting stronger and stronger.

The following is an example of code implementation:

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 mode. 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 mode. model;
Namespace mvvm mode. 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
Background code:
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 mode. ViewModel;
Namespace MVVM Mode
{
Public partial class MainPage: UserControl
{
Private AddViewModel am = new AddViewModel ();
Public MainPage ()
{
InitializeComponent ();
This. DataContext = am. MyModel;
This. button1.Command = am. AddCommand;
}

}
}
Front-end code:

<UserControl x: Class = "MVVM mode. 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, 120 "Name =" textBox1 "verticalignment =" Top "Width =" "Text =" {Binding Num1, Mode = TwoWay} "/>
<TextBox Height = "23" HorizontalAlignment = "Left" Margin = "records, 70, 120 "Name =" textBox2 "verticalignment =" Top "Width =" "Text =" {Binding Num2, Mode = TwoWay} "/>

<TextBox Height = "23" HorizontalAlignment = "Left" Margin = "127,120, 120 "Name =" textBox3 "verticalignment =" Top "Width =" "Text =" {Binding Resoult, Mode = TwoWay} "/>
<TextBlock Height = "23" HorizontalAlignment = "Left" Margin = "178,71," Name = "textBlock1" Text = "+" verticalignment = "Top"/>
<Button Content = "computing" Height = "23" HorizontalAlignment = "Left" Margin = "149,150, 0, 0 "CommandParameter =" {Binding} "Name =" button1 "verticalignment =" Top "Width =" 75 "/>
</Grid>
</UserControl>

4. Pay attention to additional Property Applications

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