Project Description
Hybrid Clock for Microsoft Silverlight 2.0 contains the "best of both worlds": Analog and Digital controls in perfect harmony used for Date/Time visualization. It's written in XAML, C# and JavaScript and could enhance any Silverlight-enabled .NET Web application.

The following demo page adds the button to the Bing Map with functionality to open NASCAR MAP in a full-screen mode. Notice, that in order to put the button control on the top of the map it was placed in "<div>" element with z-index set to 100 (in this particular case, even z-index:1 will do the job; in real-life development project make sure that the object on the top has its z-index properly set).

Hybrid Clock for Silverlight™ 2.0 by Alex Bell
Overview
Hybrid Clock is, by far, the most sophisticated animated Date/Time visualization control developed for Microsoft Silverlight™ 2.0. Originaly created by Microsoft as analog clock for Silverlight™ 1.0 it was upgraded by Dr. Alexander Bell (the Author) to work with Silverlight 2.0. This revised version (see the working sample) combines "the best of both worlds", namely: digital and analog UI components. Its original analog design was enhanced by embedding the Date/Time digital scale into clock's face layout. Clock's readings are dynamically updated every 1 sec; time granularity of its digital scale could be reduced to 0.1 sec and further upon necessity. The list of enhancement also includes the animated resizing feature, which properties could be set separately for X or Y axes.

At the core of digital scale is the DateTime.js module, included in this package. It has the value of its own, allowing web developers to add the virtual high-resolution Digital Clock to essentially any type of HTML elements, which supports the innerHTML property.
Package
Hybrid Clock 2.0 package includes several core components:
1. HybridClock.xaml file located in xaml folder:
2. Script files located in js folder
- Silverlight.js (V 2.0)
- DateTime.js
- HybridClock.js
- HybridClockExt.js
Usage
Hybrid Clock could be addefd to ether .htm or .aspx page in several steps outlined below:

1. Create "xaml" and "js" folders in your web root application directory and copy the core components listed in section "Package"
2. Add the references to .js files to the <head> section of the web page as shown below (note: proper tags should be added):
<script type="text/javascript" src="js/Silverlight.js" ></script>
<script type="text/javascript"; src="js/DateTime.js" ></script>
<script type="text/javascript" src="js/HybridClock.js" ></script>
<script type="text/javascript"src="js/HybridClockExt.js" ></script>
3. Create <div> element on the page and assign it the id="ClockHost".
4. Add function references to onload and onunload event of the opening body tag as show below:
<body onload="CreateSilverlightClock(); StartDigitalClock()" onunload="StopDigitalClock(); StopSilverLightDigitalTimeDate()">
5. Run your page to see the Hybrid Clock working
Customization
In order to customize the animated resizing effect, modify the values of following properties in HybridClock.js file (sample follows):
var scaleXfrom = 0;
var scaleXto =0.7;
var scaleXdur = "00:00:02";
var scaleYfrom = 0;
var scaleYto = 0.7;
var scaleYdur = "00:00:01";

Logo customization (currently showing "Alex Bell" brand name) could be done by modifying the following section in HybridClock.xaml file:
TextBlock x:Name="clockLogo"
FontFamily ="Calibri"
FontWeight="Light"
FontSize="16"
Foreground="Silver"
Opacity="0.5"
Canvas.Top="70"
Canvas.Left="115"
Text="Alex Bell">
Further enhancement
The most obvious Hybrid Clock enhancement could be achieved by adding the gallery of clock face design layout, i.e.. Themes. The project could be also extended by adding the second scale, digital or analog, or both, showing the "World Time", i.e. the time in two different locales. I would assume, that numerous other ehnancements exist and would like to encourage my colleagues to try their own ones. Feel free to drop me a line or two should you have any questions or need for discussion: you can do it right here in comments section, or you can email me at: AlexBell

.NET ASP.NET Silverlight™ GUI Clock XAML JavaScript Analog Digital AJAX

Last edited Feb 18, 2015 at 2:38 AM by DrABELL, version 26