Navigating Views in WPF

Question

I am new to WPF, just got thrown on a project. There is already an existing LoginWindow, and currently there is a forgot password button which opens a new dialog window. The manager wants that changed to use the same window, instead of opening a new one on top of it. I haven't seen a really solid example of how to accomplish this, as there seems to be a lot of different ways to do things in WPF. My initial though was maybe to use a Panel like a div and show and hide them in the same window like I DIV in HTML but not sure.

The current login someone already built looks like this:


    
        
    
    
        
            
                
                
                
            

            
                Always
                Flyouts
                HiddenTitleBar
                Never

Jon Wells · Accepted Answer

I'm sorry this is such a crude example but I hope it shows you how you could solve your problem. Below is a simple example on how to swap two user controls using a button...

You have a shell view:

Bound to a view model like this:

    public class MainWindowViewModel : ViewModelBase
    {
        ViewModelBase _activeView;

        public MainWindowViewModel()
        {
            _activeView = new EnterPasswordViewModel();
            ChangeViewCommand = new ChangeViewCommand(this);
        }

        public ViewModelBase ActiveView
        {
            get { return _activeView; }

            set
            {
                _activeView = value;
                OnPropertyChanged("ActiveView");
            }
        }

        public ICommand ChangeViewCommand { get; set; }
    }

Then all you need to do is change the viewmodel being displayed by your content presenter. This could be achieved by wiring up a command to toggle your user controls/view models.

class ChangeViewCommand : ICommand
{
    private MainWindowViewModel _mainWindowViewModel;

    public event EventHandler CanExecuteChanged;

    public ChangeViewCommand(MainWindowViewModel mainWindowViewModel)
    {
        _mainWindowViewModel = mainWindowViewModel;
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        if (_mainWindowViewModel.ActiveView.GetType() == typeof(EnterPasswordViewModel))
        {
            _mainWindowViewModel.ActiveView = new ChangePasswordViewModel();
        }
        else
        {
            _mainWindowViewModel.ActiveView = new EnterPasswordViewModel();
        }
    }
}

Heres the base class for completeness:

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

I havent shown the other two views and view models but the views are just WPF User controls and the view models are classes that implement viewmodelbase. Let me know if you need more information.

Navigating Views in WPF

Answers (1)

Related Questions