Published: 25 Apr 2007
By: Muhammad Mosa

This article is an introductory article on how to build a WPF/E simple web application that represents an analog clock.

Introduction - What is WPF/E?

WPF/E is a codename for a new web presentation technology that is created to run on a variety of platforms. It enables the creation of rich, visually stunning, and interactive experiences that can run everywhere: within browsers, and on multiple devices and desktop operating systems (such as the Apple Macintosh). It is consistent with WPF (Windows Presentation Foundation), which is the presentation technology in .NET 3.0 (the Windows programming infrastructure), and XAML (eXtensible Application Markup Language), which is the foundation of the WPF/E presentation capability.

Prerequisites

No further knowledge about WPF or WPF/E is required; just that you've heard about it and know what it can do is enough. Below is a set of requirements to start building WPF/E content.

To start building and viewing WPF/E web content you need the WPF/E plugin (download here) as well as the ajhost.js file which is included in the download sample.

If you want to use VS.NET 2005 you must:

  1. Download and install the Microsoft Visual Studio 2005 SP1 Update, available on the Visual Studio SP1 support page
  2. Download and install WPF/E SDK
  3. Install the WPF/E Visual Studio Template. Click the Start button, and then click All Programs. Click WPFE SDK and then Tools. Click Install WPFE VS Template to begin the installation. Follow the instructions for installing the Visual Studio 2005 WPF/E template. This will install the WPF/E template project under C#.

What we will explore

In this article we will explore how to draw objects (ellipse, line and polygon) using WPF/E and XAML. These objects represent our analog clock drawing objects. After that we will see how to use the built in animation features of WPF to make the clock live. Later we will use JavaScript to initialize positions of our clock elements (Hours, minutes and seconds bars). At the end, we will use again JavaScript to create WPF/E elements dynamically and add them to the clock, we will use this to create clock hours and minutes marks on the clock.

Create WPF/E Page

In the following section I will describe in steps how to create a WPF/E page, of course you can use VS.NET 2005 WPF/E template to do that if you have installed the WPF/E SDK and the WPF/E Visual Studio Template.

Create an XAML file that will contain our simple clock drawings, name it clock.xaml

Create a simple ASPX or HTML page. Below is an example code of how your html page code might look like.

Now let us add a reference to the aghost.js, so make sure of its location in your application. I have added my scripts to the scripts folder.

You might notice that I've also added another reference, to clock.js, which will be used later in our application; we will discuss the contents of this file later.

In the body tag add a div element and give it an id, it will be used as a host for the WPF/E ActiveX Control.

Now its time to create the WPF/E control, to do that add the following HTML and script just after the above code.

The above code creates the WPF/E control that will be used to display our WPF/E content using the agHost instance. The control references the clock.xaml file as this is our XAML presentation - it's the 7th parameter. We gave the control the id agControl1 and passed it as the 2nd parameter and the control will be hosted inside the previously created div, which I have passed as the 1st parameter.

We have now finalized the initialization of our WPF/E content page, next we will go through the XAML presentation.

Drawing Clock Elements

The clock elements of our WPF/E clock consist of an Ellipse that represents the clock frame and body, some Polygons which are used for the minutes and hours bars and a Line that represents the seconds bar; finally a clock mark that shows minutes and hours which is also represented as with small Lines.

Figure 1: WPF/E Clock

WPF/E Clock

All these elements must be drawn inside a Canvas element.

Defining a Canvas

A Canvas is simply a drawing area. You can define the width and height of a Canvas as well as draw nested Canvases.

Drawing the Clock frame and body using an Ellipse

The clock frame will be drawn using an Ellipse element. I've used multiple Ellipse elements to draw a complex frame to add a shadow effect. In total I've used 6 elements to draw the clock frame. In the steps below you will see how I created each canvas for the analog clock.

Figure 2: Clock Shadow - An Ellipse element used to draw the clock body and outer frame

Shadow Ellipse

In the below code I have used the Fill property which is used to fill the Ellipse space with the black color. I have also used some additional properties to define the behavior for the clock.

The StrokeThickness property defines the thickness of the Ellipse outline. The Stroke property is defined as a sub element of the Ellipse element to be able to define a more complex outline stroke which will use a brush, a LinearGradientBrush. By the way, we could also supply an ImageBrush or SolidColorBrush or RadialGradientBrush. In our code I have used the LinearGradientBrush. Same concept can be applied to the Fill property. For more information about the available Brushs please refer to the SDK.

Figure 3: Clock Frame

Shadow Ellipse

The below Ellipse is used to draw the outer thin black border.

Figure 4: Clock inner gradient frame

Shadow Ellipse

Finally an Ellipse to draw an outer outline border for the previous gradient frame.

Figure 5: Clock inner gradient frame

Shadow Ellipse

Drawing Clock Bars, Hours, Minutes and Seconds Bars

To draw the Hours and Minutes bars, I've used a Polygon element. In this element you define a set of points that draw the Polygon outline e.g: Points="0,0 10,-10 0,-115 -10,-10". Below is the code used to draw the Hours and Minutes Ploygons. Note that point (0,0) is considered clock as the center. I have used again the LinearGradientBrush to Fill the Polylgons.

In the above code you might have noticed the new property RenderTransform in the sub elements of Polygon; this property is responsible for the object transformation. Our transformation will be a rotation, so therefore the RotateTransform property is used. The Rotation will be around point (0,0) CenterX="0" CenterY="0". The rotation will be managed through animations, and the initial rotation angle of each Polygon will calculated through JavaScript as we will see later.

Figure 6: Clock Hours and Minutes Polygons

Shadow Ellipse

We will use the same concept to draw the seconds bar with a Line object.

Perform Animation using Silverlight

In Silverlight it is simple to perform animations. Our clock animation is about to rotate the bars based on time. Here are some facts before we start:

  • The Seconds bar rotates 6 degrees per second.
  • The Minutes bar rotates 6 degrees per minute, which is 0.1 degree per second.
  • The Hours bar rotates 30 degrees per hour, which is 1/120 degree per second.

The above facts will used to draw the initial bars angle location on the clock circle when the page is loaded based on the system time. Now how is the animation controlled?! Simply by using the Storyboard object. In the Storyboard we define the type of the animation we wish to perform which can be one of the followings:

  • ColorAnimation
  • ColorAnimationUsingKeyFrames
  • DoubleAnimation
  • DoubleAnimationUsingKeyFrames
  • PointAnimation
  • PointAnimationUsingKeyFrames

We will use the DoubleAnimation as we want to animate the value of a Double property RotateTransform.Angle between two target values using linear interpolation over a specified Duration. In the DoubleAnimation we define the TargetName and the TargetProperty. The TargetName maps to the object we want to animate while the TargetProperty maps to that object's property used to be changed to make the animation. We also define the Duration property, which defines the amount of time needed to complete a single forward iteration. Finally, our animation will last forever, so we set the RepeatBehavior property to Forever The below code declares the animation behaviour.

In above code, we have set the Duration property for the seconds bar time line to 1 minute, of course; seconds bar should complete a full cycle in 60 seconds which is 1 minute = 00:01:00. The minutes bar should complete a cycle in one hour 01:00:00 while the hours bar will complete a cycle in 12 hours 12:00:00.

Using Javascript to access Silverlight objects

Now it is time for some Javascript code to initiate the bar locations as well as to define how each bar should rotate from which starting angle as well as end angle using From and To properties of the DoubleAnimation object through JavaScript. The below code shows how this is handled.

The sender parameter in the above code is a reference to the Canvas object sent when Canvasis loaded.

Using JavaScript to create the Silverlight object

In the final point of this article, I wanted to add some clock markers for hours and minutes/seconds. One approach to achieve this is to draw 60 Line objects and define a RenderTransform.RotateTransform to each one. Another approach is to create these 60 objects dynamically through JavaScript, which is the easiest and better option. The Silverlight WPF/E control provides the method createFromXaml that takes an XAML fragment and creates an XAML object. In our case we will create 60 objects of type Line and will give the hours a special StrokeThickness.

The complete JavaScript code is added to the clock.js file. The OnCanvasLoad is added as Canvas Loaded event handler as shown in defining Canvas section.

Conclusion

Silverlight is supposed to be a cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications (RIAs) for the Web. What you have seen here is a simple demonstration of what Silverlight can do!

The code in this article was built manually without any help of Microsoft Expression Studio or Visual Studio. Of course you could use these tools to have a better control over the GUI for drawing objects. However manually coding gave me a better understanding of WPF, XAML and silverlight.

While writing this article, I also noticed that Scott Guthrie made a demo and introduction to WPF/E. In his demo, I found that he built a sample clock which used Path for all his drawing.

At that time my clock was looking awful and ugly. I modified it to look at shown in this article; of course I got some ideas from Scott's demo to pimp my clock like dropping shadow and modify frames. Take a look at his demo.

Download

Article Code (Pre beta 1.0)
Article Code (Beta 1.0)

Resources

http://www.microsoft.com/silverlight/
http://www.silverlight.net/

Continue reading and see our next or previous articles Next Article >>

About Muhammad Mosa

Sorry, no bio is available

This author has published 8 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


You gotta love SeeWindowsVista read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Great Amr Elsehemy 4/25/2007 12:46 PM
I know it! Muhammad Mosa 4/26/2007 4:50 PM
placeholder New download Sonu Kapoor 5/6/2007 10:41 PM

Please login to rate or to leave a comment.