MVVM Light Multiple Data Contexts

Question

I am new to MVMM Light toolkit (note, I'm using Light on .NET 3.5). So far I am really starting to like the pattern save for two challenges.

• I'd like to have reusable XAML templates for certain types of pages in my application. Think of a movie ticket kiosk. Main content in the center but almost always a button somewhere on the screen to cancel or go back. I'd like to have reusable grid(s) where when I create a new page I basically import that grid layout and don't have to worry about the common bits and can just focus on my part. Doing a little research I feel like <ContentPresenter> might be the way to go here but it's still foreign to me.

• Assumign I succeed in my first challenge, I would think the data context for those common items (say a Cancel button) would be somewhere else other than that page's ViewModel to avoid a bunch of duplication of code. Is that best approach to take the individual controls and reference a different view model from the XAML? Something like...

  <Button ... DataContext={Binding CommonStuffVM, Source={StaticResource Locator}} />

Answer 1

You can use Templates or DataTemplates to create a reusable template defining how an object should look.

For example,

<DataTemplate DataType="{x:Type local:MovieTicket}">
    <!-- Write the XAML for your Movie Ticket -->
</DataTemplate>

You can give your DataTemplate an x:Key to reference it specifically in an ItemTemplate or ContentTemplate, or leave it out so it will be used anytime WPF tries to draw a MovieTicket object

<ItemsControl ItemsSource="{Binding MovieTickets}" />

<ContentControl Content="{Binding SelectedMovieTicket}" />

For your second question, I think this would be a bad idea for individual controls, although its a common practice for complete sections of the program.

When using MVVM, your ViewModels are your application, not your UI.

If your window should display a list of Movies for the user to edit, and allow the user to Save or Cancel their changes, then your ViewModel should contain an ObservableCollection<Movie> and contain an ICommand SaveCommand and ICommand CancelCommand

You really want your View to only reflect your ViewModels, and not have them pulling the data they need from all over the ViewModel hierarchy.

Based on your question, you may be interested in a blog article I have about Navigation with MVVM which uses code very similar to what you're asking about. It shows how to change the UI using implicit DataTemplates, and contains a complete code sample that you can download and look at to get a better idea of the MVVM architecture.