Colorful Login Form in a WPF Application

Make your Windows application a more animated and colorful attraction.



Use the following procedure.

1. Open Visual Studio. (Here I used Visual Studio 2012).
   
   
2. Go to New project then select WPF application as shown in the figure.
   
   
   
   
3. Now go to Solution Explorer and add a new folder as shown in the figure.
   
   
4. Provide it the “Images”.
   
   
   
   
5. Add the entire image to this folder. (Here the image is given in the scours code demo project).
   
   
6. Add a new window to the project and give it the name “login2.xaml”.
   
   
   
   
7. Now open “login2.xaml” and write the code for displaying the images.
   
   
8. Set the main window properties.
   
   1. <Window x:Class="LoginFormInWPF.login2"
   2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4. Title="login2" Height="700" Width="400" AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen">
      
9. Now add a background image display in the code.
   
   1. <Window.Background>
   2. <ImageBrush ImageSource="Images/Untitled-1.png"/>
   3. </Window.Background>
      
10. Now add other code for displaying the validation of images, textboxes, login button and so on.
    
    1. <Grid>
    2. <TextBox HorizontalAlignment="Left" Height="30" Margin="135,313,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="169"/>
    3. <Button Content="" HorizontalAlignment="Left" Margin="248,410,0,0" VerticalAlignment="Top" Width="54" Height="24" Click="Button_Click_1">
    4. <Button.Background>
    5. <ImageBrush/>
    6. </Button.Background>
    7. </Button>
    8. <Image HorizontalAlignment="Left" Source="Images/worng.png" Height="30" VerticalAlignment="Top" Width="41" Margin="309,313,0,0">
    10. </Image>
    11. <Image HorizontalAlignment="Left" Source="Images/Warning.png" Height="30" VerticalAlignment="Top" Width="41" Margin="309,361,0,0"/>
    12. <PasswordBox HorizontalAlignment="Left" Margin="135,361,0,0" VerticalAlignment="Top" Width="169" Height="30"/>
    13. <Image HorizontalAlignment="Left" Height="25" VerticalAlignment="Top" Width="30" Margin="368,6,0,0" Source="Images/close.png" MouseDown="Image_MouseDown_1"/>
    14. <Image HorizontalAlignment="Left" Height="25" VerticalAlignment="Top" Width="30" Margin="336,6,0,0" Source="Images/minimize.png" MouseDown="Image_MouseDown_2"/>
    15. </Grid>
        
    Now open in App.xamp and change the startup form name like:
    
    1. StartupUri="login2.xaml"
       
    Here this open the Login2.xaml form when you run the project.
    
    
11. Now run your projects. It will show the output such as you shown in the preceding image. If you have any query then provideit in the comments section.