Silverlight "WPF/E" first steps: Getting started with simple analog clock

Total votes: 11
Views: 71,161
Comments: 3
Category: Silverlight

Please login to rate or to leave a comment.

Silverlight "WPF/E" first steps: Getting started with simple analog clock

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:

Download and install the Microsoft Visual Studio 2005 SP1 Update, available on the Visual Studio SP1 support page
Download and install WPF/E SDK
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.

// Create the WPF/E ActiveX control.
  // The technique here enables your WPF/E content to receive
  // input before its ActiveX control is clicked.
  new agHost(

/* hostElementID (The HTML element inside of
    which the WPF/E ActiveX control is inserted.
    This element is usually a <div>)
    If you change the name of the host HTML
    element, change it here too.*/

"agControlHost",
    
    "agControl1", // The ID of the WPF/E ActiveX control to create.
    "250px", // The width of the control.
    "250px", // The height of the control.
    "#D6D6D6", // The background color of the control.
    null, // SourceElement (name of script tag containing XAML)
    "clock.xaml", // The uri of the source file that contains the WPF/E content.
    "false", // IsWindowless
    "30", // MaxFrameRate
    null // OnError handler.
  );

// Create a global variable for the WPF/E ActiveX control,
  // to use when you want to retrieve named XAML elements. 
  var agControl = document.getElementById("agControl1");

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 7^th parameter. We gave the control the id agControl1 and passed it as the 2^nd parameter and the control will be hosted inside the previously created div, which I have passed as the 1^st 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

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.

//Canvas Loaded Event Handler
function OnCanvasLoad(sender, args)
{
  DrawClock(sender);
  StartClock(sender);
}
function StartClock(sender)
{
  var date = new Date();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
    
  //Calculate Seconds Bar Initial Angle Location
  var secondsAngle = seconds * 6;
  //Calculate Minutes Bar Initial Angle Location
  var minutesAngle = (minutes * 6) + (seconds * 0.1);
  //Calculate Hours Bar Initial Angle Location
  var hoursAngle = (hours * 30) + (minutes * 0.5) + (seconds * (1/120));
    
  //Set From and To Values of DoubleAnimation Object SecondsAnim
  sender.findName("SecondsAnim").From = secondsAngle;

//Rotate 360 Degree, a full cycle
  sender.findName("SecondsAnim").To = 360 + secondsAngle;
    
  //Set From and To Values of DoubleAnimation Object MinutesAnim
  sender.findName("MinutesAnim").From = minutesAngle;

//Rotate 360 Degree, a full cycle
  sender.findName("MinutesAnim").To = 360 + minutesAngle;
    
  //Set From and To Values of DoubleAnimation Object HoursAnim
  sender.findName("HoursAnim").From = hoursAngle;

//Rotate 360 Degree, a full cycle
  sender.findName("HoursAnim").To = 360 + hoursAngle;
}

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.

function DrawClock(canvas)
{
  // Get the WPF/E control referece through GetHost method of the canvas
  var wpfeControl = canvas.GetHost();
  // Define Line elemetn Xaml fragment with some pattern for 
  // StrokeThickness and Angle
  var xamlFragment = '<Line 
	Canvas.Left="265" 
	Canvas.Top="265" 
	X1="0" 
	Y1="-120" 
	X2="0" 
	Y2="-129" 
	Stroke="White"'

xamlFragment+='StrokeThickness="{T}"><Line.RenderTransform>
	<RotateTransform CenterX="0" CenterY="0" Angle="{A}"/>'
  xamlFragment+='</Line.RenderTransform></Line>';

// Create RegExp pattern for Angle and StrokeThickness, 
  // will be replaced during creation.
  var angleExp = /{A}/;
  var thicknessExp = /{T}/;
    
  var angle = 0;
  for(i=0; i<60; i++)
  {
    // Define Line.RenderTransform.RotateTransform.Angle 
    // Property by replacing Angle Pattern with correct Angle
    var xamlLine = xamlFragment.replace(angleExp,angle);
    if(i%5 == 0)
    {
      // Define Line.StrokeThickness Property by replacing 
      // StrokeThickness Pattern with correct StrokeThickness
      xamlLine = xamlLine.replace(thicknessExp,4); //this is an hour line
    }
    else
    {
      // this is normal minute/second line
      xamlLine = xamlLine.replace(thicknessExp,2);
    }

//Create Line
    var line = wpfeControl.createFromXaml(xamlLine);

//Add the created Line to the canvas.
    canvas.children.add(line);

//Increase the Angle by 6 so next line will drawn in its correct place.
    angle += 6;
  }
}

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/

About Muhammad Mosa

Sorry, no bio is available

View complete profile

Discussion

Subject	Author	Date
Great	Amr Elsehemy	4/25/2007 12:46 PM
Nice article, very nice start I think I am going to do something with that Wpf/e Reply \| Permanent link
I know it!	Muhammad Mosa	4/26/2007 4:50 PM
Amr, I know you'll do!! and I'm focusing on you! Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
New download	Sonu Kapoor	5/6/2007 10:41 PM
The new files for the latest build can be downloaded at: http://dotnetslackers.com/code/SilverlightGettingStarted_Beta1.0Compat.zip [MVP since 2005] [MCAD] Webmaster of DotNetSlackers Question or Suggestion? Feel free to ask my any .NET question Our Posting FAQ Reply \| Permanent link

Please login to rate or to leave a comment.

Product Spotlight

Login

Lost Password?