Reader Level:
ARTICLE

Create Login Screen in Windows Store App

Posted by Gaurav Gupta Articles | Windows Store Apps August 17, 2012
In this article we will see how to create a new Metro Style Login Screen in a Windows Store App
  • 4
  • 0
  • 40238

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:

Login-Control-In-Windows8-Apps.png

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:

Login-Screen-In-Windows8-Apps.png

Article Extensions
Contents added by Gaurav Gupta on Jul 07, 2013
Here Is my Full Source Code of MainPage.xaml Page..

<Page
    x:Class="popupcontrol.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:popupcontrol"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="Page_Loaded_1">

    <Grid  Background="#FFE03636">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ScrollViewer   Grid.Column="1"  HorizontalAlignment="Right" VerticalScrollMode="Auto" HorizontalScrollMode="Disabled" VerticalScrollBarVisibility="Auto">
            <ContentControl HorizontalAlignment="Right"  x:Name="parent">
                <Grid Background="Purple" x:Name="Ui">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition Height="100"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*" ></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Image Height="70" Grid.Row="0" Grid.Column="0" Source="Image4.png" Stretch="Fill" Width="423" />
                    <TextBlock  Grid.Row="2"   FontFamily="Segoe UI Light" FontSize="26.667" TextAlignment="Center"><Run Text="Welcome to"/><LineBreak/><Run FontSize="32" Text="Modeling Corner"/></TextBlock>
                    <Button Grid.Row="3" Content="Request an Invite"  Height="50"   Width="313" Background="Black" Foreground="#FFEB0ECF" BorderBrush="Black" HorizontalAlignment="Center" FontFamily="Segoe UI Light" FontSize="18.667"/>
                    <Button VerticalAlignment="Top" Content="Sign in" Grid.Row="4" Height="50"   Width="313"  Background="#FF700B7C"  Foreground="#FFF9F7F7"  BorderBrush="#FF898989"  HorizontalAlignment="Center"   FontSize="18.667" FontFamily="Segoe UI Light" Click="Button_Click_1"/>
                    <Image  Height="67" VerticalAlignment="Top" Grid.Row="5" Source="Image1.png" Width="54" />
                    <TextBlock Grid.Row="7" VerticalAlignment="Center" MaxHeight="50" TextWrapping="Wrap" Width="374" Foreground="#FFE2E2E2"   FontFamily="Segoe UI Light"  FontSize="24" TextAlignment="Center" Text="Your Personal Modeling Portfolio!" />
                </Grid>
            </ContentControl>
        </ScrollViewer>
        <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" IsSpellCheckEnabled="True"  Height="40" Margin="13,1" Width="408" >
                        </TextBox>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <TextBlock Text="Password" Foreground="White"  FontSize="25" />
                        <PasswordBox  x:Name="pwd"  IsPasswordRevealButtonEnabled="True" 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>
    </Grid>
</Page>

Thanks...
Contents added by Ricardo Rodrigues on Jul 03, 2013
Nice job, but what i should put in login button to make it go to my database to confime login data?


Contents added by ziedpad on May 23, 2013
good code
Contents added by An Do on Mar 08, 2013
Thanhs
Contents added by Simon Blabla on Dec 19, 2012
Hello,
your wrote "Here is the full code of the MainPage.XAML file.", but  actually there is no link to the full source code.
In my case I am not sure how you deployed 2 ContentControls on one page?

This time I use grids and it does not look great.

thanks.
COMMENT USING

Trending up