Question

I’m new to C# and am trying to learn MVVM by building a simple Crud app. In my App I want to have a series of buttons that when the user clicks on it will load that user control. So when you click on the “Add Item” it will replace the existing control with the AddItemView. I was wondering how I go about this? A lot of the mvvm tutorials that I’ve seen so far they just have a single control on the MainMindow.

Answer 1

For this kind of task, you typically use a ContentControl. Bind the Content property of the control to a property of your ViewModel (CurrentViewModel for instance), and define DataTemplates in the resources for each type of ViewModel that can be displayed in the ContentControl. When you assign a ViewModel to CurrentViewModel, the ContentControl will pick the appropriate DataTemplate for the content.

Main ViewModel

private object _currentViewModel;
public object CurrentViewModel
{
    get { return _currentViewModel; }
    set
    {
        if (value != _currentViewModel)
        {
            _currentViewModel = value;
            OnPropertyChanged("CurrentViewModel");
        }
    }
}

App.xaml

<Application.Resources>
    <DataTemplate DataType="{x:Type vm:AddItemViewModel}">
        <v:AddItemView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:FooViewModel}">
        <v:FooView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:BarViewModel}">
        <v:BarView />
    </DataTemplate>
    ...
</Application.Resources>

Main view

...
<ContentControl Content="{Binding CurrentViewModel}" />
...

In your case, in the command for the “Add item” button, you assign an instance of AddItemViewModel to CurrentViewModel