Create Login Screen in Windows Store App

Windows 8 Metro Style applications have rich styles for building user interfaces. Today I will show you how to create a login screen in a Windows 8 Metro Style Application. I have seen many login screens in Microsoft builtin Metro Applications. After that I would try to create something like that. It is a new style to open a login screen to the user. It is like a popup that will appear when the user logs in in a Metro Style Application.

In the Windows 8 Store Application the login window appears like this:



Now, we will try to create a login screen in our Metro Style Application. I will use a PopUp control to create a login screen and after opening the login screen to the user the background is immediately disabled, so the user cannot work on the rest of the screen until the login screen is completed.

Step 1: First we take a Blank application using C#.

Step 2: In the MainPage.XAML file we write the following code:

Here I design a PopUp control to display the login screen to the user. I take this PopUp control to the Content Control for better flexibility

<ContentControl  x:Name="container"  Height="450" Margin="0,194,0,124">

    <Popup x:Name="logincontrol1" IsOpen="False" >

        <StackPanel Orientation="Vertical" Background="DarkBlue" Height="400" x:Name="pop" >

            <StackPanel>

              <TextBlock Text="Sign In With an Account"  HorizontalAlignment="Center" Foreground="White" FontSize="25" />

             </StackPanel>

            <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">

               <TextBlock Text="Email Id" Margin="10" Foreground="White" FontSize="25" />

               <TextBox x:Name="id"  Height="40" Margin="13,1" Width="408"/>                       

            </StackPanel>

             <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

                <TextBlock Text="Password" Foreground="White"  FontSize="25" />

                <PasswordBox  x:Name="pwd"  Height="40" Margin="5,1"  Width="408"/>

              </StackPanel>

              <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">

                 <Button x:Name="loginclick" Click="loginclick_Click_1" Foreground="Wheat"   Width="100" Content="Login" ></Button>

                 <Button x:Name="cancel" Click="Button_Click_1"   Foreground="Wheat"  Width="100" Content="Cancel" ></Button>

              </StackPanel>

         </StackPanel>

    </Popup>

</ContentControl>

Then I put all the other UI controls of the page into the other Control Control panel for making the separation since we need to disable it while the Login Screen is shown.

<ContentControl Grid.Column="1" HorizontalAlignment="Right" x:Name="parent">

   <Grid Background="Purple"  >

      <Grid.RowDefinitions>

           <RowDefinition Height="auto"></RowDefinition>

           <RowDefinition Height="100"></RowDefinition>

           <RowDefinition Height="*"></RowDefinition>

           <RowDefinition Height="150"></RowDefinition>

           <RowDefinition Height="*" ></RowDefinition>

           <RowDefinition Height="100"></RowDefinition>

           <RowDefinition Height="auto"></RowDefinition>

           <RowDefinition Height="200"></RowDefinition>

           <RowDefinition Height="auto"></RowDefinition>

           <RowDefinition Height="200"></RowDefinition>

      </Grid.RowDefinitions> 

     <TextBlock  Grid.Row="3"   FontFamily="Segoe UI Light" FontSize="26.667" TextAlignment="Center"><Run Text="Welcome to"/><LineBreak/><Run FontSize="32" Text="My Application"/></TextBlock>

     <Button VerticalAlignment="Top" Content="Sign in" Grid.Row="7" Height="50"   Width="313"  Background="#FF700B7C"  Foreground="#FFF9F7F7"  BorderBrush="#FF898989"  HorizontalAlignment="Center"   FontSize="18.667" FontFamily="Segoe UI Light" Click="Button_Click_1"/>

  </Grid>

</ContentControl>

To open a Login Screen in a PopUp manner we need to do the following:

1. Enabled the PopUp control.

2. Disable the rest of the UI of the page except the login screen.

3. Decrease the Opacity of the page.

4. Set the width of the Login Screen to the width of the current window.

5. Reverse all of that when the Login Screen is closed or canceled.

Here is the code of the MainPage.XAML.cs file:

private void Button_Click_1(object sender, RoutedEventArgs e)

{

    if (!logincontrol1.IsOpen)

    {

       parent.IsEnabled = false;

       this.Opacity = .4;

       container.IsEnabled = true;

       logincontrol1.IsOpen = true;

       pop.Width = Window.Current.Bounds.Width;

    }

    else

    {

      logincontrol1.IsOpen = false;

      this.Opacity = 1.0;

      parent.IsEnabled = true;

    }
}

Here is the full code of the MainPage.XAML file.

Step 3: Build the application and Run it using F5. Click on the Sign button. A login Screen is shown like this: