MVVM mode for learning design patterns from Prism (I)-Brief Introduction to MVVM

Before learning the MVVM involved in Prism, I think it is necessary to briefly summarize the MVC, MVP, MVVM, and Command modes, in this way, we can better understand the design concepts of Prism, especially WPF.

Content:

• The ins and outs of MVVM
• Why does Prism use MVVM?
• Example

I. the ins and outs of MVVM

When we develop applications with UI interfaces, the MVC and MVP modes will be widely used, and these modes can easily be used to develop various applications. With the popularity of WPF, a variant based on the MVC & MVP model was proposed by Microsoft's p & p team. Through pages, data sources, logical separation, and MVVM, the development work is easier to divide, and the program structure is clearer and easier to maintain.

The full name of MVVM is Model/View/ViewModel.

Model is the data Model, which can be Json, database table content, objects, XML, text files, locally stored content, and so on.

View is a View that is also a UI. It is provided to the end user interaction interface. For a View, the Model does not need to be linked.

ViewModel is a View model that provides data sources for the data to be presented by the View and supports the business logic for the interactive operations of the View.

Ii. Why does Prism use MVVM?

The Lightweight Framework Prism enables the development team to focus on business logic development by applying MVVM. the design team focuses on designing friendly interaction interfaces for users. The two teams may be less involved in cross-design development. To achieve the above functions and give full play to the advantages of WPF, Prism uses a variety of design patterns for function expansion. For example, the relay Command logic is extended through the Command mode design, and AttachBehaiverCommand and DelegateCommand are provided. Lz will be described in detail later.

Iii. Examples

The following is a very Simple MVVM Demo. Scenario: An album Interface

1. display the album list

2. Click an album in the album list.

3. jump event triggering

4. Jump to an album

5. Image list Loading

The Demo designs the data class Album, user UI AlbumView, and view model AlbumViewModel. AlbumViewModel provides the jump function and implements the ICommand interface. AlbumView triggers the Command to execute the jump function of AlbumViewModel.

Model:

 1 namespace SimpleMVVMApp.Business.Model { 2     public class Album : INotifyPropertyChanged { 3         public event PropertyChangedEventHandler PropertyChanged; 4  5         public string Name { 6             get { 7                 return this.name; 8             } 9             set {10                 if (value != this.name) {11                     this.name = value;12                     if (this.PropertyChanged != null) {13                         this.PropertyChanged(this, new PropertyChangedEventArgs("Name"));14                     }15                 }16             }17         }18 19         public string Path { get; set; }20 21         public string Border {22             get {23                 return this.border;24             }25             set {26                 if (value != this.border) {27                     this.border = value;28                     if(this.PropertyChanged != null){29                         this.PropertyChanged(this,new PropertyChangedEventArgs("Border"));30                     }31                 }32             }33         }34 35         private string name;36         private string border;37     }38 }

ViewModel:

 1     public class AlbumViewModel { 2         public Album Album { 3             get { 4                 return this.album; 5             } 6         } 7  8         public IEnumerable<string> Borders { get; private set; } 9 10         public ICommand RediectCommand { get; private set; }11 12         public AlbumViewModel() {13             this.album = new Album { Name = "MVVM" };14             this.RediectCommand = new RelayCommand((o) => this.OnRediect(o));15         }16 17         private void OnRediect(object args) {18             this.album.Name = "Command";19             //Todo Get Photo List and Rediect to page20         }21 22         private readonly Album album;23     }

View:

 1 <UserControl x:Class="SimpleMVVMApp.View.AblumView" 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  6              xmlns:vm="clr-namespace:SimpleMVVMApp.Business.ViewModel" 7              mc:Ignorable="d"  8              d:DesignHeight="300" d:DesignWidth="300"> 9     <UserControl.DataContext>10         <vm:AlbumViewModel/>11     </UserControl.DataContext>12     <Grid>13         <Button Command="{Binding RediectCommand}" Content="{Binding Album.Name}"></Button>14     </Grid>15 </UserControl>

Because the good display effect is not the topic of this article, LZ simply uses a Button to represent the UI. If you need a good display of the Interaction Effect, you can rewrite the Visual Template or write another Visual class to achieve better display effect.

Figure 1. Click the effect. Figure 2 shows the effect after the function is executed using Command:

　　

Figure 1 Figure 2

Source code download: http://files.cnblogs.com/tmywu/SimpleMVVMApp.7z