Reader Level:
ARTICLE

Designing a Login Form Using Expression Blend 4 Controls

Posted by Sonia Bhadouria Vishvkarma Articles | Expression Studio August 03, 2012
Today we are going to see the use of Controls in Expression Blend 4.
  • 1
  • 0
  • 5288

Step 1: Open Expression Blend 4 -> Select Silverlight Application + Web -> Change Name and Location accordingly -> hit OK, a Blank Window appears on Artboard, Fill Background with Gradient Brush.

Step 2: Controls : Controls consists of 29 controls. We are going to discuss 5 controls; they are TextBlock Control, TextBox Control, CheckBox Control, PasswordBox Control and Button Control.

Step 3: Select Controls located to the Left-Side of Workspace or Located in the ToolBox as shown below:

1.png

2.png

Step 4: Select TextBlock Controls and Draw a TextBlock Control on the Artboard and give it the name (Login Form) and manage the Color using Solid Color Brush or Gradient Brush as shown below:

3a.png

3b.png

Step 5: Again by following Step 4, Draw 2 more TextBlock Controls and Name them Username and Password as shown below:

4.png

Note: When we use TextBlock Control only Text is Visible and Block is Invisible as compared to TextBox.

Step 6: Select TextBox Control and Draw a TextBox for the Username Field and manage the Color using the Solid Color Brush or Gradient Brush as shown below:

5a.png

5b.png

Step 7: Select PasswordBox Control and draw a PasswordBox for the Password Field and manage the Color using a Solid Color Brush or Gradient Brush as shown below:

6a.png

6b.png

Note: When we enter the value in PasswordBox, the value is visible in the form of Star's or Dot as shown above:

Step 8: Select CheckBox Control and draw a CheckBox and manage the color using a Solid Color Brush or Gradient Brush as shown below:

7a.png

7b.png

Step 9: Again follow Step 4 and draw a TextBlock Control and give it the name (Remember Me) and manage the color using Solid Color Brush or Gradient Brush as shown below:

8.png

Step 10: Select Button Control and draw a Button and give it the name (OK) and repeat the same process and draw another Button Control and give it the name (Cancel) and manage the color using Solid Color Brush or Gradient Brush as shown below:

9a.png

9b.png

9c.png

Here's the Login Form. Final Image.

Login-Form.png

Summary

Through this article we can learn the use of Controls in Expression Blend 4.

COMMENT USING

Trending up