Cross Platform
Android
iOS
Test Cloud

Create a Login Window Using MonoTouch.Dialog

This recipe shows step-by-step how to create a login screen with MonoTouch.Dialog.

Recipe

  1. Create a new iPhone application named MTDLogin. For this example we'll use the Empty Project template. Name the project MTDLogin as shown below:

  2. Add a reference to the MonoTouch.Dialog-1 assembly by double clicking on References in the Solution Pad and selecting MonoTouch.Dialog-1 from the list as shown below:

  3. Click OK in the Edit Reference dialog to add the reference.

    1. In the AppDelegate.cs file add a MonoTouch.Dialog using statement:
using MonoTouch.Dialog;
  1. In the FinishedLaunching method set the RootViewController property of the window to an instance of a DialogViewController, passing a RootElement with the string "Login" to the DialogViewController:
window.RootViewController = new DialogViewController (new RootElement("Login"));
  1. Add a Section instance with the string "Credentials" to the RootElement:
window.RootViewController = new DialogViewController (new RootElement("Login") {
    new Section ("Credentials")
});
  1. Add an EntryElement to the section, passing the strings "Login", "Enter you login" and an empty string to the EntryElement constructor:
window.RootViewController = new DialogViewController (new RootElement("Login") {
  new Section ("Credentials"){
  new EntryElement ("Login", "Enter your login", "")
 }
});
  1. Add a second EntryElement to the section, passing the string "Password" along with two empty strings. Also pass true for the fourth argument to the constructor so that the password text will be not be displayed after it is entered by the user:
window.RootViewController = new DialogViewController (new RootElement("Login") {
 new Section ("Credentials"){
  new EntryElement ("Login", "Enter your login", ""),
  new EntryElement ("Password", "", "", true)
 }
});
  1. Add a second section to the RootElement:
window.RootViewController = new DialogViewController (new RootElement("Login") {
 new Section ("Credentials"){
  new EntryElement ("Login", "Enter your login", "")
 },
 new Section () {
 }
});
  1. Add a StringElement to the second Section with the string "Login" for the first argument to its constructor and a delegate for the second argument.
window.RootViewController = new DialogViewController (new RootElement("Login") {
 new Section ("Credentials"){
    new EntryElement ("Login", "Enter your login", "")
 },
  new Section () {
  new StringElement ("Login", delegate {

    })
 }
});
  1. Add two EntryElement class variables to the AppDelegate class named login and password respectively:
[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
 EntryElement login, password;

 ...
}
  1. Go back to the EntryElements created in step 8 and assign them to the login and password variables:
window.RootViewController = new DialogViewController (new RootElement("Login") {
 new Section ("Credentials"){
  (login = new EntryElement ("Login", "Enter your login", "")),
  (password = new EntryElement ("Password", "", "", true))
 }
});
  1. Add the following code to the delegate created in step 9 to access the username when the login button is clicked:
window.RootViewController = new DialogViewController (new RootElement ("Login") {
 new Section ("Credentials"){
  (login = new EntryElement ("Login", "Enter your login", "")),
  (password = new EntryElement ("Password", "", "", true))
 },
  new Section () {
    new StringElement ("Login", delegate{
      Console.WriteLine ("User {0} log-in", login.Value); })  
 }
});
  1. Run the application, enter a username and password, and click login. The username is printed to the Application Output in Xamarin Studio when the login button is clicked, as shown below: