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.