Getting Started with MVVM

Sign in to queue

Description

In this hour long episode, Robert shows you how to get started using the MVVM (Model-View-ViewModel) pattern in your XAML apps. He reviews what MVVM is and then adds MVVM to an existing Windows Store app. You won't see all of the techniques used in MVVM, but you will see enough to understand how you can start using it in your own projects and what benefits it offers.

For more explanation, see Robert's blog and the accompanying MSDN sample.

Tags:

XAML, Windows 8

Embed

Download

The Discussion

  • User profile image
    Ali Azhdari

    Hi Robert

    I Was worrying About You, Were You Been Man, Your Videos Are Great.

    Thank You

  • User profile image
    syyad

    @Robert you are awesome, i'm big appreciator of yours

    Thanks for such a great video

    looking forward to more like this in coming days

     

     

  • User profile image
    Daniel

    Excellent introduction to MVVM!

    I myself am using MVVM a lot, and there was one thing standing out to me: in step 3, your ViewModel is directly depending on the View by calling the NavigateTo method, and it navigates to a specific page in that project. This means that the ViewModel is hooked up to this specific application and its Views, and therefore the reusability suffers.
    While we could just implement that more abstractly in the ViewModel (like, passing a Page object in the ctor and then, later in the command, navigate to that, or something similiar), I usually tend to keep everything View-related out of the ViewModel. I am not sure on what the best approach for that is, but currently I am doing it this way:
    1. Remove all navigation logic from the command. If the command is solely for navigation purposes, remove the whole command. A command is meant only for interactions regarding the ViewModel, and nothing else (in my head that is ;-) for reusability and testability).
    2. Implement a click handler in the code behind of the view. In there:
    2.a Get the currently clicked item (which I can look up using the sender object in the event).
    2.b Get the clicked item's DataContext.
    2.c Cast the DataContext to the type it is (this is possible because the View inevitably knows the type of its ViewModel and therefore the type of the ViewModel's properties and collections, at least when you have previously set the DataContext in code behind).
    2.d Call the command on the ViewModel and/or execute the navigation logic, in your desired order. Remember that this is still in the code behind of the View.

    This way, the View does still only know about itself and the ViewModel, and the ViewModel does still not know about the View. It might be a bit tricky to use this approach wich CommandParameters, but until know I've always managed to get it to work.

    I'd like to hear your thoughts on this. Maybe you have a better approach, or maybe you even have an explanation as to why you think it's okay to keep that reference to the View inside the ViewModel.

    Sorry for the lengthy post.

  • User profile image
    Doctor Who

    Hi Robert,

    I know you said you world post the code and your notes to your blog, but I don't know what the URL is. Wound you please supply it?

  • User profile image
    rogreen

    @Doctor Who: There is a link to my blog and to the sample in the episode description, just below the links to download the video. Smiley

    Robert

  • User profile image
    Doctor Who

    @rogreen: Oh great, now I look and feel stupid for not having see what is so obviously there, Thank you, Robert.

  • User profile image
    Dirtbagg

    @rogreen:would you possibly do a video on moving MVVM to an MVVM framework?

    I understand MVVM, but the frameworks are a bit confusing.

  • User profile image
    award

    So, I'm trying to use the RelayCommand and I notice in your CustomerViewModel.cs file, the Save and Delete methods are "public async Task" methods. These allow you to use the await keyword.  Well, it's not working when I try it in my project!  It asks me to add the await keyword in the ViewModel constructor lambda expression.   Please see below code.  I've compared your RelayCommand in the project to the given and they are identical.  What am I missing?

    public RelayCommand LoginCommand { get; private set; }

    public MyViewModel() { LoginCommand = new RelayCommand(() => Login()); }

    public async Task Login() { //DO STUFF var result = await MY_OBJ.GetAsync(); }

     

    It throws a warning and wants me to do this, but it doesn't work.

    public MyViewModel() { LoginCommand = new RelayCommand(() => await Login()); }

     

  • User profile image
    rogreen

    @award: I ran this by some folks who know async-await better than me and here is what they said. The problem with the code as I have it is that the lambda passed to the RelayCommand ignores the returned Task. This is fine when the call succeeds but any exceptions thrown by Save or Delete are ignored.

    So they recommend making the lambda async and awaiting the task as follows:

    SaveCustomer = new RelayCommand(async() => await Save());

    They also recommend calling the method SaveAsync rather than Save.

    Robert

  • User profile image
    bob

    How do you get VS to add the RelayCommand.cs found in the common folder?

  • User profile image
    rogreen

    @bob: Add a Basic Page to the project and VS will add the Common folder and the files in it.

    Robert

Add Your 2 Cents