WPF - Create login interface using only XAML - CSharp Tutorials

Hello.

In this tutorial I will teach you how to create login interface using only XAML.

For this tutorial you will need to know XML language (w3schools) and to know what WPF is (wikipedia).
If you know that, then open your VS (I'm using 2010 professional), open new project (WPF Application) and name it XAMLLoginInterface. And then click ok.

After that you will see a window which is here for you to create something on it.
Under that window you will see a place with code (XAML) where you will work on.

You can access all stuffs from toolbox inside XAML code and you will see why we work with XAML and not with C# for designing (read about XAML on wikipedia).

You will see this code:


[B]<Window x:Class="XAMLLoginInterface.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">[/B]

    <Grid>

        

    </Grid>

</Window>

We will talk about first part of code (bolded) in next part of WPF tutorial.

For creating login user interface you will need two textbox controls, one button control and two label controls. How can me access them with XAML??? Very easy.

You first need to learn a syntax of declaring XAML elements and attributes.

this is syntax:


<ElementName AttributeName = "Value" AttributeName = "Value"...../>

Where ElementName is one of controls inside your toolbox and AttributeName is a property of that control (same rules as in XML). As I sayed we will need few things to create our project so let's get it on our window. First we will add first textbox control and named it Text1 and declared it's width and height.

this is the code for adding textbox control on your window:


<TextBox Width="250" Height="50" Margin="47,81,206,180" Name="Text1"></TextBox>

A values for a margin is under my project so if you want you can change those values as you want so as Width and Height property.
Add a second textbox control on a same schema.

This is how you add a Label on our window:


        <Label Content="Username" Name="Label1" Margin="46,42,393,245"></Label>

and this is how we add a button on our window:


        <Button Name="Gumb1" Content="Login" Margin="0,261,0,0"></Button>

and after all this is how should it look:


<Window x:Class="XAMLLoginInterface.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <TextBox Width="250" Height="50" Margin="47,81,206,180" Name="Tekst1"></TextBox>

        <TextBox Width="250" Height="50" Margin="46,171,206,90" Name="Tekst2"></TextBox>

        <Label Content="Username" Name="Label1" Margin="46,42,393,245"></Label>

        <Label Content="Password" Name="Label2" Margin="46,132,346,146"></Label>

        <Button Name="Gumb1" Content="Login" Margin="0,261,0,0"></Button>

    </Grid>

</Window>

Screenshot: