[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Collapse]Build an Application
  [Expand]Choose Application UI
  [Expand]Printing and Exporting
  [Collapse]WinForms MVVM
   [Expand]Design-time Support
     Lesson 1 - Creating The Project. Scaffolding Wizard.
     Lesson 2 - Creating Views
     Lesson 3 - Navigation and Services
     Lesson 4 - Data Binding
     Lesson 5 - Login Form
     Lesson 6 - Lookup Editors and Master Detail
     Lesson 7 - Additional Functionality
  [Expand]Right-to-Left Layout
   Redistribution and Deployment
   How to: Perform Actions On Application Startup
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 5 - Login Form

From this document, you will learn how to add a login form to the application. Implementing this task is discussed in this separate lesson due to its detailed description, although basically this is a part of the additional application functionality, described in the very last lesson of this tutorial series.

  1. The way your user database is implemented may vary. For the sample application you can define the following simple class:

    ...and the following class that stores user credentials.

  2. Create a LoginView user control using the DataLayoutControl as you did with detail Views. Do not forget to set the DataSourceUpdateMode for your data bindings to OnPropertyChanged, or pressing the 'Enter' key will pass an empty password, since the editor is still focused. To improve the login form's usability, change the type of the editor that displays user name to LookUpEdit using the editor's smart-tag (see Lesson 2 - Creating Views tutorial for details).

  3. For the ViewModel related to this login View, you can use the Scaffolding Wizard to generate it or implement it manually. The following code illustrates the simplest LoginViewModel implementation.

    In this ViewModel, two properties are defined: the CurrentUser property that stores the currently logged user and the boolean IsCurrentUserCredentialsValid property that specifies whether the entered credentials have passed verification.

  4. You will also need to add some code to the main form's ViewModel. Since the main form uses the auto-generated MyDbContextViewModel class, it's not recommended to add your custom code directly into it - the model can be re-generated if you ever need to call the Scaffolding Wizard again. Instead, create a partial class that resides within a separate file. Note that you will have to move the class constructor from its original file to this partial class.

    The code for the LoginViewModel and both Views (MainView and LoginView) is listed below. When your ViewModel is ready, rebuild your project and add the MvvmContext component onto your login form. Use its smart-tag to assign the LoginViewModel as the related View Model for this View.

    This code uses the OnLoaded method overload to display a dialog using the registered DialogService. To do so, the Login method calls the service's ShowDialog extension method. This method takes a child ViewModel as a parameter - pass a new instance of the LoginViewModel class to it. It is important to create this instance, not by using the new keyword, but by calling the ViewModelSource.Create<ViewModelType> method. See the Control-based Services topic to learn why. Optionally, you can call the SetParentViewModel method to set a parent ViewModel for this instance.

    When an end-user clicks any login dialog's button, this message result is passed to the OnLogin method, which checks exactly which button was clicked. If an end-user has clicked 'Cancel' or closed the dialog, the application will be closed. If the 'OK' button has been clicked, the application will check the IsCurrentUserCredentialsValid property, which automatically refreshes its value when the Update method is called. If the entered credentials are valid, the main form will be shown. Otherwise, the login form will be re-displayed. This is done by assigning different values to the State property. The MainView has a trigger that monitors changes in the State property value and reacts accordingly when it happens.

  5. The previous steps are sufficient to implement a login form with minimum functionality. However, if your main view has the closing confirmation behavior assigned, you may face certain issues. For instance, if you close the login form, the main form (which is transparent since the valid credentials were not entered) will attempt to close itself as well. This will display the confirmation message and if you click the 'Cancel' button, the form will remain but you will not able to see it. To overcome such issues, remove the form closing behavior (if any) and add the following code.

    This code checks the current State property value only showing the confirmation message if the authorization is passed. If an end-user has not yet logged in and decides to close the application, no confirmation will be shown. This is the reason why the State property is not boolean, but accepts values of the custom AppState enumerator. There can be three possible application states:

    • Authorized - user credentials are valid. The main form is visible, and attempts to close it should display the confirmation message. End-users may click 'No' to keep the application running.
    • NotAuthorized - user credentials were entered but did not pass the verification. The main application form remains transparent, and the login form is re-shown.
    • ExitQueued - user credentials were not entered, and the login form was closed. The application should be terminated without any confirmation dialogs.
  6. Your login form is now ready. You may decorate it by setting the specific RepositoryItemTextEdit.PasswordChar for the password editor, reflect the logged user's name on the main form, and add the button to the main View's grid control that will allow you to re-log etc. The code below illustrates how to do it.

    The following animation shows the final result.

Expanded See Also

Is this topic helpful?​​​​​​​