Design Buttons Using Expression Blend 4

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:

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:

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

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

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

• Appearance Property: Manage Opacity, BorderThickness, Effect, BlurRadius, Color, Direction, Opacity of BlurEffect and ShadowDepth as shown below:

• Layout Property: Manage Width, Height, HorizontalAlignment of Button, VerticalAlignment of Button, Margin, HorizontalAlignment of Text and VerticalAlignment of Text and Padding as shown below:

•  This image displays the Horizontal Alignment of the button to the left.

• This image displays the Horizontal Alignment of the button to right.

• This image displays the Horizontal Alignment of the button to the center.

• This image displays the Horizontal Alignment of the text to the left.

• This image displays the Horizontal Alignment of the text to the right.

• This image displays the Horizontal Alignment of the text to the center.

• This image displays the Vertical Alignment of the button on top.

• This image displays the Vertical Alignment of the button at the bottom.

• This image displays the Vertical Alignment of the button to the center.

•  This image displays the Vertical Alignment of the text to the top.

•  This image displays the Vertical Alignment of the text to the center.

•  This image displays the Vertical Alignment of the text to the bottom.

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:

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

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:

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

Summary

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