Post
Ask Question

Analog Clock Using .NET Silverlight

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">  
  8.   
  9.     <Grid x:Name="LayoutRoot" Background="White">  
  10.          
  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;  
  13.   
  14. namespace SilverlightAnalogClock  
  15. {  
  16.     public partial class MainPage : UserControl  
  17.     {  
  18.   
  19.         public Canvas ClockArea = null;  
  20.         public Rectangle secondHand = null;  
  21.         public Rectangle minuteHand = null;  
  22.         public Rectangle hourHand = null;  
  23.   
  24.         public RotateTransform secondHandRotate = null;  
  25.         public RotateTransform minuteHandRotate = null;  
  26.         public RotateTransform hourHandRotate = null;  
  27.   
  28.         public Ellipse outerCircle = null;  
  29.   
  30.         public Point centerPoint;  
  31.         public double HEIGHT  = 0;  
  32.         public double WIDTH  = 0;  
  33.         public double RADIUS = 0;  
  34.   
  35.         public MainPage()  
  36.         {  
  37.             InitializeComponent();  
  38.   
  39.             ClockArea = new Canvas()  
  40.             {  
  41.   
  42.                 Width = 300,  
  43.                 Height = 300,  
  44.                 HorizontalAlignment = HorizontalAlignment.Left,  
  45.                 VerticalAlignment = VerticalAlignment.Top  
  46.   
  47.             };  
  48.   
  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);  
  53.   
  54.             WIDTH = ClockArea.Width;  
  55.             HEIGHT = ClockArea.Height;  
  56.             centerPoint.X = (WIDTH/2);  
  57.             centerPoint.Y = (HEIGHT/2);  
  58.                    
  59.             RADIUS = 400;  
  60.             DrawClockFace();  
  61.   
  62.             Point TOPPOINT = new Point(0, 0);  
  63.   
  64.             DrawMinuteHand();  
  65.             DrawSecondHand();  
  66.             DrawHourHand();  
  67.             DrawCenterCircle();  
  68.   
  69.   
  70.             //Start the Clock  
  71.             ClockStart();  
  72.               
  73.   
  74.         }  
  75.   
  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.         }  
  84.   
  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.         }  
  98.   
  99.         // Draw Center Circle  
  100.         public void DrawCenterCircle()  
  101.         {              
  102.             Ellipse centerCircle = new Ellipse()  
  103.             {  
  104.   
  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  
  111.   
  112.             };  
  113.   
  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.         }  
  120.   
  121.         // Draw Clock Face  
  122.         public void DrawClockFace()  
  123.         {  
  124.                       
  125.             int smallCircle = 5;  
  126.   
  127.             Color c = Colors.Blue;  
  128.             int p = 0;  
  129.   
  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  
  139.                   
  140.             };  
  141.              
  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);  
  147.              
  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);  
  163.   
  164.   
  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.                 };  
  175.   
  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.             {   
  181.   
  182.             double angle = i * System.Math.PI / 180;  
  183.   
  184.             int x = (int)(centerPoint.X + rad * System.Math.Cos(angle));  
  185.             int y = (int)(centerPoint.Y + rad * System.Math.Sin(angle));  
  186.   
  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;  
  202.                   
  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.                 }   
  227.                 
  228.                   
  229.                 ClockArea.Children.Add(tb);  
  230.                 clockDigits = clockDigits + 3;  
  231.             }  
  232.   
  233.             p++;  
  234.              
  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);  
  249.   
  250.             }  
  251.   
  252.               
  253.         }  
  254.         // Draw the Second Hand  
  255.         public void DrawSecondHand()  
  256.         {  
  257.   
  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.             };  
  268.               
  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);  
  282.              
  283.         }  
  284.   
  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.             };  
  297.   
  298.             minuteHand.SetValue(Grid.RowProperty, 0);  
  299.             minuteHand.SetValue(Grid.ColumnProperty, 0);  
  300.   
  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);  
  309.   
  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.             };  
  323.   
  324.             hourHand.SetValue(Grid.RowProperty, 0);  
  325.             hourHand.SetValue(Grid.ColumnProperty, 0);  
  326.   
  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);  
  335.   
  336.         }  
  337.   
  338.     }  
  339. }  
Output

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


Similar Articles