This walkthrough provide a step-by-step guidance to create a simple login form using various ClientUI controls.

In this walkthrough, you will learn the following concept:

• Create ClientUI Application project using Intersoft ClientUI Application project template.
• Use StackPanel to stack elements in an assigned direction.
• Use various input controls for gathering data input such as UXTextBox and UXPasswordBox.
• Use GlassButton as default command button to invoke an action.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI

Creating a New ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template.

To create a ClientUI Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI Application project named CreatingFIrstClientUIApp using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

Creating the View

This section steps you through the process of creating the user interface for your simple login form using ClientUI controls such as GlassLabel, UXTextBox and UXPasswordBox.

To create the View

1. In Visual Studio, switch to Solution Explorer tab and open MainPage.xaml.
2. Add a StackPanel inside the LayoutRoot Grid.
   Set the following properties of StackPanel as below.
   

   Properties	Value
   HorizontalAlignment	Center
   VerticalAlignment	Center
   Width	Auto
   Height	Auto

   
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <StackPanel HorizontalAlignment="Center" Name="stackPanel1" VerticalAlignment="Center"/> </Grid>

3. Add a GlassLabel inside the StackPanel.
   Set the Content property to My First ClientUI Application.
   

   XAML	Copy Code
   <StackPanel HorizontalAlignment="Center" Name="stackPanel1" VerticalAlignment="Center"> <Intersoft:GlassLabel Content="My First ClientUI Application" Name="glassLabel1" /> </StackPanel>

4. Add a FieldLabel inside the StackPanel.
   Set the Header property to Username: and the HorizontalAlignment property to Center.
   Set the Width property of uxTextBox1 to 80.
   

   XAML	Copy Code
   <StackPanel HorizontalAlignment="Center" Name="stackPanel1" VerticalAlignment="Center"> ... <Intersoft:FieldLabel Header="Username: " Name="fieldLabel1" HorizontalAlignment="Center"> <Intersoft:UXTextBox Name="uXTextBox1" Width="80" /> </Intersoft:FieldLabel> </StackPanel>

5. Add another FieldLabel inside the StackPanel.
   Set the Header property to Password: and the HorizontalAlignment properly to Center.
   Set the Width property of uXPasswordBox1 to 80.
   

   XAML	Copy Code
   <StackPanel HorizontalAlignment="Center" Name="stackPanel1" VerticalAlignment="Center"> ... <Intersoft:FieldLabel Header="Password: " Name="fieldLabel2" HorizontalAlignment="Center"> <Intersoft:UXPasswordBox Name="uXPasswordBox1" Width="80" /> </Intersoft:FieldLabel> </StackPanel>

6. Add a GlassButton inside the StackPanel.
   Set the Width property to 50 and the HorizontalAlignment properly to Right.
   

   XAML	Copy Code
   <StackPanel HorizontalAlignment="Center" Name="stackPanel1" VerticalAlignment="Center"> ... <Intersoft:GlassButton Content="OK" Name="glassButton1" HorizontalAlignment="Right" Width="50" /> </StackPanel>

   
   
7. Double click the GlassButton to wire the Click event.
8. It will direct automatically to MainPage.xaml.cs with the glassButton1_Click method predefined.
   Add the following code inside the glassButton1_Click method.
   

   C#	Copy Code
   private void glassButton1_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Your Username: "+uXTextBox1.Text+"\nYour Password: "+uXPasswordBox1.Password); }

9. Run the project. Try to type a username and password then click the OK button. A message box will show your username and password.
   
   

Conclusion

In this walkthrough, you have learned how to create a new ClientUI Application project using Intersoft ClientUI Application project template, and create simple login form using ClientUI Controls.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="CreatingFirstClientUIApp.MainPage" 
        Title="MainPage Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
        <Grid x:Name="LayoutRoot">
            <StackPanel HorizontalAlignment="Center" Name="stackPanel1" VerticalAlignment="Center">
            <Intersoft:GlassLabel Content="My First ClientUI Application" Name="glassLabel1" />
            <Intersoft:FieldLabel Header="Username: " Name="fieldLabel1" HorizontalAlignment="Center">
                <Intersoft:UXTextBox Name="uXTextBox1" Width="80" />
            </Intersoft:FieldLabel>
            <Intersoft:FieldLabel Header="Password:  " Name="fieldLabel2" HorizontalAlignment="Center">
                <Intersoft:UXPasswordBox Name="uXPasswordBox1" Width="80" />
            </Intersoft:FieldLabel>
            <Intersoft:GlassButton Content="OK" Name="glassButton1" HorizontalAlignment="Right" Width="50" Click="glassButton1_Click" />
        </StackPanel>
    </Grid>
</Intersoft:UXPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Intersoft.Client.UI.Navigation;

namespace CreatingFirstClientUIApp
{
    public partial class MainPage : UXPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

        }

        private void glassButton1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Your Username: "+uXTextBox1.Text+"\nYour Password: "+uXPasswordBox1.Password);
        }
    }
}