Create a clock in Silverlight using Expression Blend or Visual Studio

Introduction

In Silverlight, you generate your user interface (UI) elements by means of Extensible Markup Language (XAML). To write XAML, you can utilize a visual design tool, for instance, Expression Blend, or you can use Visual Studio. This walkthrough demonstrates you how to construct a simple clock in Silverlight by using Expression Blend and Visual Studio. The following design shows the clock that you will create.

http://img412.imageshack.us/img412/8228/img10h.png

If you use Expression Blend, the graphics are twisted visually in the designer. If using Visual Studio, the graphics are produced using XAML code. After creating the graphics in the clock will attach animations and logic to make the clock work.

Prerequisites

You need the following components to complete this tutorial :

• Expression Blend 4 (optional).
• Visual Studio 2010.
• Silverlight 4.

Create the clock using Expression Blend

Expression Blend will accelerate the creation of Silverlight-based application, especially during the design phase of the graphics and layout. In this section, you create the clock using Expression Blend. These graphics are created with simple elements arranged in a control grid. All the pie charts, including graphics of the clock face, the outer edge, bevel and shadow, created with elements Ellipse, while clockwise elements are created Rectangle. To create a new Silverlight Application project in Expression Blend, you will have to follow the steps :

1. Start Expression Blend. If the startup form appears, click Close.
2. On the File menu, click New Project.
3. You get the New Project dialog box.
4. In the Project Types box, select Silverlight.
5. In the list of projects, select the Application of Silverlight.
6. In the Name box, type SilverlightClock.
7. In the Language list, select Visual Basic or Visual C #.
8. In the Version list, select 4.0.
9. Click OK to create the project. Then to set the size of the desk.
10. In the Objects pane and Timeline, select [UserControl].
11. In the Properties pane, under Layout, set the Width and Height to 400.

Currently have an empty project. If you press F5 to run the application, will only see a blank Web page.

The clock graphics are composed of layers of overlapping shapes that create the overall look of a watch. To create the watch, you must build it up layer by layer, starting with the bottom layer, which is the shadow of the clock.

To create the shadow clock

1. In the Tools panel, click the right mouse button on the Rectangle tool and click Oval.
2. In the work table, draw an ellipse of about 330 pixels wide and high. While drawing, press the SHIFT key to maintain the same width and height.
3. If you need to change the position of the ellipse, in the Tools panel, click the Selection tool and change the ellipse of position.
4. In the Properties pane, in the Name box, set the name of the ellipse in shadowEllipse.
5. In the Properties pane, under Brushes, click Fill, and then click the solid color brush.
6. In the Color Editor, set the color black.
7. Under Appearance, set Opacity to 30%.
8. On the File menu, click Save All.

Then, you create the outer edge of the clock. Since the outer edge has the same size as the ellipse of shadow, you can create it by simply copying the ellipse of shadow.

To create the outer edge of the clock

1. In the Tools panel, click the Selection tool.
2. In the workbench, click the ellipse of shadow to make sure it is selected.
3. On the Edit menu, select Copy or press CTRL + C.
4. On the Edit menu, select Paste or press CTRL + V.
5. A new ellipse called shadowEllipse_Copy just above the shadow ellipse.
6. In the Properties pane, set the name outerRimEllipse.
7. Then, will fill with a gradient outerRimEllipse simple. Create a gradient in Expression Blend is a process that involves several steps.
8. In the Objects pane and Timeline, make sure outerRimEllipse ellipse is selected.
9. In the Properties pane, under Appearance, set the Opacity to 100%.
10. In the Properties pane, under Brushes, click Fill, and then click the gradient brush.
11. In the gradient bar colors Editor, click the left gradient point and set its color # FFE4E5F4.
12. Click the right gradient point and set its color # FFC0C0C0. Then going to change the direction of the linear gradient to flow from the top left to bottom right (instead of flowing from left to right on the ellipse).
13. In the Tools panel, click the gradient tool. An arrow appears on the ellipse outerRimEllipse vertical.
14. Move the mouse pointer near the tip or tail of the arrow until the pointer becomes an icon of rotation.
15. Turn the arrow so that the direction of the linear gradient going from top left to bottom right corner.
16. In the Properties pane, under Brushes, drag the gradient right to the left to concentrate the gradient on the left side. The direction of the gradient shown in the illustration below.
    
    
    http://img839.imageshack.us/img839/7186/img8.png
17. In the Tools panel, click the Selection tool.
18. Drag the ellipse outerRimEllipse slightly toward the top left to see the shadow. You will see a small piece of shadowEllipse in the bottom right to create a shadow effect. Then, you create the bezel of the watch. The ellipse to be used to establish the bezel outerRimEllipse is similar to but somewhat smaller.

To create the watch bezel

1. Select the ellipse outerRimEllipse.
2. Create a copy and paste outerRimEllipse.
3. In the Properties pane, set the name of the copy of outerRimEllipse in bevelEllipse.
4. In the Properties pane, under Layout, set the Width and Height to 290. Then bevelEllipse will fill with a linear gradient. Since bevelEllipse outerRimEllipse is a copy of, and have applied a gradient.
5. In the Properties pane, under Brushes, click the left gradient point and set its color # FF2F2F32.
6. Click the right gradient point and set its color # FFE4E5F4.
7. Drag the right gradient to the right until it is 100%. This gradient flows in the same direction as the gradient applied to outerRimEllipse. However, the gradient goes from dark bevelEllipse in the upper left to clear in the bottom right, which is the opposite of what happens with the gradient applied to outerRimEllipse.