How to open a new View in WPF using MVVM architecture?

Question

I have a project in which I have various Library Classes. I have a Views Library Class and a ModelViews library class. In the Views Library class I have the .xaml files corresponding to the wpf views. And in the ModelViews Library Class the commands that I use in the views. Now what I want to do is to call a new View when the user logs in, but I don't know how to do this. I have the code for logging in like this:

 public void Login()
        {
            try
            {
                USUARIO usuario = bl.EncontrarUsuarioPorUsername(Usuario);
                string savedPasswordHash = usuario.PASSWORD;
                /* Extract the bytes */
                byte[] hashBytes = Convert.FromBase64String(savedPasswordHash);
                /* Get the salt */
                byte[] salt = new byte[16];
                Array.Copy(hashBytes, 0, salt, 0, 16);
                /* Compute the hash on the password the user entered */
                var pbkdf2 = new Rfc2898DeriveBytes(Password, salt, 10000);
                byte[] hash = pbkdf2.GetBytes(20);
                /* Compare the results */
                for (int i = 0; i < 20; i++)
                    if (hashBytes[i + 16] != hash[i])
                    {
                        throw new UnauthorizedAccessException();
                    }
                MessageBox.Show("Login exitoso!");
            }
            catch (UnauthorizedAccessException)
            {
                MessageBox.Show("Contrasena Incorrecta");
            }
            catch(NullReferenceException)
            {
                MessageBox.Show("Nombre de usuario incorrecto");
            }


        }

Now, what I want to do is when the logging is successful, to close the login window and open a ListUsersView.xaml insted of showing the message "Login exitoso" inside the MessageBox. I have tried various things like creating services and helpers, but I can't put anything to work. How can I solve this? How can I call or reference a View in the ModelView class library?

Answer 1

How can I call or reference a View in the ModelView class library?

You shouldn't referernce a view. This would not only break the MVVM pattern but also cause a circular dependency between your projects.

What you should do is to define an interface in the ModelViews project. You can call it something like IWindowService. You then implement this interface in the Views project.

Please refer to my answer here for a code sample.

Answer 2

Now, what I want to do is when the logging is successful, to close the login window and open a ListUsersView.xaml insted of showing the message "Login exitoso" inside the MessageBox. I have tried various things like creating services and helpers, but I can't put anything to work. How can I solve this? How can I call or reference a View in the ModelView class library?

You can try the code below.

Define a isvalidated property to check the user is Authorized.

    try
        {
            USUARIO usuario = bl.EncontrarUsuarioPorUsername(Usuario);
            string savedPasswordHash = usuario.PASSWORD;
            /* Extract the bytes */
            byte[] hashBytes = Convert.FromBase64String(savedPasswordHash);
            /* Get the salt */
            byte[] salt = new byte[16];
            Array.Copy(hashBytes, 0, salt, 0, 16);
            /* Compute the hash on the password the user entered */
            var pbkdf2 = new Rfc2898DeriveBytes(Password, salt, 10000);
            byte[] hash = pbkdf2.GetBytes(20);
            /* Compare the results */
            bool isvalidated = true;
            for (int i = 0; i < 20; i++)
            {
                if (hashBytes[i + 16] != hash[i])
                {
                    isvalidated = false;
                    break;

                }
            }
            if (isvalidated == false)
            {
                throw new UnauthorizedAccessException();
            }
            else
            {
                //MessageBox.Show("Login exitoso!");
                //shou your ListUsersView.xaml call it from your Views Library Class and set datacontext.

                 WpfCustomControlLibrary1.ListUsersView listviewsc = new WpfCustomControlLibrary1.ListUsersView();
                 listviewsc.Show();

                  //you can use the Application.Current.MainWindow method to find the MainWindow. Then, hide
                  BtnWindowsForm window = (BtnWindowsForm)Application.Current.MainWindow;
                  window.Close();//hide

            }
        }
        catch (UnauthorizedAccessException)
        {
            MessageBox.Show("Contrasena Incorrecta");
        }

Besides, you can also use a MVVM framework like mvvm light or prism which offer more developer friendly ways to use icommand.

Answer 3

All you have to do is this:

If you want to open a new WPF window:

Window newWindow = new Window();
            newWindow.Show();

If you want to assign a new view to ViewModel (connecting View & ViewModel) with a UserControl:

Defining in XAML:

<UserControl Content="{Binding CurrentView}"/>

Defining in the ViewModel:

private UserControl currentView;
    public UserControl CurrentView
    {
        get { return currentView; }
        set { currentView = value; OnPropertyChanged(nameof(CurrentView)); }
    }

In the constructor:

CurrentView= new ExampleViewModel();