将ContentControl绑定到ApplicationViewModel将确定要查看哪个用户控件？

Question

I am very new to WPF and relatively new to C# programming (programming in general), and I'm trying to develop a WPF application.

I have tried to go through several posts similar to this, but I can't seem to find the answer of why this is not working.

So, I'm having a hard time understanding the MVVM architecture, how and what it requires to switch between multiple user controls binded to a single <ContentControl /> . From what I understand and read so far, is that I have to bind the view model like this:

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

So here is what I want to a achieve:

An ApplicationWindow.xaml with sidebar menu on the left side that will be shown at all times when the application is running, and a <ContentControl/> on the remaining space. Buttons shown on the sidebar menu will be:

• Main (will show MainView.xaml User Control, should be the default User Control)
• Settings (will show SettingsView.xaml User Control)
• Exit (will close the application)

I understand that I need to bind the buttons to ICommand commands, and I understand the concept of a RelayCommand.cs class. So let's jump into the simplified code of my idea and figure out what I need to understand and what I may have misunderstood in the process.

What MainView.xaml and SettingsView.xaml contain are not important right now, as I'm just trying to figure out how to show them in my application.

Here's the ApplicationWindow.xaml :

<Window x:Class="WpfApp1.ApplicationWindow"
        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:WpfApp1"
        xmlns:v="clr-namespace:WpfApp1.View"
        xmlns:vm="clr-namespace:WpfApp1.ViewModel"
        mc:Ignorable="d"
        Title="ApplicationWindow" Height="1080" Width="1920"
        WindowStyle="None" WindowState="Maximized">

    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:MainViewModel}">
            <v:MainView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:SettingsViewModel}">
            <v:SettingsView/>
        </DataTemplate>
    </Window.Resources>

    <DockPanel>
        <!--Menu bar on the left-->
        <Border DockPanel.Dock="Left">
            <StackPanel Orientation="Vertical" Background="Gray" Width="120">
                <Button Content="Main" Command="{Binding ShowMainCommand}"/>
                <Button Content="Settings" Command="{Binding ShowSettingsCommand}"/>
                <Button Content="Exit" Command="{Binding ExitApplicationCommand}"/>
            </StackPanel>
        </Border>
        <!--The content control that view the current view-->
        <ContentControl Content="{Binding ApplicationViewModel}"/>
    </DockPanel>
</Window>

Note: DataContext is set to ApplicationViewModel.cs in App.xaml.cs by overriding the OnStartup() method.

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);

        ApplicationWindow app = new ApplicationWindow
        {
            DataContext = new ApplicationViewModel()
        };
        app.Show();
    }
}

Here's the ApplicationViewModel.cs :

public class ApplicationViewModel : ViewModelBase
{
    #region Fields

    private List<ViewModelBase> _viewModels;
    private ViewModelBase _currentViewModel;

    private ICommand _showMainCommand;
    private ICommand _showSettingsCommand;
    private ICommand _exitApplicationCommmand;

    #endregion

    #region Constructor

    public ApplicationViewModel()
    {
        ViewModels = new List<ViewModelBase>
        {
            new MainViewModel(),
            new SettingsViewModel()
        };

        CurrentViewModel = ViewModels[0];
    }

    #endregion

    #region Public Properties

    public List<ViewModelBase> ViewModels
    {
        get
        {
            return _viewModels;
        }
        set
        {
            if (_viewModels != value)
            {
                _viewModels = value;
                OnPropertyChanged(nameof(ViewModels));
            }
        }
    }

    public ViewModelBase CurrentViewModel
    {
        get
        {
            return _currentViewModel;
        }
        set
        {
            if(_currentViewModel != value)
            {
                _currentViewModel = value;
                OnPropertyChanged(nameof(CurrentViewModel));
            }
        }
    }

    #endregion

    #region Commands

    public ICommand ShowMainCommand
    {
        get
        {
            if(_showMainCommand == null)
            {
                _showMainCommand = new RelayCommand(action => ShowMain());
            }
            return _showMainCommand;
        }
    }

    public ICommand ShowSettingsCommand
    {
        get
        {
            if (_showSettingsCommand == null)
            {
                _showSettingsCommand = new RelayCommand(action => ShowSettings());
            }
            return _showSettingsCommand;
        }
    }

    public ICommand ExitApplicationCommand
    {
        get
        {
            if (_exitApplicationCommmand == null)
            {
                _exitApplicationCommmand = new RelayCommand(action => ExitApplication());
            }
            return _exitApplicationCommmand;
        }
    }

    #endregion

    #region Private Methods

    private void ShowMain()
    {
        CurrentViewModel = ViewModels[0];
    }

    private void ShowSettings()
    {
        CurrentViewModel = ViewModels[1];
    }

    private void ExitApplication()
    {
        MessageBoxResult result = MessageBox.Show("Are you sure you want to exit?", "Exit", MessageBoxButton.YesNo);
        if (result == MessageBoxResult.Yes)
        {
            System.Windows.Application.Current.Shutdown();
        }
    }

    #endregion
}

So, from what I understand, the ApplicationWindow.xaml should be able to determine which view to show out from what the CurrentViewModel is set to.

For the sake of information (or miss-information), here are ViewModelBase.cs :

public class ViewModelBase : INotifyPropertyChanged
{
    #region INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion
}

And RelayCommand.cs :

public class RelayCommand : ICommand
{
    #region Fields

    private readonly Action<object> _execute;
    private readonly Predicate<object> _canExecute;

    #endregion

    #region Constructors

    public RelayCommand(Action<object> execute, Predicate<object> canExecute)
    {
        if (execute == null)
            throw new ArgumentNullException("execute");

        _execute = execute;
        _canExecute = canExecute;
    }

    public RelayCommand(Action<object> execute) : this(execute, null)
    {
    }

    #endregion

    #region ICommand

    public bool CanExecute(object parameters)
    {
        return _canExecute == null ? true : _canExecute(parameters);
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public void Execute(object parameters)
    {
        _execute(parameters);
    }

    #endregion
}

I hope my thought process on this was clear to you, and that one of you smart programmers out there can help solving this, and help me understand why this isn't turning out as I want it to.

In case of what I'm trying to do is harder than Elon Musk's project on making life multiplanetary, feel free to explain why and suggest me a better way to

Answer 1

您的Content控件绑定应指向您在切换ViewModels时更改的实际属性

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