How to use a ViewModelLocator in a user control?

Question

I was asked to convert a standalone WPF application that uses the MVVM pattern into a user control. This app consists of a main window and a few other windows. However, I get a few errors when trying to do so all pointing to my App.xaml class and other resources declared like converters:

Library project file cannot specify ApplicationDefintion element. The project file contains a property value that is not valid. The name "ViewModelLocator" does not exist in the namespace "clr-namespace:MapperX.ViewModels".

So it looks like the errors revolve around my ViewModelLocator.

Currently the project directory structure is set up like so:

Top level -> ViewModels folder -> ViewModelLocator

The App.xaml is set up like so:

<Application x:Class="MapperX.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MapperX"
             xmlns:vm="clr-namespace:MapperX.ViewModels"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <vm:ViewModelLocator x:Key="ViewModelLocator" />
    </Application.Resources>
</Application>

And here's a snippet of the ViewModelLocator class:

namespace MapperX.ViewModels
{
    /// <summary>
    /// This class instantiates all the viewmodels
    /// </summary>
    public class ViewModelLocator
    {
        WpfMap map = new WpfMap();

        private MainViewModel _mainViewModel;
        public MainViewModel MainViewModel
        {
            get
            {
                if (_mainViewModel == null)
                {
                    _mainViewModel = new MainViewModel(map)
                }
                return _mainViewModel;
            }
        }

        private LayersViewModel _layersViewModel;
        public LayersViewModel LayersViewModel
        {
            get
            {
                if (_layersViewModel == null)
                {
                    _layersViewModel = new LayersViewModel(map)
                }
                return _layersViewModel;
            }
        }
    }
}

And then I set the DataContext for the views .xaml like so: DataContext="{Binding Path=MainViewModel, Source={StaticResource ViewModelLocator}}"

What's the correct way to still be able to use the ViewModelLocator without the App.xaml??

Answer 1

Instead of relying on a resource, you may create an attached property to set the DataContext of the views in your control library:

namespace ControlsAndResources
{
    public class View
    {
        private static readonly ViewModelLocator s_viewModelLocator = new ViewModelLocator();

        public static readonly DependencyProperty ViewModelProperty = DependencyProperty.RegisterAttached("ViewModel", typeof(string), 
            typeof(ViewModelLocator), new PropertyMetadata(new PropertyChangedCallback(OnChanged)));

        public static void SetViewModel(UserControl view, string value) => view.SetValue(ViewModelProperty, value);

        public static string GetViewModel(UserControl view) => (string)view.GetValue(ViewModelProperty);

        private static void OnChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            UserControl view = (UserControl)d;
            string viewModel = e.NewValue as string;
            switch (viewModel)
            {
                case "MainViewModel":
                    view.DataContext = s_viewModelLocator.MainViewModel;
                    break;
                case "LayersViewModel":
                    view.DataContext = s_viewModelLocator.LayersViewModel;
                    break;
                default:
                    view.DataContext = null;
                    break;
            }
        }
    }
}

Usage:

<UserControl xmlns:local="clr-namespace:ControlsAndResources" ... 
             local:View.ViewModel="MainViewModel">