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

Step 2: Controls : The controls consist of 29 controls. We are going to discuss the Border Control, Frame Control and Button Control.

Step 3: Select Controls -> Border Control and draw a border as shown below:

1.png

2.png

3.png

Note: Manage the Color, Width, Height, Margin, Padding, DropShadowEffect, BorderThickness, ShadowDepth, BorderBrushColor, Background Color and BlurRadius using the Brushes Property and Appearance Property of the Property Panel as shown above.

Step 4: Select the Frame Control and draw a frame as shown below:

4.png

5.png

Step 5: Select Button Control and draw a button as shown below:

6.png

  • Brushes Property: Mange Background Color, Border Brush, Foreground Color and OpacityMask as shown below:
7.png

Note: Manage StartPoint, EndPoint, MappingMode, SpreadMethod, Opacity and RelativeTransform as shown below:

7a.png

7b.png

  • Appearance Property: Manage Opacity, BorderThickness, Effect, BlurRadius, Color, Direction, Opacity of BlurEffect and ShadowDepth as shown below:
8.png
  • Layout Property: Manage Width, Height, HorizontalAlignment of Button, VerticalAlignment of Button, Margin, HorizontalAlignment of Text and VerticalAlignment of Text and Padding as shown below:
9.png
  • This image displays the Horizontal Alignment of the button to the left.
pre-hori-btn-left.png
  • This image displays the Horizontal Alignment of the button to right.
prev-hor-btn-right.png
  • This image displays the Horizontal Alignment of the button to the center.
prev-hori-btn-center.png
  • This image displays the Horizontal Alignment of the text to the left.
prev-hor-text-left.png
  • This image displays the Horizontal Alignment of the text to the right.
prev-hor-text-right.png
  • This image displays the Horizontal Alignment of the text to the center.
prev-hor-text-center.png
  • This image displays the Vertical Alignment of the button on top.
pre-ver-btn-top.png
  • This image displays the Vertical Alignment of the button at the bottom.
pre-ver-btn-bottom.png
  • This image displays the Vertical Alignment of the button to the center.
pre-ver-btn-center.png
  • This image displays the Vertical Alignment of the text to the top.
pre-ver-text-top.png
  • This image displays the Vertical Alignment of the text to the center.
pre-ver-text-center.png
  • This image displays the Vertical Alignment of the text to the bottom.
pre-ver-text-bottom.png

Note: Here, by using the HorizontalAlignment and VerticalAlignment proeprties of the Property Panel we can manage the Text as well as the buttons according to our choice as shown below:

note1.png

note2.png

Step 6: Follow the Step 5 and draw another button and give it the name Next as shown below:

10.png

Step 7: By following Step 6 we can draw more buttons and give them the name Edit, Delete, save, Ok and Cancel as shown below:

11.png

Step 8: We can also Fill Color in Layout Background as shown below:

12.png

Summary

The objective of this article is to convey knowledge of the use of Button Controls and Properties of the Property Panel.