What to do in ViewModel and what in xaml.cs file

Question

I'm trying to learn the MVVM model by creating an UWP project. From what I've gathered, ViewModel is supposed to be independent from the actual View (portable?). I just want to clarify if what I understand is right.

Say I have a SplitView:

<Grid>
    ...
    <Button Click="ActivateRelativePanel Content="CLICK!"/>       
    <SplitView>
        <SplitView.Pane>
            ...
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="MyFrame"/>
        </SplitView.Content>
    </SplitView>
</Grid>

Is it right to change the Open/Closed status (SandwitchSplitMenu.IsPaneOpen = !SandwitchSplitMenu.IsPaneOpen;) of the SplitView in VM or xaml.cs, since this is a view specific thing? From what I understand so far, this should be inside a xaml.cs file, since it's a view specific thing, but a friend of mine told me that I should use xaml.cs file as less as possible when relying on MVVM.

While I'm at it, should the Frame be Navigated (MyFrame.Navigate(typeof(SomePage));) through the VM or xaml.cs? The frame is also a view-specific thing.

I know that loaded data from the models should be done by binding, through VM, but I'm interested as to what is supposed to be inside a VM and what is supposed to be inside a xaml.cs file.

Also, any other good UWP MVVM tutorial guide or anything is more than welcome!

score 2 · Accepted Answer · edited May 23 '17 at 11:59

Well, several things:

MVVM pattern lets you decouple your view and your business logic. There's many advantages, and one of them is testing. You can test your view model without thinking of your view because it is made to be independent (your view model does not have any consciousness of a view). Separation of concerns is also a great practice to get your code organized.
Starting from this, you should place in your code-behind the minimum code possible. Acceptable code would be code which manipulates UI element exclusively, like sizing, managing animations, ... All which is related to data and other stuff should go directly into your view model.
Navigation should also be handled from view models, because logic takes place there, and navigation relies on logic.

For your IsOpenPane case, it's subject to debate. It manipulates the UI element but I suspect it's manipulated from a business logic. So, personally, I would declare a public property in your view model which you bind to the xaml property IsPaneOpen.

Regarding UWP MVVM guide, you should see MVVM: Tutorial from start to finish?.

It is not exclusively for UWP and resources are quite old, but the concepts are the same (only some XAML elements are differents, but pattern and spirit are exactly the same).

But above all: https://mva.microsoft.com/search/SearchResults.aspx?q=uwp

Microsoft MVA is really great!

Once you'll be at ease with XAML and MVVM, see https://dev.windows.com/en-us/design. It's the official Microsoft documentation about UWP and design, where you can grasp key concepts like responsive design techniques (which is specific to UWP, and brings tools which make a universal app usable by any display, from IoT to TV). It's of course well written and well structured.

Very informative, thank you! I think I already saw that page, but thought I might find a different UWP specific guide. But then, since they're all similar, I'll have a look at that link! Thank you very much for the response! — Toza, Jan 10 '16 at 02:00
@NemanjaT You're welcome! I've added a link to Microsoft MVA, which is really great to start from scratch. — , Jan 10 '16 at 02:19

What to do in ViewModel and what in xaml.cs file

1 Answers1