Step 1: Open Expression Blend 4 -> Select Silverlight Application + Web -> Change Name and Location accordingly -> hit OK. A Blank Window appears on Artboard.

Step 2: Draw Previous Button (which is used in Websites) using Block Arrow Left Shape as shown below:

1.png

2.png

Note: There are 18 shapes in Assets in Expression Blend 4. We can select Shapes from Assets located to the left side of the Workspace as well as at the top of the Workspace in the Tool Box as shown below:

note1.png

note2.png

Note: In the above image you can see the arrow between the Margin and Min Width properties. This arrow is used to expand or collapse the Sub Properties of the Layout Property as shown below:

note3.png

Note: When we click on the White Arrow the Layout Property is Expand or Collapsed as shown below:

note4.png

note5.png

3.png
 4.png

5.png

Note: When we select any property there is a description that flashes about the use of the tool below the property as shown below:

note6.png

Left:

6.png

7.png

Center:

8.png

9.png

Right:

10.png

11.png

Stretch:

12.png

Note: When we use the Stretch Property the image changes to its Default Shape.

Top:

14.png

15.png

Center:

16.png

17.png


Bottom:

18.png

19.png

Stretch:

20.png

Note: When we use the Stretch Property the image changes to its Default Shape.

Left:

22.png

23.png
Right:

24.png

25.png

Top:

26.png

27.png

Bottom:

28.png

29.png

30.png

31.png
 32.png

33.png

Step 3: Select Arrow, select Fill -> Gradient Brush -> Grey Color -> Stroke -> Green Color and see the effect as shown below:

34.png

Here's the Previous Button.

Step 4: Draw Next Button (which is used in Websites) using the Block Arrow Right Shape as shown below:

35.png
 36.png

Note: By applying the above steps of the Layout Property you can manage the Arrow Shape.

Step 5: Select Arrow, select Fill -> Gradient Brush -> Grey Color -> Stroke -> Green Color and see the effect as shown below:

37.png

Here's the Next Button.

Step 6: Here's the final image, i.e. the Previous Button-Next Button.

Previous-Next.png

Note: The Previous and Next Buttons are also used as Left Side and Right Side Indicators The Previous and Next Buttons are used in Horizontal Scroll Bar to the Bottom everywhere ie; Websites, Expression Blend 4 etc as shown below:

note7.png

Step 7: Select Assets -> Shapes -> Block Arrow Up Shape located to the left side of the Workspace as shown below:

38.png

Step 8: Draw an Arrow (Top Arrow) as shown below:

39.png

Note: By applying the above steps of the Layout Property you can manage the Arrow Shape as well as follow Step 5 to fill the Color and Stroke.

Step 9: Select Assets -> Shapes -> Block Arrow Down Shape Located to the Left Side of Workspace as shown below:

40.png

Step 10: Draw an Arrow (Bottom Arrow) as shown below:

41.png

Note: By Applying the above Steps of Layout Property you can manage Arrow Shape as well as follow Step 5 to Fill Color and Stroke.

Step 11: Here's the final image; i.e. the Top Arrow-Bottom Arrow.

Top-Bottom.png

Note: The Top and Bottom Arrows are used in Vertical Scroll Bar to the Right everywhere ie; Websites, Expression Blend 4 etc as shown below:

note8.png

Summary

The purpose of this article is to show the use of Block Arrow Shapes and the Layout Property.