Introduction
Step 1

Create a new project in Visual Studio 2012 and select "Silverlight Application".
Step 2

Open MainPage.xaml and add the following code.
  1. <UserControl x:Class="SilverlightAnalogClock.MainPage"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6. mc:Ignorable="d"
  7. d:DesignHeight="300" d:DesignWidth="400">
  9. <Grid x:Name="LayoutRoot" Background="White">
  11. </Grid>
  12. </UserControl>
Step 3

Open MainPage.xaml.cs and add the following code.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Documents;
  8. using System.Windows.Input;
  9. using System.Windows.Media;
  10. using System.Windows.Media.Animation;
  11. using System.Windows.Media.Imaging;
  12. using System.Windows.Shapes;
  14. namespace SilverlightAnalogClock
  15. {
  16. public partial class MainPage : UserControl
  17. {
  19. public Canvas ClockArea = null;
  20. public Rectangle secondHand = null;
  21. public Rectangle minuteHand = null;
  22. public Rectangle hourHand = null;
  24. public RotateTransform secondHandRotate = null;
  25. public RotateTransform minuteHandRotate = null;
  26. public RotateTransform hourHandRotate = null;
  28. public Ellipse outerCircle = null;
  30. public Point centerPoint;
  31. public double HEIGHT = 0;
  32. public double WIDTH = 0;
  33. public double RADIUS = 0;
  35. public MainPage()
  36. {
  37. InitializeComponent();
  39. ClockArea = new Canvas()
  40. {
  42. Width = 300,
  43. Height = 300,
  44. HorizontalAlignment = HorizontalAlignment.Left,
  45. VerticalAlignment = VerticalAlignment.Top
  47. };
  49. ClockArea.SetValue(Grid.RowProperty, 0);
  50. ClockArea.SetValue(Grid.ColumnProperty, 0);
  51. ClockArea.Margin = new Thickness(0, 0, 0, 0);
  52. this.LayoutRoot.Children.Add(ClockArea);
  54. WIDTH = ClockArea.Width;
  55. HEIGHT = ClockArea.Height;
  56. centerPoint.X = (WIDTH/2);
  57. centerPoint.Y = (HEIGHT/2);
  59. RADIUS = 400;
  60. DrawClockFace();
  62. Point TOPPOINT = new Point(0, 0);
  64. DrawMinuteHand();
  65. DrawSecondHand();
  66. DrawHourHand();
  67. DrawCenterCircle();
  70. //Start the Clock
  71. ClockStart();
  74. }
  76. public void ClockStart()
  77. {
  78. // Create and Start the Thread Timer
  79. System.Windows.Threading.DispatcherTimer clockTimer = new System.Windows.Threading.DispatcherTimer();
  80. clockTimer.Interval = new TimeSpan(0, 0, 0, 0, 1000);
  81. clockTimer.Tick += new EventHandler(Clock_Tick);
  82. clockTimer.Start();
  83. }
  85. // Get and Set the Angles of Each Hand at every Clock Ticks
  86. public void Clock_Tick(object o, EventArgs sender)
  87. {
  88. double hourRotateValue = Convert.ToDouble(DateTime.Now.Hour.ToString());
  89. double minuteRotateValue = Convert.ToDouble(DateTime.Now.Minute.ToString());
  90. double secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString());
  91. hourRotateValue = (hourRotateValue + minuteRotateValue / 60) * 30;
  92. minuteRotateValue = (minuteRotateValue + secondRotateValue / 60) * 6;
  93. secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString()) * 6;
  94. minuteHandRotate.Angle = minuteRotateValue;
  95. hourHandRotate.Angle = hourRotateValue;
  96. secondHandRotate.Angle = secondRotateValue;
  97. }
  99. // Draw Center Circle
  100. public void DrawCenterCircle()
  101. {
  102. Ellipse centerCircle = new Ellipse()
  103. {
  105. Width = 10,
  106. Height = 10,
  107. Stroke = new SolidColorBrush(Colors.Red),
  108. Fill = new SolidColorBrush(Colors.Red),
  109. HorizontalAlignment = HorizontalAlignment.Center,
  110. VerticalAlignment = VerticalAlignment.Center
  112. };
  114. centerCircle.SetValue(Grid.RowProperty, 0);
  115. centerCircle.SetValue(Grid.ColumnProperty, 0);
  116. Canvas.SetLeft(centerCircle, (WIDTH / 2) - (centerCircle.Width / 2));
  117. Canvas.SetTop(centerCircle, (HEIGHT / 2) - (centerCircle.Height / 2));
  118. ClockArea.Children.Add(centerCircle);
  119. }
  121. // Draw Clock Face
  122. public void DrawClockFace()
  123. {
  125. int smallCircle = 5;
  127. Color c = Colors.Blue;
  128. int p = 0;
  130. // Draw Shadow of Outer Circle
  131. Ellipse outerCircleShadow = new Ellipse()
  132. {
  133. Width = (WIDTH),
  134. Height = (WIDTH),
  135. Stroke = new SolidColorBrush(Colors.Gray),
  136. StrokeThickness = 5,
  137. HorizontalAlignment = HorizontalAlignment.Center,
  138. VerticalAlignment = VerticalAlignment.Center
  140. };
  142. outerCircleShadow.SetValue(Grid.RowProperty, 0);
  143. outerCircleShadow.SetValue(Grid.ColumnProperty, 0);
  144. Canvas.SetLeft(outerCircleShadow, (WIDTH / 2) - (outerCircleShadow.Width / 2) + 6.5);
  145. Canvas.SetTop(outerCircleShadow, (HEIGHT / 2) - (outerCircleShadow.Height / 2) + 6.5);
  146. ClockArea.Children.Add(outerCircleShadow);
  148. // Draw Outer Circle
  149. outerCircle = new Ellipse()
  150. {
  151. Width = (WIDTH ),
  152. Height = (WIDTH),
  153. Stroke = new SolidColorBrush(Colors.Black),
  154. StrokeThickness = 5,
  155. HorizontalAlignment = HorizontalAlignment.Center,
  156. VerticalAlignment = VerticalAlignment.Center
  157. };
  158. outerCircle.SetValue(Grid.RowProperty, 0);
  159. outerCircle.SetValue(Grid.ColumnProperty, 0);
  160. Canvas.SetLeft(outerCircle, (WIDTH / 2) - (outerCircle.Width / 2) + 4.5);
  161. Canvas.SetTop(outerCircle, (HEIGHT / 2) - (outerCircle.Height / 2) + 4.5);
  162. ClockArea.Children.Add(outerCircle);
  165. outerCircle.Fill = new LinearGradientBrush()
  166. {
  167. EndPoint = new Point(1, 0),
  168. GradientStops = new GradientStopCollection()
  169. {
  170. new GradientStop() { Color = Colors.White, Offset = 0 },
  171. new GradientStop() { Color = Colors.Gray, Offset = 0.5 },
  172. new GradientStop() { Color = Colors.White, Offset = 1 }
  173. }
  174. };
  176. int clockDigits = 3;
  177. double rad = (WIDTH/2) - 10.0f;
  178. // 60 Innner Dots as Small Circle
  179. for (double i = 0.0; i < 360.0; i += 6)
  180. {
  182. double angle = i * System.Math.PI / 180;
  184. int x = (int)(centerPoint.X + rad * System.Math.Cos(angle));
  185. int y = (int)(centerPoint.Y + rad * System.Math.Sin(angle));
  187. if (p % 5 == 0)
  188. {
  189. smallCircle = 10;
  190. c = Colors.Orange;
  191. }
  192. else
  193. {
  194. smallCircle = 5;
  195. c = Colors.Blue;
  196. }
  197. if (p % 15 == 0)
  198. {
  199. TextBlock tb = new TextBlock();
  200. tb.Text = clockDigits.ToString();
  201. tb.FontSize = 24;
  203. tb.SetValue(Grid.RowProperty, 0);
  204. tb.SetValue(Grid.ColumnProperty, 0);
  205. Canvas.SetLeft(tb, x );
  206. Canvas.SetTop(tb, y);
  207. if (clockDigits == 3)
  208. {
  209. Canvas.SetLeft(tb, x - 20);
  210. Canvas.SetTop(tb, y - 10);
  211. }
  212. if (clockDigits == 6)
  213. {
  214. Canvas.SetLeft(tb, x);
  215. Canvas.SetTop(tb, y - 30);
  216. }
  217. if (clockDigits == 9)
  218. {
  219. Canvas.SetLeft(tb, x + 15);
  220. Canvas.SetTop(tb, y - 10);
  221. }
  222. if (clockDigits == 12)
  223. {
  224. Canvas.SetLeft(tb, x - 10);
  225. Canvas.SetTop(tb, y + 5 );
  226. }
  229. ClockArea.Children.Add(tb);
  230. clockDigits = clockDigits + 3;
  231. }
  233. p++;
  235. Ellipse innerPoints = new Ellipse()
  236. {
  237. Width = smallCircle,
  238. Height = smallCircle,
  239. Stroke = new SolidColorBrush(c),
  240. Fill = new SolidColorBrush(c),
  241. HorizontalAlignment = HorizontalAlignment.Center,
  242. VerticalAlignment = VerticalAlignment.Center
  243. };
  244. innerPoints.SetValue(Grid.RowProperty, 0);
  245. innerPoints.SetValue(Grid.ColumnProperty, 0);
  246. Canvas.SetLeft(innerPoints, x);
  247. Canvas.SetTop(innerPoints, y);
  248. ClockArea.Children.Add(innerPoints);
  250. }
  253. }
  254. // Draw the Second Hand
  255. public void DrawSecondHand()
  256. {
  258. double handLength = (HEIGHT / 2) - 20;
  259. secondHand = new Rectangle()
  260. {
  261. Width = 1,
  262. Height = handLength,
  263. Stroke = new SolidColorBrush(Colors.Red),
  264. Fill = new SolidColorBrush(Colors.Red),
  265. HorizontalAlignment = HorizontalAlignment.Center,
  266. VerticalAlignment = VerticalAlignment.Center
  267. };
  269. secondHand.SetValue(Grid.RowProperty, 0);
  270. secondHand.SetValue(Grid.ColumnProperty, 0);
  271. //Add Rotate Transformation
  272. secondHandRotate = new RotateTransform();
  273. secondHandRotate.Angle = 0;
  274. //Set Center for Rotation
  275. secondHandRotate.CenterX = Canvas.GetLeft(secondHand);
  276. secondHandRotate.CenterY = secondHand.Height;
  277. secondHand.RenderTransform = secondHandRotate;
  278. //Set Initial Position of Hand
  279. Canvas.SetTop(secondHand, centerPoint.Y - handLength);
  280. Canvas.SetLeft(secondHand, WIDTH/2);
  281. ClockArea.Children.Add(secondHand);
  283. }
  285. public void DrawMinuteHand()
  286. {
  287. double handLength = (HEIGHT / 2) - 50;
  288. minuteHand = new Rectangle()
  289. {
  290. Width = 4,
  291. Height = handLength,
  292. Stroke = new SolidColorBrush(Colors.Black),
  293. Fill = new SolidColorBrush(Colors.Black),
  294. HorizontalAlignment = HorizontalAlignment.Center,
  295. VerticalAlignment = VerticalAlignment.Center
  296. };
  298. minuteHand.SetValue(Grid.RowProperty, 0);
  299. minuteHand.SetValue(Grid.ColumnProperty, 0);
  301. minuteHandRotate = new RotateTransform();
  302. minuteHandRotate.Angle = 0;
  303. minuteHandRotate.CenterX = Canvas.GetLeft(minuteHand);
  304. minuteHandRotate.CenterY = minuteHand.Height;
  305. minuteHand.RenderTransform = minuteHandRotate;
  306. Canvas.SetTop(minuteHand, centerPoint.Y - handLength);
  307. Canvas.SetLeft(minuteHand, WIDTH / 2);
  308. ClockArea.Children.Add(minuteHand);
  310. }
  311. public void DrawHourHand()
  312. {
  313. double handLength = (HEIGHT / 2) - 80;
  314. hourHand = new Rectangle()
  315. {
  316. Width = 4,
  317. Height = handLength,
  318. Stroke = new SolidColorBrush(Colors.Black),
  319. Fill = new SolidColorBrush(Colors.Black),
  320. HorizontalAlignment = HorizontalAlignment.Center,
  321. VerticalAlignment = VerticalAlignment.Center
  322. };
  324. hourHand.SetValue(Grid.RowProperty, 0);
  325. hourHand.SetValue(Grid.ColumnProperty, 0);
  327. hourHandRotate = new RotateTransform();
  328. hourHandRotate.Angle = 0;
  329. hourHandRotate.CenterX = Canvas.GetLeft(hourHand);
  330. hourHandRotate.CenterY = hourHand.Height;
  331. hourHand.RenderTransform = hourHandRotate;
  332. Canvas.SetTop(hourHand, centerPoint.Y - handLength);
  333. Canvas.SetLeft(hourHand, WIDTH / 2);
  334. ClockArea.Children.Add(hourHand);
  336. }
  338. }
  339. }
Output

Now execute and you will get a fully drawn Analog Clock.