Navigation between view using MVVM in WPF

Question

Im new to WPF and MVVM. Im trying to create Login window using MVVM and i succeeded to create.
here is the Login.xmal code.

<Button x:Name="btnLogin" Content="Login" HorizontalAlignment="Left" Margin="51,0,0,10" 
            VerticalAlignment="Bottom" Width="124" Height="57" Grid.Column="1" 
            CommandParameter="{Binding ElementName=txtPassword}" 
            Command="{Binding LoginCommand}"
            >           
    </Button>

    <Button x:Name="btnClose" Content="Close" HorizontalAlignment="Left" Margin="180,0,0,10" 
        VerticalAlignment="Bottom" Width="124" Height="57" Grid.Column="1"    Command="{Binding ExitCommand}">

    </Button>

    <Label Content="User Name" Margin="10,74,0,0" VerticalAlignment="Top" Height="49" 
           VerticalContentAlignment="Center" Grid.Column="1" HorizontalAlignment="Left" Width="130"/>

    <TextBox x:Name="txtUserName" HorizontalAlignment="Right" Height="49" Margin="0,74,10,0" 

             TextWrapping="Wrap"  VerticalAlignment="Top" Width="185" 
             VerticalContentAlignment="Center" Grid.Column="1" FontSize="18">
        <TextBox.Text>
            <Binding Path="Username" Mode="OneWayToSource">
                <Binding.ValidationRules>
                    <ExceptionValidationRule></ExceptionValidationRule>
                </Binding.ValidationRules>
            </Binding>
        </TextBox.Text>
    </TextBox>

    <Label Content="Password" Margin="10,128,0,0" VerticalAlignment="Top" Height="49" 
           VerticalContentAlignment="Center" Grid.Column="1" HorizontalAlignment="Left" Width="130"/>
    <PasswordBox x:Name="txtPassword" HorizontalAlignment="Right"
             Height="49" Margin="0,128,10,0"
          VerticalAlignment="Top" Width="185" 
        VerticalContentAlignment="Center" Grid.Column="1" FontSize="18">

    </PasswordBox>

after this i have created the viewModeBase.cs class in which i implemented INotifyPropertyChanged and this included in LoginViewModel.cs... here is LoginViewModel.cs code

public class LoginViewModel : ViewModelBase
{
    private string m_username;
    public string Username
    {
        get { return m_username; }
        set
        {
            m_username = value;
            OnPropertyChanged("Username");

        }
    }

    private string m_password;
    public string Password
    {
        get { return m_password; }
        set
        {
            m_password = value;
            OnPropertyChanged("Password");
        }
    }
    private DelegateCommand exitCommand;

    public ICommand ExitCommand
    {
        get
        {
            if (exitCommand == null)
            {
                exitCommand =new DelegateCommand(Exit);
            }
            return exitCommand;
        }
    }

    private void Exit()
    {
        Application.Current.Shutdown();
    }

    public LoginViewModel()
    {

    }

    private DelegateCommand<object> loginCommand;
    public ICommand LoginCommand
    {
        get
        {
            if (loginCommand == null)
            {
                loginCommand = new DelegateCommand<object>(Login);
            }
            return loginCommand;
        }
    }



    public void Login(object pPasswordBox)
    {
        try
        {
            if (string.IsNullOrEmpty(Username))
            {
                MessageBox.Show("Username cannot be blank.");                    
                return;
            }

            if (string.IsNullOrEmpty(((PasswordBox)pPasswordBox).Password))
            {
                MessageBox.Show("Password cannot be blank.");                
                return;
            }

            dlUsers odlUsers = new dlUsers();
            bool lResult = odlUsers.UserAuthentication(clsGymManagment.ConnectionString, Username, 
                ((((PasswordBox)pPasswordBox).Password)));
            if (lResult)
            {
                ///TODO: Need code to Hide Login Window and Open New XAML.....
            }
            else
            {
                MessageBox.Show("Username/Password is wrong.");                   
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }
    }         
}

As i want to Hide LOGIN.XAML file and open UI.XAML file.. (UI.XAML you can consider any XAML window.)... also it would be help full if you could assist me to navigation between Usercontrol on UI.XAML

strattonn · Accepted Answer · 2013-05-28T06:24:10.607

2

You need to control the login window from a separate block of code, for instance App.xaml.cs. Set app.xaml to call code rather than show a window.

Have App_Startup create LoginViewModel, new up a form, set the data context of the form to your ViewModel and show the it.

Updates to the form will update the ViewModel, when it closes it will return control to your calling code.

Login.xaml.cs

    private void btnOk_Click(object sender, RoutedEventArgs e)
    {
        if (anything incorrect)
        {
            MessageBox.Show("Enter a username and password");
        }
        else
            DialogResult = true;
    }

App.xaml.cs

Login.DataContext = LoginViewModel;

if (Login.ShowDialog() ?? false)
{
   //Check the LoginViewModel for a correct password. 
}

edited May 28 '13 at 06:24

answered May 28 '13 at 06:19

strattonn

1,790
2
22
41

I Like the idea which u just explain and it help me write code....But need to confirm, this is good way to work on MVVM pattern ? – Kushal Patil May 28 '13 at 12:13
Yes the only thing you're seeing is a little code behind which is returning the correct value from the dialog box. I'm not aware of another way to set that return value. – strattonn Jun 06 '13 at 04:55

score 1 · Answer 2 · answered May 28 '13 at 06:24

Fortunately the ability to hide and display different controls as you move through different pages inside an application is already written for you. See http://msdn.microsoft.com/en-us/library/ms750478.aspx.

Navigation Window is really powerful and can quite easily be skinned to provide very completely different looks too. See http://alski.net/post/2012/01/13/WPF-Wizards-part-2-Glass.aspx

Navigation between view using MVVM in WPF

2 Answers2