Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

WPF - Create login interface using only XAML

login

  • Please log in to reply
2 replies to this topic

#1 Tonchi

Tonchi

    Helping the world with programming

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1249 posts
  • Location:Zagreb
  • Programming Language:C#, Others
  • Learning:C, C++, Python, JavaScript, Transact-SQL, Assembly

Posted 04 July 2011 - 04:04 PM

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:
loginl.png

Edited by Roger, 05 July 2011 - 02:13 PM.
added screenshot

  • 0

#2 arunjoseph

arunjoseph

    CC Newcomer

  • Member
  • PipPip
  • 21 posts

Posted 10 October 2011 - 09:42 AM

Okay so with this how do I open another window using C# and I also want effects when it opens that new window
  • 0

#3 Tonchi

Tonchi

    Helping the world with programming

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1249 posts
  • Location:Zagreb
  • Programming Language:C#, Others
  • Learning:C, C++, Python, JavaScript, Transact-SQL, Assembly

Posted 03 April 2012 - 04:17 AM

You just have to make class instance. Specifically you need to make instance of a new window. Look in you project what's the name of your window that you want to open and create a Button control on Main window and type next code inside that button:

NewWindow arunjoseph = new NewWindow();
arunjoseph.Show();

this code works in both WinForms and WPF projects. I'm sory that I didn't answer you earlier.
  • 0

Microsoft Student Partner, Microsoft Certified Professional






Also tagged with one or more of these keywords: login

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download