SimpleIoc MVVM resolve view (UserControl) - wpf

Question

Hope someone can enlighten me on the best mvvm practice using service locator.
Base principles are clear. I have my views with corresponding view model, everything works at it should.
Lets make a simple example. I have one main window and 2 user controls UCA and UCB. Each of them have view model registered in the locator class.
Using this IoC pattern how can you display UCA and UCB in the main window using one content control and binding through main window view model? To be precise I want to show only one control at the same time. I can't bind the UCA or UCB view model because this is view first approach, the view is not automatically resolved.
What is the correct approach for this?
Thanks

Answer 1

You can create a separate service for launching views as dialog, so that it can be used in a generic way across the application. And will inject this service to the ViewModel via Constructor which wants to launch any dialog.
public interface IDialogService<T>
{
void Show();
void ShowDialog();
}
public class DialogService<T> : IDialogService<T> where T : Window
{
public void Show()
{
container.Resolve<T>().Show();
}
public void ShowDialog()
{
container.Resolve<T>().ShowDialog();
}
}
Now just inject this service to the respective viewmodel.
public class YourViewModel
{
//commands
public ICommand someCommand { get; set; }
private IDialogService<BookingView> _dialogService;
public YourViewModel(IDialogService<YourView > dialogService)
{
_dialogService = dialogService
someCommand = new RelayCommand(someCommandDoJob, () => true);
}
public void someCommandDoJob(object obj)
{
//Since you want to launch this view as dialog you can set its datacontext in its own constructor.
_dialogService.ShowDialog();
}
}

Answer 2

One solution could be using ContentTemplate property together with DataTrigger to selectively show UCA or UCB (see example below). UCA could also be set as default view in a style setter. In this case only one DataTriggers is needed.
Another solution could be using ContentTemplateSelector property and implement a DataTemplateSelector.
See: ContentControl.ContentTemplateSelector (MSDN)
<!--content control in main window-->
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Style.Triggers>
<!--suppose main window view model has a bool property UseUCA-->
<!--if UseUCA is true render UCA view-->
<DataTrigger Binding="{Binding UseUCA}" Value="True">
<DataTrigger.Setters>
<!--by setting ContentTemplate property you control what is rendered inside of the content control-->
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<!--render UCA view-->
<local:UCA />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>
<!--if UseUCA is false render UCB view-->
<DataTrigger Binding="{Binding UseUCA}" Value="False">
<DataTrigger.Setters>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<!--render UCB view-->
<local:UCB />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>

Answer 3

OK... here is a thought... you can keep track of the "currentview" in your MainViewModel and let the UI show the correct control based on type. Here is a quick example. I am using a Button to switch views... this could ideally be done via any logic that fits your requirements.
MainWindow:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication4"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Content="Switch Views" Command="{Binding SwitchViewsCommand}" />
<ContentControl Grid.Row="1" Content="{Binding CurrentControl}">
</ContentControl>
</Grid>
</Window>
UCA and UCB are simply user controls with different text in them:
<UserControl x:Class="WpfApplication4.UserControls.UCA"
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:local="clr-namespace:WpfApplication4.UserControls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock Text="This is user control A" />
</Grid>
</UserControl>
UCAViewModel and UCBViewModel are empty viewmodels in my example that inherit from ViewModelBase
namespace WpfApplication4.ViewModel
{
public class UCAViewModel : ViewModelBase
{
}
}
The MainViewModel handles the currently shown view based on its viewmodel
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using Microsoft.Practices.ServiceLocation;
namespace WpfApplication4.ViewModel
{
public class MainViewModel : ViewModelBase
{
public MainViewModel()
{
RegisterCommands();
SwitchView();
}
private void SwitchView()
{
if(CurrentControl == null)
{
CurrentControl = ServiceLocator.Current.GetInstance<UCAViewModel>();
}
else
{
if(CurrentControl is UCAViewModel)
CurrentControl = ServiceLocator.Current.GetInstance<UCBViewModel>();
else
CurrentControl = ServiceLocator.Current.GetInstance<UCAViewModel>();
}
}
private ViewModelBase _currentControl;
public ViewModelBase CurrentControl
{
get { return _currentControl; }
set
{
if (_currentControl != value)
{
_currentControl = value;
RaisePropertyChanged("CurrentControl");
}
}
}
private void RegisterCommands()
{
SwitchViewsCommand = new RelayCommand(SwitchView);
}
public RelayCommand SwitchViewsCommand { get; private set; }
}
}
the ViewModelLocator stores the instances
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;
namespace WpfApplication4.ViewModel
{
/// <summary>
/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
/// </summary>
public class ViewModelLocator
{
/// <summary>
/// Initializes a new instance of the ViewModelLocator class.
/// </summary>
public ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
SimpleIoc.Default.Register<MainViewModel>();
SimpleIoc.Default.Register<UCAViewModel>();
SimpleIoc.Default.Register<UCBViewModel>();
}
public MainViewModel Main
{
get
{
return ServiceLocator.Current.GetInstance<MainViewModel>();
}
}
public static void Cleanup()
{
// TODO Clear the ViewModels
}
}
}
And finally, the glue that makes the correct view show is done in the app.xaml file:
<Application x:Class="WpfApplication4.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication4" StartupUri="MainWindow.xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:localUC="clr-namespace:WpfApplication4.UserControls"
xmlns:vm="clr-namespace:WpfApplication4.ViewModel">
<Application.Resources>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
<DataTemplate DataType="{x:Type vm:UCAViewModel}">
<localUC:UCA />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:UCBViewModel}">
<localUC:UCB />
</DataTemplate>
</Application.Resources>
</Application>