Command does not show the right usercontrol

Question

I have a WPF application that looks like: When the user click on the left side(navigation bar) for example the server button, then it should display to server usercontrol. It should show different screen on the right side depends on, which button that the user clicked. The main xaml file code:

<igWpf:XamRibbonWindow x:Class="BackupCustomizing.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:ignore="http://www.ignore.com"
        xmlns:ig="http://schemas.infragistics.com/xaml"
        xmlns:views="clr-namespace:BackupCustomizing.Views"
        xmlns:viewmodel="clr-namespace:BackupCustomizing.ViewModel"               
        xmlns:igWpf="http://schemas.infragistics.com/xaml/wpf"
        mc:Ignorable="d ignore"
        Height="400"
        Width="700"
        Title="Backup customizing V0.1"
        DataContext="{Binding Main, Source={StaticResource Locator}}" ResizeMode="NoResize">

    <igWpf:XamRibbonWindow.Resources>
        <DataTemplate DataType="{x:Type viewmodel:ServerViewModel}">
            <views:ServerView/>
        </DataTemplate>
    </igWpf:XamRibbonWindow.Resources>

    <ig:ThemeManager.Theme>
        <ig:Office2013Theme />
    </ig:ThemeManager.Theme>
    <igWpf:RibbonWindowContentHost x:Name="_content"
                                   Theme="Office2013"
                                   igWpf:RibbonWindowContentHost.ApplicationAccentColor="#0072C6">
        <Grid x:Name="LayoutRoot">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <views:NavigationView Grid.Column="0"/>
            <ContentPresenter Content="{Binding CurrentViewModel}" Grid.Column="1"/>
        </Grid>

    </igWpf:RibbonWindowContentHost>
</igWpf:XamRibbonWindow>

As you can see above, I have a datatemplate that reference the datatype ServerViewModel

<igWpf:XamRibbonWindow.Resources>
        <DataTemplate DataType="{x:Type viewmodel:ServerViewModel}">
            <views:ServerView/>
        </DataTemplate>
</igWpf:XamRibbonWindow.Resources>

An a content presenter that should show the current usercontrol on the right side, depends which button was pressed.

<ContentPresenter Content="{Binding CurrentViewModel}" Grid.Column="1"/>

And the code behind:

using System.Diagnostics;
using BackupCustomizing.Model;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;

namespace BackupCustomizing.ViewModel
{
    /// <summary>
    ///     This class contains properties that the main View can data bind to.
    ///     <para>
    ///         See http://www.galasoft.ch/mvvm
    ///     </para>
    /// </summary>
    public class MainViewModel : ViewModelBase
    {
        private readonly IDataService _dataService;
        private ViewModelBase _currentViewModel;
        private ServerViewModel _serverViewModel;

        /// <summary>
        /// Views change commands.
        /// </summary>
        public RelayCommand ServerCmd { get; set; }


        public ViewModelBase CurrentViewModel
        {
            get { return _currentViewModel; }
            set
            {
                _currentViewModel = value;
                RaisePropertyChanged("CurrentViewModel");
            }
        }

        /// <summary>
        ///     Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel(IDataService dataService)
        {
            _dataService = dataService;
            _dataService.GetData(
                (item, error) => { });

            _serverViewModel = new ServerViewModel();
            //_currentViewModel = _serverViewModel;

            ServerCmd = new RelayCommand(_SetServerView);
        }



        public void _SetServerView()
        {
            _currentViewModel = new ServerViewModel();
        }
    }
}

I bound the serverCmd relaycommand to a function:

ServerCmd = new RelayCommand(_SetServerView);

that should display usercontrol from server, it set currentview to serverview.

public void _SetServerView()
        {
            _currentViewModel = new ServerViewModel();
        }

The button server command is bound as follow:

<Button Grid.Row="0" Content="Server" Margin="10 10 5 0" Command="{Binding ServerCmd}"/>

The problem is, when I clicked on the button server , it does not display the server usercontrol why?
If I instantiate the currentview with serverview in the viewmodel constructor like:

public MainViewModel(IDataService dataService)
        {
            _dataService = dataService;
            _dataService.GetData(
                (item, error) => { });

            _serverViewModel = new ServerViewModel();
            _currentViewModel = _serverViewModel;

            ServerCmd = new RelayCommand(_SetServerView);
        }

Then it shows me the server usercontrol:

Answer 1

Spot the problem, in your ServerCmd command you should set the property not the field in order to RaisePropertyChange , so change your _SetServerView() to:

public void _SetServerView()
{
     CurrentViewModel = new ServerViewModel();
}