Introduction and project development of MVVM and mvvmlight (I)

MVVM and MVVMLight Introduction and project development （ One ）
One 、MVVM And MVVMLight brief introduction
notes : Use Microsoft Visual Studio2022, The introduction is from the tutor's teaching
1、MVVM yes Model-View-ViewModel Abbreviation , The main purpose is To separate views （View） And models （Model）, from MVP（Model-View-Presenter） Patterns and WPF The application mode of combination is a new architecture evolved . The coupling of , Handle through data binding and commands UI Attribute and event driven .
（1）、MVVM Patterns and MVC Model as , The main purpose is to separate views （View） And models （Model）, There are several advantages .
①. Low coupling ： View （View） Can be independent of Model Changes and modifications , One ViewModel Can be bound to different View On , When View When it changes Model It can be the same , When Model When it changes View It can be the same .
②. Reusability ： You can put some view logic in a ViewModel Inside , Let a lot of View Reuse this view logic . ③. Independent development ： Developers can focus on the development of business logic and data （ViewModel）, Designers can focus on pages Design , Use Expression Blend It's easy to design interfaces and generate xml Code .
④. Testable ： The interface is always more difficult to test , And now the test can target ViewModel To write .

2.MVVM Light frame
（1）、MVVMLight Is an implementation MVVM A lightweight framework for patterns , Can be used for WPF、Windows8 And so on .
（2）、 How in your WPF Use in application MVMLight There are two main ways to use ; One is to download from the official website MVVMLight Toolkit, After installation ,VS In the template MvvmLight Project template , You can Directly use the project template to create the project . It will contain the default ViewModelLocator and MainViewModel,MainViewModel You are the one Main View's ViewModel 了 , and ViewModelLocator It's a whole picture ViewModel Load registrar .
（3）、 Another way is to NuGet Installation on , This is undoubtedly the most convenient thing . stay NuGet Search the toolbox for MVVM Light, can To see two items , One is MVVM Light , One is MVVM Light libraries only. The current version is 5.3, explain MVVM Light The update speed of is still very fast ,Prerelease There is also V5.4 Of ALAPHA edition Ben . Nuget The difference between these two projects is MVVM Light Except for the necessary GalaSoft In addition to components , Relevant layered articles will be added additionally The piece catalogue forms a simple MVVMLight Forming frame .

3. Use MVVMLight The framework creates a MVVM project
（1）、 open Visual Studio 2022 Or other versions , Create a new project –> Search for “WPF application ”–> find “WPF application (.NET Framework) Client applications ”, Click inside to configure new items , Rename the project name , Specify where to save the project , The solution can be the same as the project name , Frame selection “.NET.Framework 4.7.2” Or later and create .

（2）、 stay VS Find tools in the menu bar above –>NuGet Package manager –> Manage solutions NuGet Package –> Click Browse –> Online search “MVVmLight”–> Click on the first search result, which is about 2.8M about , Then check the corresponding item in the right view to install it , Select a stable version, click Install and receive the terms of service .

（3）、 install MvvmLight The back of the frame can be on the right “ Solution explorer ” Of “ quote ” You can see the corresponding framework referenced in .
4.MVVM Layered architecture
（1）、View Responsible for front-end display , And ViewModel Interact with data and commands .
（2）、ViewModel, Responsible for the logical structure organization at the business level of the front-end view , And feed it back to the front end .
（3）、Model, Mainly responsible for the structure processing of data entities , And ViewModel Interact .


（4）、 In the project “ Solution explorer ” Add the following folder , If necessary Model–>View–>ViewModel It will be used outside the architecture NetworkManager( Used to store network request classes )–>Resources( Used to store resources for example xib,storyboard, picture ,plist, Audio , video )–>Util( It is used to store our defined classification and extension or tool class )–>Styles( Page button style class ) wait .

（5）、 Now insert the picture description here
Add a style class of page buttons , Store this type in PublicClass In the folder , Choose PublicClass Right click on the folder –> add to –> class –> Name class name determination ,

（6）、 The code is as follows :Button( Express Windows Button control )、CornerRadius( Represents the radius of the rectangular corner )、DependencyProperty( It can be represented by such as style 、 Data binding 、 Properties set by animation, inheritance and other methods ).