Introduction to MVVM with WPF

What’s MVVM ?

MVVM stands for Model -View-ViewModel

As a Software Developer you want develop quality applications with clean structure of code.

Imagine that you have tons of books in your room and if you want to find one specific book , well it’s a painful , and boring procedure to follow every time you want to find a book .

Unorganized items are hard to reach ! so as Code.

so for those books you will need a bookcase , and MVVM is bookcase for the code it’s the pattern you build your code in .

MVVM it’s your Bookcase !!

so now we know that MVVM it’s pattern that organize your code especially if you are working in big project.

MVVM can simplify future Debugging or Modifications .

MVVM Reduces the duplication of your code and increases Reuseability.

MVVM Pushes WPF to the limit to get the best quality of code .

And the most important it’s the Reduction or even Elimination of code behind .

And main Goal of the MVVM is to provide a clear separation between domain logic and presentation layer.

The Main components of MVVM pattern :

  1. Model
  2. View
  3. View-Model

mvvm

The Model :

It simply holds the data and has nothing to do with any of the business logic.

The View :

It simply holds the formatted data and essentially delegates everything to the Model.

The View-Model:

It acts as the link/connection between the Model and View and makes stuff look pretty.

It should had no knowlege the View Objects.

it’s UI-level layer IT’S NOT Business-level layer , it graps information from the Model and Expose to the View .

Advantages and Disadvantages

From (TutorialsPoint.com)

Maintainability

  • A clean separation of different kinds of code should make it easier to go into one or several of those more granular and focused parts and make changes without worrying.
  • That means you can remain agile and keep moving out to new releases quickly.

Testability

  • With MVVM each piece of code is more granular and if it is implemented right your external and internal dependences are in separate pieces of code from the parts with the core logic that you would like to test.
  • That makes it a lot easier to write unit tests against a core logic.
  • Make sure it works right when written and keeps working even when things change in maintenance.

Extensibility

  • It sometimes overlaps with maintainability, because of the clean separation boundaries and more granular pieces of code.
  • You have a better chance of making any of those parts more reusable.
  • It has also the ability to replace or add new pieces of code that do similar things into the right places in the architecture.

The obvious purpose of MVVM pattern is abstraction of the View which reduces the amount of business logic in code-behind. However, following are some other solid advantages −

  • The ViewModel is easier to unit test than code-behind or event-driven code.
  • You can test it without awkward UI automation and interaction.
  • The presentation layer and the logic is loosely coupled.

Disadvantages

  • Some people think that for simple UIs, MVVM can be overkill.
  • Similarly in bigger cases, it can be hard to design the ViewModel.
  • Debugging would be bit difficult when we have complex data bindings.

 

 Demo :

It’s Two Button App with a Label When Colo1 Button Clicked the Color2 Button is Disabled and the lable text Shows the color name and the Foreground color changed and so.

unspecified.jpeg

The Code-Behind

   public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            View.Color cView = new View.Color();
            ViewModel.ColorVM cVM = new ColorVM();
            cView.DataContext = cVM;
            ShowIt.Content = cView;
        }
    }

just like That !!

Download Sample Here From My DropBox

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: