Use of BLOCK ARROW With Layout Property in 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 Artboard.

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

  • Select Assets -> Shapes -> Select Block Arrow Left Shape located to the Left of Workspace as shown below:
1.png

  • Draw an Arrow as shown below:
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

  • Select Layout Property from the Property Panel located to the right of the Workspace.

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

  • The Layout Property contains 17 properties as shown below:
3.png
  • Select the Width-Height Property of the Layout Property; increase or decrease the range and see the effect as shown below:
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

  • Row, Column, RowSpan, ColumnSpan Properties of the Layout Property are used for Table-Based work.
  • HorizontalAlignment Property contains 4 types of alignments ie; Left, Center, Right, Stretch. Select HorizontalAlignment Property and see the effect as shown below:

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.

  • VerticalAlignment Property contains 4 types of alignments ie; Top, Center, Bottom and Stretch. Select the VerticalAlignmnet Property and see the effect as shown below:
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.

  • Margin Property contains 4 types of properties; they are Left, Right, Top and Bottom. Select the margin property and see the effect as shown below:
Left:

22.png

23.png
Right:

24.png

25.png

Top:

26.png

27.png

Bottom:

28.png

29.png

  • Select the MinWidth Property; increase or decrease the range and see the effect as shown below:
30.png

31.png
  • Select the MinHeight Property, increase or decrease the range and see the effect as shown below:
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:

  • Select Assets -> Shapes -> Select Block Arrow Right Shape located to the left of the Workspace as shown below:
35.png
  • Draw an Arrow as shown below:
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.

Up Next
    Ebook Download
    View all
    Learn
    View all