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.