WPF/MVVM Load an UserControl at Runtime

Question

i know that there a many articles about my problem but i cant find a solution. I am new in WPF - MVVM and i try to understand the MVVM-Logic. So i made a little project to understand that. For my later apps i want to load UserControls dynamicly to my Window.

In my StartView i have a Binding to the StartViewModel. (The Binding is in the APP.xaml)

StartView app = new StartView();
StartViewModel context = new StartViewModel();

The StartView

<Window x:Class="test.Views.StartView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="clr-namespace:test.ViewModel"
        Title="Window1" Height="300" Width="516">
    <Grid>
        <Menu IsMainMenu="True" Margin="0,0,404,239">
            <MenuItem Header="_Einstellungen">
                <MenuItem Header="Server" />
            </MenuItem>
        </Menu>
        <ContentControl Content="{Binding LoadedControl}" Margin="0,28,0,128" />
    </Grid>
</Window>

the StartViewModel

namespace test.ViewModel
{
    public class StartViewModel : ViewModelBase
    {
        #region Fields
        private UCStastistikViewModel _loadedControl;
        #endregion

        public StartViewModel()
        {
            LoadedControl = new UCStastistikViewModel();
        }

        #region Properties / Commands
        public UCStastistikViewModel LoadedControl
        {
            get { return _loadedControl; }
            set
            {
                if (value == _loadedControl)
                    return;

                _loadedControl = value;
                OnPropertyChanged("LoadedControl");
            }
        }
        #endregion

        #region Methods

        #endregion
    }
}

UCStatistikView

<UserControl x:Class="test.Views.UCStatistik"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:vm="clr-namespace:test.ViewModel"
             mc:Ignorable="d" 
             d:DesignHeight="188" d:DesignWidth="508">
    <UserControl.DataContext>
        <vm:UCStastistikViewModel />
    </UserControl.DataContext>
    <Grid Background="red">       
    </Grid>
</UserControl>

UCStatistikViewModel

namespace test.ViewModel
{
    public class UCStastistikViewModel : ViewModelBase
    {
        #region Fields
        #endregion

        public UCStastistikViewModel()
        {
        }

        #region Properties / Commands
        #endregion

        #region Methods
        #endregion
    }
}

Now i want to load my UCStatistikView in the ContentControl of my StartView. But in the Startview only the Path test.UCStatistikViewModel is shown instead of the whole UC Can anybody give me some Ideas where my problem is / where im am going wrong ?

Bye j

Answer 1

Your ViewModels should not care about UserControls. Instead, have them hold ViewModels, and let WPF resolve how to draw the ViewModel with a DataTemplate.

For example,

<Window x:Class="test.Views.StartView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="clr-namespace:test.Views"
        xmlns:viewmodels="clr-namespace:test.ViewModel"
        Title="Window1" Height="300" Width="516">

    <Window.Resources>
        <DataTemplate DataType="{x:Type viewmodels:UCStastistikViewModel}">
            <views:UCStastistikView />
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <Menu IsMainMenu="True" Margin="0,0,404,239">
            <MenuItem Header="_Einstellungen">
                <MenuItem Header="Server" />
            </MenuItem>
        </Menu>
        <ContentControl Content="{Binding LoadedControl}" Margin="0,28,0,128" />
    </Grid>
</Window>

Also, get rid of the <UserControl.DataContext> in your UserControl. The DataContext should be passed in by whatever is using the control, not defined in the UserControl :)

Edit

Based on your comment to an earlier answer about switching out the content of the StartPage by switching a ViewModel, you may be interested in looking at this post of mine. It's titled Navigation with MVVM, however the same concept applies for switching Views or UserControls

Basically, you'd make the property LoadedControl of type ViewModelBase instead of hard-coding it's type, and then set it to whatever object you want displayed in your ContentControl. WPF's DataTemplates will take care of hooking up the correct View for the ViewModel.