Changing the View for a ViewModel

by

Less words more code.
As far as you said, you have the class SampleViewModel. I added the property Title for demonstration and ViewType for identifying the correct view:

public enum ItemViewType { View1, View2 };

public class SampleViewModel 
{
    public string Title { get; set; }
    public ItemViewType ViewType { get; set; }
}

The DataTemplateSelector for two views depending on the ViewType property:

class ItemViewTemplateSelector : DataTemplateSelector
{
    public DataTemplate View1Template { get; set; }
    public DataTemplate View2Template { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var vm = item as SampleViewModel;
        if (vm == null)
            return null;

        switch (vm.ViewType)
        {
            case ItemViewType.View1:
                return View1Template;
            case ItemViewType.View2:
                return View2Template;
        }

        return null;
    }
}

Xaml code:

<Window.Resources>
    <DataTemplate x:Key="view1Template">
        <TextBlock Text="{Binding Title}" Foreground="Red"/>
    </DataTemplate>
    <DataTemplate x:Key="view2Template">
        <TextBox Text="{Binding Title}" />
    </DataTemplate>
    <local:ItemViewTemplateSelector x:Key="viewTemplateSelector"
                                    View1Template="{StaticResource view1Template}"
                                    View2Template="{StaticResource view2Template}"/>
</Window.Resources>

<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>

<StackPanel>
    <Button Content="ChangeView" HorizontalAlignment="Center" Command="{Binding SwitchViewCommand}"/>
    <ContentControl  Content="{Binding ItemViewModel}" ContentTemplateSelector="{StaticResource viewTemplateSelector}"/>
</StackPanel>

The main part is in the class MainViewModel where I’ve put the logic for switching views:

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        this.ItemViewModel = new SampleViewModel { Title = "Some title", ViewType = ItemViewType.View1 };

        this.SwitchViewCommand = new RelayCommand(() =>
        {
            this.ItemViewModel.ViewType = this.ItemViewModel.ViewType == ItemViewType.View1
                                            ? ItemViewType.View2
                                            : ItemViewType.View1;
            //The magic senquence of actions which forces a contentcontrol to change the content template
            var copy = this.ItemViewModel;
            this.ItemViewModel = null;
            this.ItemViewModel = copy;
        });
    }

    public RelayCommand SwitchViewCommand { get; set; }

    private SampleViewModel itemViewModel;

    public SampleViewModel ItemViewModel
    {
        get { return itemViewModel; }
        set
        {
            itemViewModel = value;
            RaisePropertyChanged("ItemViewModel");
        }
    }
}

The SwitchViewCommand can be any type of command, I use the command from the mvvmlight library.

Inside the handler of the command I change the type of viewmodel and update the property ItemViewModel in a tricky way because a ContentControl refreshes a view only if to change the Content property, and this property will not be changed unless you set a reference to different object.

I mean, even the code this.ItemViewModel = this.itemViewModel will not change the view.
It’s strange, but the workaround doesn’t require much work.

More Related Contents:

  1. MVVM: Tutorial from start to finish?
  2. Good or bad practice for Dialogs in wpf with MVVM?
  3. Binding a WPF ComboBox to a custom list
  4. How to bind to a PasswordBox in MVVM
  5. ICommand MVVM implementation
  6. How to bind WPF button to a command in ViewModelBase?
  7. How do I bind a TabControl to a collection of ViewModels?
  8. Opening new window in MVVM WPF
  9. Bind to SelectedItems from DataGrid or ListBox in MVVM
  10. How to implement a progress bar using the MVVM pattern
  11. Implementing CollectionChanged
  12. What’s the best way to pass event to ViewModel?
  13. MVVM in WPF – How to alert ViewModel of changes in Model… or should I?
  14. WPF MVVM Why use ContentControl + DataTemplate Views rather than straight XAML Window Views?
  15. MVVM Light & WPF – Binding Multiple instances of a Window to a ViewModel
  16. Disallow/Block selection of disabled combobox item in wpf
  17. Binding SelectedItems of ListView to ViewModel
  18. Mvvm model ViewModel
  19. WPF – Set Focus when a button is clicked – No Code Behind
  20. Proper way to use CollectionViewSource in ViewModel
  21. MVVM Sync Collections
  22. Moving to next control on Enter keypress in WPF
  23. Can I somehow temporarily disable WPF data binding changes?
  24. One ViewModel for UserControl and Window or separate ViewModels
  25. WPF loading spinner
  26. mvvm how to make a list view auto scroll to a new Item in a list view
  27. How to set focus to textbox using MVVM?
  28. Page Navigation using MVVM in Store App
  29. How to bind column header to property in ViewModel? (WPF MVVM)
  30. Limit binding updates per second

Leave a Comment