Sunday, January 12, 2014

Simple LogIn form using C# WPF Application

Right, so...I tought to give some small work done, but I wanted to see more if I forgot completely the C# and WPF at all since I used it last year, but it wasn't the case really. So as the title says, I'll show you a
simple login form being done in WPF. This is just going to be a demonstration of login form and you should have some basic idea where to go on from there if you really want to use it for some  project of your own. So lets start!


You can download my final app and how it works here: Simple Login App
If it tells you that is from unknown user and it might put your PC at risk, its becase I've created it...so you can just choose "run it anway" It won't do any harm. You can trust me, but I know its not realistic to expect that. Choice is on you.

I am using Visual Studio 2012 as that is the latest I got from my university however I don't think the options
should be much diffrent in previous versions or newer, if there is one, I haven't really check. So open up a
new project and choose Visual C# from Templates list and then choose C# WPF Application and give it the name whatever you wish I gave mine SimpleLogInApp.









Once you have done that, you should see on the left of Visual Studio interface a "Toolbox" tab. You will find
in this tab the following tools you need to place on the Main Window Frame. Such are: TextBox, Passwordbox, Labels and a Button. Make sure you have one PASSWORDBOX, if you want to have those ***** symbols to hide up the text for when you are typing password. You can then position however you like input (text/pass) boxes.






Once you have positioned the main tools on your Main Window Frame we should give the name of each of the input boxes as well as button and the label that will show us information as user clicks on the button. We are doing so in the Properties pannel in the bottom-right portion of the screen like shown on the picture.





Also if you wish to your input boxes start without text inside of them just make "Text" atribute in Properties
tab empty. In the same way you can change the Text on the Button so it shows "LogIn" as it shows on mine.







Once you've placed all of this you should double-click the Button and this should lead you into C# code section where you created an event for that Button. Also there are few other things that you should know what are for.

First there is code showing as this:

 public MainWindow()
{
    IntializeComponent();
}


This is basicly the part that intializes the specific code upon launch of application.
We will first add one integer variable to control the button's LogIn and LogOut switch. It is probably good to use switch sequence at this point but I just went with If,else statments.

int ctrl = 0;


So once a user succesfuly logs in, this variable will become 1. Once he log's out it will become 0. Just so it
can do two diffrent parts of the code after loged in and when loging in.Then inside of a Button_Click event you created previously by double-clicking on it we will add following code:

if (ctrl == 0)
{

}
else
{
 
}


So basicly this is for the LogIn, Logout part. Now inside the If statment we will add following code:

if (ctrl == 0)
{
   if(username_tbox.Text == "Admin" && pass_box.Password == "admin123")
     {
        Info_label.Content = "Loged in!";
        username_tbox.IsEnabled = false;
        pass_box.IsEnabled = false;
        btn_log.Content = "LogOut?";
        ctrl = 1;
       
     }
    else
    {
       Info_label.Content = "You've entered \nwrong Information.\nTry again."
    }

}
else
{

   Info_label.Content = "Loged out!";
   username_tbox.IsEnabled = true;
   pass_box.IsEnabled = true;
   username_tbox.Text = "";
   pass_box.Password = "";
   btn_log.Content = "LogIn";
   ctrl = 0;
 
}

As we can see we added an if,else statment inside the first if statment. Reason for this is because we are telling the compiler to do next. If the variable ctrl is equal to 0, execute the code inside the if. Since the
variable ctrl is already set to 0 this is going to be the first thing that is going to happen once user clicks
on a button. After that it continues into the if,else statment we placed inside the first if statment. And its
doing the following:

If the text entered in the Username textbox (username_tbox.Text) is equal to "Admin" and text inserted in the Passwordbox (pass_box.Password) is equal to "admin123" execute the code inside that If statment. And it is doing following:

- Sets the Info label placed on the Main Window Frame to inform user that he succesfuly loged in if he typed the "Admin" and "admin123" username and password.
- Disables the username textbox so that we can't use it anymore since we are loged in already.
- Disables the passwordbox so that we can't use it anymore since we already entered the right password.
- Sets the name for the button to be called "LogedOut?" asking the user to log out now when he is loged in.
- Changes the control variable to 1. Indicating that user is now loged in.

Now the trick thing is that once we will press Button again, after we are loged in, it will check the first if,else statment and since now ctrl variable is 1 it will jump to the else statment and it will set the objects on a stage to look like the user is loged out. Such is:

- Set the Info label to inform user that he succesfuly loged out once he clicked, this time LogOut button.
- Enables username textbox so that the user can log in again.
- Enables the passwordbox so that user can enter password in order to log in again.
- Changes the content of a button to "LogIn" so that user can log in again
- And ofcourse sets the variable ctrl back to 0. So that once user clicks LogIn, it will start the whole cycle again.

So this is it!! A simple login form using WPF and C#. In reallity you would want to create a Register button as well, but that is something that probably will have to do with DataBases, not necesseraly though. You should have some basic knowledge now about how some things work for the C# and WPF. If you have any question of how something works do not hasitate to ask I'll answer as soon as I am able, it shouldn't be longer then 24h.

If you like this tutorial do follow me on Facebook, Twitter and Google+, I'll be posting some more in the future!! Stay tooned.