WPF从带有MVVM的UserControl内部更改主窗口视图

Question

我目前正在尝试学习WPF和MVVM模式，但是从用户控件内部更改主窗口视图时感到困惑。

我目前有什么

我有一个窗口应用程序，启动时会显示一个登录视图，该视图是一个UserControl，并在我的主窗口中设置为ContentControl。

ApplicationView.xaml

    <Window x:Class="MyApplication.Views.ApplicationView"
        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.galasoft.ch/ignore"
        xmlns:local="clr-namespace:MyApplication.Views"
        xmlns:viewModels="clr-namespace:MyApplication.ViewModels"
        mc:Ignorable="d ignore"
        DataContext="{Binding Application, Source={StaticResource Locator}}">    
   <Window.Resources>
       <DataTemplate DataType="{x:Type viewModels:LoginViewModel }">
            <local:LoginView />
        </DataTemplate>
       <DataTemplate DataType="{x:Type viewModels:MainViewViewModel }">
           <local:MainView />
       </DataTemplate>
   </Window.Resources>
    <Grid>
        <ContentControl Content="{Binding CurrentPageViewModel}"></ContentControl>
    </Grid>
</Window>

ApplicationViewModel.cs

namespace MyApplication.ViewModels
{
    public class ApplicationViewModel : ViewModelBase
    {
        #region Fields

        private ICommand _changePageCommand;
        private IPageViewModel _currentPageViewModel;
        private List<IPageViewModel> _pageViewModels;

        #endregion

        public ApplicationViewModel()
        {
            //Add available pages
            PageViewModels.Add(new LoginViewModel());
            PageViewModels.Add(new MainViewViewModel());

            //Set starting page
            CurrentPageViewModel = PageViewModels[0];

        }

        #region Properties / Commands

        public ICommand ChangePageCommand
        {
            get
            {
                if (_changePageCommand == null)
                {
                    _changePageCommand = new RelayCommand<object>(
                        p => ChangeViewModel((IPageViewModel)p),
                        p => p is IPageViewModel);
                }

                return _changePageCommand;
            }
        }

        public List<IPageViewModel> PageViewModels
        {
            get
            {
                if (_pageViewModels == null)                
                    _pageViewModels = new List<IPageViewModel>();

                return _pageViewModels;
            }
        }

        public IPageViewModel CurrentPageViewModel
        {
            get
            {
                return _currentPageViewModel;
            }
            set
            {
                if (_currentPageViewModel != value)
                {
                    _currentPageViewModel = value;
                    this.VerifyPropertyName("CurrentPageViewModel");
                    this.RaisePropertyChanged();
                }
            }
        }

        #endregion


        #region Methods
        private void ChangeViewModel(IPageViewModel viewModel)
        {
            if (!PageViewModels.Contains(viewModel))
                PageViewModels.Add(viewModel);

            CurrentPageViewModel = PageViewModels
                .FirstOrDefault(vm => vm == viewModel);
        }
        #endregion
    }
}

我想实现的目标

一旦单击登录UserControl中的登录按钮，我想将应用程序窗口视图从LoginView更改为MainView。 我正在努力使这一切成为可能，以及如何实现这一目标。 任何帮助将不胜感激，谢谢。

Answer 1

您只需要从UserControl在ApplicationViewModel执行Command 。 考虑到您的UserControl上有一个Button ，单击时需要在主窗口中切换视图，可以按以下方式触发它

<Button Command="{Binding DataContext.ChangePageCommand, RelativeSource=
          {RelativeSource AncestorType={x:Type ApplicationViewModel}}, Mode=OneWay}" />

如果需要完整的工作示例，则可以引用WPF MVVM导航视图

希望这可以帮助。

Answer 2

在应用程序View.xaml中：

<ContentControl Content="{Binding CurrentPageViewModel, Mode=TwoWay}"></ContentControl>

在loginview.xaml中 ，将登录按钮click绑定到LoginViewModel内部的命令，作为LoginButtonClickedCommand

在ApplicationViewModel中收听命令

LoginViewModelInstance.LoginButtonClickedCommand = new RelayCommand(OnLoginButtonClicked, param => true);

处理命令处理程序并更改ApplicationViewModel中的CurrentPageViewModel

private void OnLoginButtonClicked(object obj)
{
    CurrentPageViewModel = new ContentPageViewModel();
}

这应该为您解决问题。