WPF swtich views using MVVM pattern without Navigation view

I'm building my first WPF app using MVVM pattern.

The application begins with a login View that contains a button of login.

When i click the login button it executes the ICommand in the LoginViewModel that gets a response from the server if the login succeded.

(I'm building a Chat based on WCF and WPF with user credentials)

*What I want to achieve is: if the login succeeded, it will switch to a SignUp view

(I know it doesn't make any sense, but it is only for testing the view switching)

So far I've been reading about Navigation via buttons. That is not my goal as you understand.

All I want is to verify the user and then, load the chat view (which I dont have yet, so this is why i mentiond the SignUp View which doesnt make any sense)

I have a Main Window and Xaml code which contains only Content Control withing a grid in order to switch the views:

   <Grid>
    <ContentControl Name="mainWindowContent" Content="{Binding CurrentView}"></ContentControl>
  </Grid>

The main window viewModel is the MainWinowViewModel that only contains a ViewModelBase named CurrentView and the ICommands that switch the CurrentView to different ViewModel each time:

public class MainWindowViewModel
{
    // simplified properties
    public ViewModelBase CurrentView { get; set; }
    public ICommand ViewLoginCommand { get; }
    public ICommand ViewSignUpCommand{ get; }
    public MainWindowViewModel()
    {
        ViewLoginCommand =new MyCommand(SetCurrentViewToLoginViewModel);
        ViewSignUpCommand = new MyCommand(SetCurrentViewToSignUpViewModel);
        CurrentView = new LoginViewModel();
    }
    private void SetCurrentViewToLoginViewModel()
    {
        CurrentView = new LoginViewModel();
    }
    private void SetCurrentViewToSignUpViewModel()
    {
        CurrentView = new SignUpViewModel();
    }
}

I assigned the DataContext to MainWindowViewModel in the MainWindow.CS

All the correct templates are on place in the App.xaml file which presents the view for each ViewModel:

   <Application.Resources>

    <DataTemplate DataType="{x:Type  local:LoginViewModel}">
        <Views:LoginView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:SignUpViewModel}">
        <Views:SignUpView />
    </DataTemplate>

</Application.Resources>

Again, I want the main window to present only 1 view at a time without a navigation view aside.

My question:

How do I make that when the login Succeeded, the CurrentView will change to SignUpViewModel.

Have I missed anything? Is my architecture correct? would you do anything different?

The way i see it, it can only happpen if somehow within the LoginViewModel , after the login succeeded, it will execute the ViewSignUpCommand in the DataContext which doesn't make sense and doesn't work.

I cant see how it binds all together. Thx ahead for your help!

BTW, pardon my english. if anything else (details, etc..) are needed in order to see the big picture, please notify me as well.


You are changing the CurrentView through a commands which is fine however the view does not know about the change without being notified. This is done by implementing the INotifyPropertyChanged interface.

I typically derive each viewmodel class from a ViewModelBase. The ViewModelBase implements the INotifyPropertyChanged. See examples online for such implementation.

You should end up with something like this:

public class MainWindowViewModel:ViewModelBase
{
        private ViewModelBase _CurrentView; //ViewModelBase or any common class,or interface of both types of views. 
        private ViewModelBase CurrentView
        {
            get
            {
                return _CurrentView;
            }
            set
            {
                if(_CurrentView != value)
                {
                    _CurrentView = value;
                    OnPropertyChanged();
                }
            }
        }
}

if you don't want to bother with a re-usable ViewModelBase class then you can simply implement INotifyPropertyChanged on the MainWindowViewModel.

see http://www.c-sharpcorner.com/uploadfile/0b73e1/mvvm-model-view-viewmodel-introduction-part-3/ as an example.

链接地址: http://www.djcxy.com/p/56188.html

上一篇: 在MVVM wpf中切换视图

下一篇: 使用MVVM模式而不使用导航视图的WPF swtich视图