Skip to main content

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...

Thank You Guyz :) :) ....

Comments

Popular posts from this blog

C# Character Escape Sequences

Character combinations consisting of a backslash ( \ ) followed by a letter or by a combination of digits are called "escape sequences." To represent a newline character, single quotation mark, or certain other characters in a character constant, you must use escape sequences. An escape sequence is regarded as a single character and is therefore valid as a character constant.

Windows 8 Icons: Segoe UI Symbol

Whatz up guyz... In this post i am going to tell you about "Windows 8 Icons" . If you ever used a windows 8 app, you know that there are so many standard Icons. Actually we do not want to add images for each button, simply we can use the character map for obtain the icons.Go to the character map and select the font as "Segoe UI Symbol" .Then you will see lot of standard symbols in the character map.

SQLite Database for Windows 8 App : Adding existing SQLite DB file

Hi Guys ... This Post is about adding an existing SQLite database file to the Windows Metro App project. As I think "using SQLite" is the best way to create local database for Windows Rt applications.Actually SQLite is very easy to learn but I really think if Microsoft SQL Server CE supports windows rt applications it will more fun. .Isnt it ?. :)