Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to write the Model View structure of MVVMLight project". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, let's talk about the hierarchical structure:

As shown in the figure:

1. View is responsible for the front-end display and the interaction of data and commands with ViewModel.

2. ViewModel, responsible for the logical structure organization of the business level of the front-end view, and feedback it to the front-end.

3. Model, which is mainly responsible for the structure processing of data entities and interacts with ViewModel.

According to the above layering, let's code.

First, create a complete three-tier directory, as shown in the figure, containing three-tier folders: Model, View and ViewModel:

1. Write a Model with the following code: using GalaSoft.MvvmLight; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MVVMLightDemo.Model {public class WelcomeModel: ObservableObject {private String introduction; / welcome / public String Introduction {get {return introduction } set {introduction = value; RaisePropertyChanged (() = > Introduction);}

Quite simply, it only contains an entity object. Note here that it inherits a parent class: ObservableObject, which ensures that it can detect whether the property has been changed.

It implements the INotifyPropertyChanged interface and notifies UI of changes by triggering PropertyChanged events.

So when we define an entity object, we only need to call RaisePropertyChanged (PropertyName) to notify the property change.

So each attribute defined in the entity is added with a call to RaisePropertyChanged (PropertyName), and the interactive update to UI can be realized.

2. Write a VideModel to be responsible for the interaction with View. Using GalaSoft.MvvmLight;using MVVMLightDemo.Model;using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;namespace MVVMLightDemo.ViewModel {public class WelcomeViewModel:ViewModelBase {/ constructor / public WelcomeViewModel () {Welcome = new WelcomeModel () {Introduction = "Hello World!" };} # region attribute private WelcomeModel welcome; / welcome word attribute / public WelcomeModel Welcome {get {return welcome;} set {welcome = value; RaisePropertyChanged (() = > Welcome);}} # endregion}}

It is also very simple, including a WelcomeModel attribute named Welcome, which inherits the ViewBaseModel parent class

ViewBaseModel inherits both the ObservableObject class and the ICleanup interface. So he also has the ability of INotifyPropertyChanged interface.

The ability to notify View by triggering PropertyChanged events

The Welcome property is instantiated in the constructor.

3. Write a View to display and interact with ViewModel.

TextBlock is bound to Welcome.Introduction, so the Introduction property under the Welcome object should be displayed.

At this time, ViewModel has nothing to do with View, so we write the following code in the constructor of code-Behind:

Using MVVMLightDemo.ViewModel;using System.Windows; namespace MVVMLightDemo.View {/ Interaction logic for WelcomeView.xaml / public partial class WelcomeView: Window {public WelcomeView () {InitializeComponent (); this.DataContext = new WelcomeViewModel ();}}

Assign WelcomeViewModel to the data context of the current view. So you can use all the exposed properties and commands in ViewModel in the current view.

The execution results are as follows:

Second, let's talk about constructors:

If you use NuGet to install a complete MVVM Light framework instead of MVVM Light libraries only, you will always bring the ViewModelLocator class and generate a resource dictionary and add it to the global resource.

So every time App initializes, the ViewModelLocator class is initialized.

In fact, it is a very basic view model injector. Uniformly register the ViewModel used in the constructor and generate a single instance.

Then expose it using the property, and every time we access the property, we return the corresponding ViewModel instance.

/ * In App.xaml: In the View: DataContext= "{Binding Source= {StaticResource Locator}, Path=ViewModelName}" You can also use Blend to do all this with the tool's support. See http://www.galasoft.ch/mvvm * / using GalaSoft.MvvmLight; using GalaSoft.MvvmLight.Ioc; using Microsoft.Practices.ServiceLocation; namespace MVVMLightDemo.ViewModel {/ This class contains static references to all the view models in the / / application and provides an entry point for the bindings. / public class ViewModelLocator {/ Initializes a new instance of the ViewModelLocator class. / public ViewModelLocator () {ServiceLocator.SetLocatorProvider (() = > SimpleIoc.Default); # region Code Example / if (ViewModelBase.IsInDesignModeStatic) / {/ Create design time view services and models / SimpleIoc.Default.Register () / else / {/ Create run time view services and models / SimpleIoc.Default.Register (); /} # endregion SimpleIoc.Default.Register () } # region instantiate public MainViewModel Main {get {return ServiceLocator.Current.GetInstance ();}} # endregion public static void Cleanup () {/ / TODO Clear the ViewModels}}

Note that SimpleIoc, which comes with MVVMLight, is used as the default service provider, which is a simple injection framework.

In order to unify, and the data of ViewModel can be seen at design time, the SimpleIoc is wrapped in ServiceLocator here.

We have written a Hello World above, so we can modify it in this way.

/ * In App.xaml: In the View: DataContext= "{Binding Source= {StaticResource Locator}, Path=ViewModelName}" You can also use Blend to do all this with the tool's support. See http://www.galasoft.ch/mvvm * / using GalaSoft.MvvmLight; using GalaSoft.MvvmLight.Ioc; using Microsoft.Practices.ServiceLocation; namespace MVVMLightDemo.ViewModel {/ This class contains static references to all the view models in the / / application and provides an entry point for the bindings. / public class ViewModelLocator {/ Initializes a new instance of the ViewModelLocator class. / public ViewModelLocator () {ServiceLocator.SetLocatorProvider (() = > SimpleIoc.Default); # region Code Example / if (ViewModelBase.IsInDesignModeStatic) / {/ Create design time view services and models / SimpleIoc.Default.Register () /} / / else / {/ Create run time view services and models / SimpleIoc.Default.Register (); /} # endregion SimpleIoc.Default.Register (); SimpleIoc.Default.Register () } # region instantiate public MainViewModel Main {get {return ServiceLocator.Current.GetInstance ();}} public WelcomeViewModel Welcome {get {return ServiceLocator.Current.GetInstance () } # endregion public static void Cleanup () {/ / TODO Clear the ViewModels}}

After registering the WelcomeViewModel instance, we can use the original View

Public WelcomeView () {InitializeComponent (); this.DataContext = new WelcomeViewModel ();}

This.DataContext = new WelcomeViewModel () in

You can get rid of it and write it directly in WelcomeView:

DataContext= "{Binding Source= {StaticResource Locator}, Path=Welcome}"

As shown below:

One of the advantages of this is that binding is more reasonable than a simple and rude assignment. One is that the bound data can be seen in the visual window to achieve a WYSIWYG friendly effect.

As follows:

When we change the data we are bound to, it will be rendered immediately after compilation:

Server developers can concentrate on writing ViewModel business logic code, and UI developers can focus on design views

ViewModel can also be bound to different views, so it can reflect three of its important features from here: low coupling, reusability, and independent development.

Have you found that there is also a ClearnUp () method in the ViewModelLocator class, which is mainly used to clear the ViewModel instance.

ViewModelBase inherits the GalaSoft.MvvmLight.ICleanup interface and writes the Cleanup () virtual method in its own class. So we can override Cleanup () in the instance ViewModel class to clear the current instance.

This is the end of the content of "how to write the Model View structure of MVVMLight Project". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.