Universal app in windows MVVM [closed]

Question

I have just started to develop in universal app. I have developed app in Windows 8 store apps and also developing Windows Phone 8 and Windows Phone 8.1 (SilverLight) Apps. Question is related to universal app in Windows and Single UI which is created in App. Share folder.

1. I am new in MVVM. I have developed Windows phone 8 and WP8.1 app in normal way. But not with MVVM. I have search a lot but did not get any example which can make better understand of MVVM. I know what is MVVM. It is similarly of MVC of Asp.net.

MVVM is

Model : Which describe data

View-Model : In simple word a bridge between Model and View.

View : A simple xaml page or user interface.

Which way is better or best to do code in Windows Phone 8 MVVM or Normal way?

Normal way means without using MVVM.

Ref : Separate UI and app logic using the Model-View-ViewModel pattern

Answer 1

This is a broad question to answer in a single post. I'll provide a couple of things to think about and research.

(Note: all code in this post is free hand from memory. It may not be 100% syntactically correct.)

You are for the most part correct in your definition of MVVM. The main difference to me between MVVM and MVC is that binding is used to connect the View to the View Model (Controller). That is semantics though and don't need to get hung up on it.

It doesn't matter if you are WP 7, WP 8, WP8.1, Siverlight or Universal App. It may be easiest to start with WPF as that is when MVVM was introduced and it is faster to run your app as it doesn't run in an emulator.

First is to get started with a very basic example.

1) Create folders "Views" and "ViewModels". Strictly not necessary but you will want them.

2) Create a blank page with a TextBlock. This is the xaml file with the code behind. Create it in the Views folder and name it MyFirstPage. Put a text block on it like this:

<TextBlock Text="The Title of my App" />

3) Run the app and make sure this text is showing.

4) Create a ViewModel class. This is a basic class file. Create it in the ViewModels folder and name it MyFirstViewModel.

5) Connect Page(View) to ViewModel. Here is what my code behinds look like and for the most part this is all I have in them. Setting the DataContext to the view model is the key to setting up the binding. There are many other frameworks out there that make this magic, but this is what happens. This is the best place to start in my opinion.

public class MyFirstPage : Page
{
    private MyFirstViewModel _viewModel = new MyFirstViewModel();

    public MyFirstPage()
    {
        this.Initialize???
        this.DataContext = _viewModel;
    }

6) Add a Title Property to your View Model and for now just have it return a hard coded value.

public string Title { get { return "The Title of my App (set from View Model)"; } }

7) Update TextBlock on View to use Binding

<TextBlock Text="{Binding Title}" />

8) Run the app to test that it works.

So that is the basics to hook up a view model to a view and see the binding work.

Next up to learn:

1. Two Way Binding: If you have values being set on the UI in TextBox you will need to update the binding to look like {Binding FirstName, Mode=TwoWay} as an example if you want to enter a first name.

2. Observable Properties: Another problem you will find is that when you view model logic changes the values of the bound properties the values won't display on the UI. You will pull your hair out wondering what is wrong but it is really simple. The UI needs to be notified to update. You changed the underlying value but the UI has no idea to update. So for properties like FirstName you will need to implement INotifyPropertyChanged on your ViewModel and in the setter of your property call OnPropertyChanged("FirstName"). There are lots of examples out there that describe this.

3. ObservableCollections: Similar to Observable Properties if you have a list of items that get adjusted in the view model, the view will need to be notified that the list has changed. The way to do this is to make the property an ObservableCollection. Again, lots of examples. The tip I have is only implement a getter for these properties. You want to either create the collection once in the constructor or lazy load in the getter of the property. If you ever create a new instance of the ObservableCollection the link to the UI will get broke and you will have to call OnPropertyChanged for this which really is not necessary if you just use a single instance of ObservableCollection and and and removed items from it. You'll see what I mean after playing with it a bit. Just re-read this again.

4. Converters: Now we are moving to the next level but to keep your code behind clean you will leverage converters and relay commands. A most common converter is BooleanToVisibilityConverter. This will help control the Visibility of a view component based on a boolean value on your View Model. Again, you will have to research this.

5. Relay Commands: Like converters you need Relay Commands to keep your code behind clean. A relay command is basically a binding for a click event. Instead of having a click event handler in the code behind you will have a Relay Command implemented in your ViewModel and for instance a Button Command will bind to the RelayCommand property on your View Model.

Once you research and are familiar with these items you will be off to a good start.

It is really hard in some cases to avoid the code behind, but what I have found is that I have been able to find solutions for most problems, however, it sometimes requires creativity.

Once last comment: My goal in creating a strict clean ViewModel is so that I can reuse it across form factors (Phone and Tablet). This is possible but is more difficult once you get deep in to harder problems. However, the key here is that you have a separate Lib project for your ViewModels to live in. All my solutions have Windows Phone 8.1 Project, a Windows 8.1 (Store) Project, and a Portable class Lib project. The ViewModels folder goes into the Lib project along will all other code that is shareable. To make everything work you may have to use Inversion of Control but that is a topic for another post.

Good Luck and Have fun,

Tom

Answer 2

Take a look at Nico Vermeir's introduction tutorial on MVVM Light here http://www.spikie.be/blog/post/2014/06/30/.aspx

The answer is too large to post on stackO so follow the url :)