从另一个视图更改ContentControl的内容

Question

I have question how to control views in content control. I have two views where are buttons and I want that click in one of this buttons will occur change of view to second. I'm using MVVM and my problem is that I don't know how change ViewModel binded to ContentControl. Maybe my code tell you more than I can clarify:

// Main window view
<Window x:Class="ContentControlTestApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    DataContext="{Binding Main, Source={StaticResource Locator}}">
    <Grid>
        <ContentControl Content="{Binding CurrentViewModel}"/>
    </Grid>
</Window>
// Main window view model
public class MainViewModel : ViewModelBase
{
    private ViewModelBase _currentViewModel;

    public ViewModelBase CurrentViewModel
    {
        get { return _currentViewModel; }
        set
        {
            _currentViewModel = value; 
            RaisePropertyChanged("CurrentViewModel");
        }
    }
    private ViewModelLocator Locator
    {
        get
        {
            return App.Current.Resources["Locator"] as ViewModelLocator;
        }
    }

    public MainViewModel()
    {
        CurrentViewModel = Locator.FirstControl;
    }
}

//App.xaml
<Application x:Class="ContentControlTestApp.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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:vm="clr-namespace:ContentControlTestApp.ViewModel" xmlns:view="clr-namespace:ContentControlTestApp.View">
<Application.Resources>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
  <DataTemplate DataType="{x:Type vm:FirstControlViewModel}">
      <view:FirstControlView></view:FirstControlView>
  </DataTemplate>
    <DataTemplate DataType="{x:Type vm:SecondControlViewModel}">
        <view:SecondControlView></view:SecondControlView>
    </DataTemplate>
</Application.Resources>
</Application>

//First Control View
<UserControl x:Class="ContentControlTestApp.View.FirstControlView"
         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" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <StackPanel>
        <Label Content="First Control" />
        <Button Content="Switch to second control" Command="{Binding SwitchToSecondControlCommand}"/>
    </StackPanel>
</Grid>
</UserControl>

//First Control view model
public class FirstControlViewModel:ViewModelBase
{
    private RelayCommand _switchToSecondControlCommand;

    public ICommand SwitchToSecondControlCommand
    {
        get
        {
            return _switchToSecondControlCommand ??
                   (_switchToSecondControlCommand = new RelayCommand(SwitchToSecondControlExecute));
        }
    }

    private void SwitchToSecondControlExecute()
    {
        //I don't know what to do here
    }
}

//Second Control View
<UserControl x:Class="ContentControlTestApp.View.SecondControlView"
         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" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <StackPanel>
        <Label Content="Second Control" />
        <Button Content="Switch to first control" Command="{Binding SwitchToFirstControlCommand}"/>
    </StackPanel>
</Grid>
</UserControl>

//Second Control view model
public class SecondControlViewModel:ViewModelBase
{
    private RelayCommand _switchToFirstControlCommand;

    public ICommand SwitchToFirstControlCommand
    {
        get
        {
            return _switchToFirstControlCommand ??
                   (_switchToFirstControlCommand = new RelayCommand(SwitchToSecondControlExecute));
        }
    }

    private void SwitchToSecondControlExecute()
    {
        //I don't know what to do here
    } 
}

//ViewModelLocator
public class ViewModelLocator
{
    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

        SimpleIoc.Default.Register<MainViewModel>();
        SimpleIoc.Default.Register<FirstControlViewModel>();
        SimpleIoc.Default.Register<SecondControlViewModel>();
    }

    public MainViewModel Main
    {
        get
        {
            return ServiceLocator.Current.GetInstance<MainViewModel>();
        }
    }

    public FirstControlViewModel FirstControl
    {
        get { return ServiceLocator.Current.GetInstance<FirstControlViewModel>(); }
    }

    public SecondControlViewModel SecondControl
    {
        get { return ServiceLocator.Current.GetInstance<SecondControlViewModel>(); }
    }

    public static void Cleanup()
    {
        // TODO Clear the ViewModels
    }
}

And I don't know how change CurrentViewModel in MainViewModel from for example FirstControlViewModel's command. Any idea? I thought about some event but this looks not good. Does anyone have any idea?

Thanks

Answer 1

First things first... to change the view, we change the view model (assuming that you have correctly declared a DataTemplate for it):

<ContentControl Content="{Binding CurrentViewModel}"/>

...

CurrentViewModel = new OtherViewModel();

Clearly, you can only do that from your MainViewModel . Therefore, you should handle the Button ICommand in your MainViewModel , so move your SwitchToFirstControlCommand there and change your Button.Command Binding Path to this:

<Button Content="Switch to first control" Command="{Binding DataContext.
    SwitchToFirstControlCommand, RelativeSource={RelativeSource 
    AncestorType={x:Type MainWindow}}}" />

Now in your main view model:

private void SwitchToSecondControlExecute()
{
    CurrentViewModel = new OtherViewModel();
}