Use of ARC Shape With Appearance 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 the Artboard.

Step 2: Select Shapes -> Arc as shown below:

1.png

Step 3: Draw an Arc as shown below:

2.png

Step 3: Go to the Property Panel located in the right corner of the workspace as shown below:

3.png

Step 4: Brushes: It contains 3-Properties as shown below:

4.png

Step 5: Select Solid Color Brush -> Select Fill Color -> Select Pink Color and fill in a color for the Arc and the effects are as shown below:

5.png

Note: To the right side of the Fill-Option see the small rectangular box filled with the color White. It is used to reset the changes:

6.png

Step 6: Select Stroke -> Select Solid Color Brush and choose the color Yellow and fill it in and the effects are as shown below:

7.png

8.png

Step 7: Select Gradient Brush -> Select Radial Gradient Brush -> Select Fill -> Select Green Color and effects are as shown below:

9.png

10.png

Step 8: Select Gradient Brush -> Select Radial Gradient Brush -> Select Stroke -> Select Sky Blue Color and effects are as shown below:

11.png

12.png

Step 9: Select Gradient Brush -> Select Linear Gradient Brush -> Select Fill -> Select Purple Color and effects are as shown below:

13.png

14.png

Step 10: Select Gradient Brush -> Select Linear Gradient Brush -> Select Stroke -> Select Orange Color and effects are as shown below:

15.png

16.png

Note: Here, the Gradient Brush contains 2 types; they are Radial and Linear.

Step 11: Appearance: It contains 17 properties as shown below:

17.png

Select Appearance -> Select Opacity and see the effect as shown below:

18.png

Select Visibility -> Select Visible or Collapsed.

Note: Here, when we select the Visible Option we are able to see the same image as shown above and if we select the Collapsed Option the image becomes invisible.

Select Effects -> Select New, a dialog box appears which contains 2 options ie; BlurEffect and DropShadowEffect

Select
BlurEffect -> Select Radius and see the effect as shown below:

19.png

20.png

Select
DropShadowEffect and see the effect as shown below:

21.png

22.png

Note: Here, we have to manage the Arc Shape by applying BlurRadius, Color, Direction, Opacity and ShadowDepth as shown above.

Select
StrokeThickness -> Increase or Decrease the StrokeThickness and see the effect as shown below:

23.png

24.png

Select
ArcThickness -> Increase or Decrease the thickness and see the effect as shown below:

25.png

26.png

Note: Here, we can manage the ArcThicknessUnit also as shown above.

Select
StartAngle and EndAngle -> Increase or Decrease the units and see the effect as shown below:

27.png

28.png

Select
GeometryEffect -> Select Sketch and see the effect as shown below:

29.png

30.png

Note: GeometryEffect contains 2 Options ie; None and Sketch.

Select
Stretch -> Fill  and see the effect as shown below:

31.png

32.png

Select Stretch -> Select Uniform and see the effect as shown below:

33.png

Select Stretch -> Select UniformToFill and see the effect as shown below:

34.png

StrokeLineJoin contains 2-Properties ie; Bevel and Round.

Select StrokeLineJoin -> Select Bevel and see the effect as shown below:

35.png

36.png

Select StrokeLineJoin -> Select Round and see the effect as shown below:

37.png

Select StrokeDashArray -> Increase or Decrease the range and see the effect as shown below:
38.png

39.png

40.png


Select
StrokeDashCap -> Select Flat and see the effect as shown below:

41.png

42.png

Select StrokeDashCap -> Select Square and see the effect as shown below:

43.png

Select StrokeDashCap -> Select Round and see the effect as shown below:

44.png

Select StrokeDasgCap -> Select Triangle and see the effect as shown below:

45.png

Select StrokeDashOffset -> Increase or Decrease the range and see the effect as shown below:

46.png

47.png

Summary

Through this article we are able to learn usage of an Arc Shape to design various types of shapes using the appearance property.

Up Next
    Ebook Download
    View all
    Learn
    View all