How to create Login Screen for Windows 8

Whatz up guys..
Today i am going create a Log in screen for Windows 8.I think it will help you guys ;)
best of luck !

Step 1: Select Blank application .

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

• This is the coding for Login popup

 <ContentControl x:Name="Logincontainer" Height="450" Margin="0,194,0,124">  
       <Popup x:Name="logincontroler" IsOpen="False" >  
         <StackPanel Orientation="Vertical" Background="Purple" Height="400" x:Name="popup" >  
           <StackPanel>  
             <TextBlock Text="Sign In" HorizontalAlignment="Center" Foreground="White" FontSize="25" />  
           </StackPanel>  
           <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">  
             <TextBlock Text="User 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="cancel_Click_1"  Foreground="Wheat" Width="100" Content="Cancel" ></Button>  
           </StackPanel>  
         </StackPanel>  
       </Popup>  
     </ContentControl>  

• Coding for side bar.
  Add these coding under the above code in   MainPage.XAML

     <ContentControl Grid.Column="1" HorizontalAlignment="Right" x:Name="parentcontroler">  
       <Grid Background="DarkBlue" >  
         <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="Application Name"/></TextBlock>  
         <Button x:Name="signinBtn" VerticalAlignment="Top" Content="Sign in" Grid.Row="7" Height="50"  Width="313" Background="DarkBlue" Foreground="#FFF9F7F7" BorderBrush="#FF898989" HorizontalAlignment="Center"  FontSize="18.667" FontFamily="Segoe UI Light" Click="signinBtn_Click_1"/>  
       </Grid>  
     </ContentControl>  

• Add following code in MainPage.cs page under the signin button click event
  
  

  private void signinBtn_Click_1(object sender, RoutedEventArgs e)  
     {  
       if (!logincontroler.IsOpen)  
       {  
         parentcontroler.IsEnabled = false;  
         this.Opacity = .4;  
         Logincontainer.IsEnabled = true;  
         logincontroler.IsOpen = true;  
         popup.Width = Window.Current.Bounds.Width;  
       }  
       else  
       {  
         logincontroler.IsOpen = false;  
         this.Opacity = 1.0;  
         parentcontroler.IsEnabled = true;  
       }  
     }  

Thats all guys :)...

.............................................................................................................................................................
Final  MainPage.xaml should like this 

Final MainPage.cs should like this...

DOWNLOAD SOURCE

Thank You Guyz :) :) ....