Total votes: 11
Print: Print Article
Please login to rate or to leave a comment.
Published: 25 Apr 2007
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
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.
No further knowledge about
WPF/E is required; just that you've heard
it and know what it can do is enough. Below is a set of requirements to start building
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:
- Download and install the Microsoft Visual Studio 2005 SP1 Update, available on the
SP1 support page
- Download and install
- 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
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
XAML. These objects
represent our analog clock drawing objects. After that we will see how to use the built in animation
WPF to make
the clock live. Later we will use
elements (Hours, minutes and seconds bars).
At the end, we will use again
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
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
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
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
I have passed as the 1st parameter.
We have now finalized the initialization of our
WPF/E content page, next we will go
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
Figure 1: WPF/E Clock
All these elements must be drawn inside a
Defining a Canvas
Canvas is simply a drawing area. You can define the
height of a
Canvas as well as draw nested
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
In the below code I have used the
Fill property which is used to fill the
with the black color. I have also used some
additional properties to define the behavior for the clock.
StrokeThickness property defines the thickness of the
Ellipse outline. The
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
RadialGradientBrush. In our code I have used the
LinearGradientBrush. Same concept
can be applied to the
For more information about the available Brushs please refer to the SDK.
Figure 3: Clock Frame
Ellipse is used to draw the outer thin black border.
Figure 4: Clock inner gradient frame
Ellipse to draw an outer outline border for the previous gradient
Figure 5: Clock inner gradient frame
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
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
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
Figure 6: Clock Hours and Minutes Polygons
We will use the same concept to draw the seconds bar with a
Perform Animation using Silverlight
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:
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
TargetName maps to the object we want to animate while the
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
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.
Now it is time for some
how each bar should rotate from which starting angle as well as end angle using
To properties of the
DoubleAnimation object through
sender parameter in the above code is a reference to the
Canvas object sent when
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
WPF/E control provides the method
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
Canvas Loaded event handler as shown in defining
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
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
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.
Article Code (Pre beta 1.0)
Article Code (Beta 1.0)
Sorry, no bio is available
This author has published 8 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.