Silverlight

Clock in Silverlight With C#

Here is designer code xaml:

  1. <UserControl x:Class="Clock.Page"    
  2.     xmlns="http://schemas.microsoft.com/client/2007"     
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     
  4.     Width="400" Height="400">    
  5.     <Canvas Width="400" Height="400" Loaded="Canvas_Loaded">    
  6.         <Canvas.Resources>    
  7.             <Storyboard x:Name="clockStoryboard">    
  8.     
  9.                 <!-- This animation targets the hour hand transform -->    
  10.                 <DoubleAnimation x:Name="hourAnimation"    
  11.      Storyboard.TargetName="hourHandTransform"    
  12.      Storyboard.TargetProperty="Angle"    
  13.      Duration="12:0:0" RepeatBehavior="Forever"/>    
  14.     
  15.                 <!-- This animation targets the minute hand transform -->    
  16.                 <DoubleAnimation x:Name="minuteAnimation"    
  17.      Storyboard.TargetName="minuteHandTransform"     
  18.      Storyboard.TargetProperty="Angle"    
  19.      Duration="1:0:0" RepeatBehavior="Forever"/>    
  20.     
  21.                 <!-- This animation targets the second hand transform  -->    
  22.                 <DoubleAnimation x:Name="secondAnimation"    
  23.      Storyboard.TargetName="secondHandTransform"     
  24.      Storyboard.TargetProperty="Angle"    
  25.      Duration="0:1:0" RepeatBehavior="Forever"/>    
  26.             </Storyboard>    
  27.         </Canvas.Resources>    
  28.     
  29.         <!-- Clock Shadow -->    
  30.         <!--<Ellipse Width="330" Height="330" Canvas.Left="40"     
  31.          Canvas.Top="40" Fill="Black" Opacity="0.5"/>-->    
  32.     
  33.         <!-- Outer rim -->    
  34.         <Ellipse Stroke="#FF000000" x:Name="outerCircle" Width="330" Height="330"     
  35.          Canvas.Left="32" Canvas.Top="32">    
  36.             <Ellipse.Fill>    
  37.                 <!--This linear gradient creates a subtle shadow effect on the outer rim. -->    
  38.                 <LinearGradientBrush EndPoint="0.196,0.127" StartPoint="0.852,0.814">    
  39.                     <GradientStop Color="#FFC0C0C0" Offset="0.788"/>    
  40.                     <GradientStop Color="#FFE4E5F4" Offset="0.995"/>    
  41.                 </LinearGradientBrush>    
  42.             </Ellipse.Fill>    
  43.         </Ellipse>    
  44.     
  45.         <!-- Bevel -->    
  46.         <Ellipse Stroke="#FF000000" Width="290" Height="281" Canvas.Left="52"     
  47.          Canvas.Top="57">    
  48.             <Ellipse.Fill>    
  49.                 <!-- This linear gradient creates a subtle shadow effect on     
  50.          the outer rim. -->    
  51.                 <LinearGradientBrush EndPoint="0.867,0.848" StartPoint="0.232,0.126">    
  52.                     <GradientStop Offset="0.1"/>    
  53.                     <GradientStop Color="#FFE4E5F4" Offset="0.995"/>    
  54.                 </LinearGradientBrush>    
  55.             </Ellipse.Fill>    
  56.         </Ellipse>    
  57.     
  58.         <!-- Clock Face -->    
  59.         <!--<Ellipse Stroke="#FF000000" Width="273" Height="265"      
  60.          Canvas.Left="60" Canvas.Top="65" Fill="#FF000000"/>-->    
  61.     
  62.         <!-- Central Clock Circle -->    
  63.         <Ellipse StrokeThickness="7"     
  64.          Width="32" Height="31" Canvas.Left="180" Canvas.Top="190">    
  65.             <Ellipse.Stroke>    
  66.                 <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">    
  67.                     <GradientStop Color="Black" Offset="0" />    
  68.                     <GradientStop Color="White" Offset="1" />    
  69.                 </LinearGradientBrush>    
  70.             </Ellipse.Stroke>    
  71.             <Ellipse.Fill>    
  72.                 <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">    
  73.                     <GradientStop Color="Black" Offset="1" />    
  74.                     <GradientStop Color="White" Offset="0" />    
  75.                 </LinearGradientBrush>    
  76.             </Ellipse.Fill>    
  77.         </Ellipse>    
  78.         <!-- Minute Hand -->    
  79.         <Rectangle Fill="Gray" Width="8" Height="80" Canvas.Left="192.5" Canvas.Top="226"    
  80.            RenderTransformOrigin="0.41,-0.26" x:Name="MinutedHand">    
  81.             <Rectangle.RenderTransform>    
  82.                 <RotateTransform x:Name="minuteHandTransform"/>    
  83.             </Rectangle.RenderTransform>    
  84.         </Rectangle>    
  85.     
  86.         <!-- Hour Hand -->    
  87.         <Rectangle Fill="Gray" Width="10" Height="60" Canvas.Left="192.5" Canvas.Top="226"    
  88.            RenderTransformOrigin="0.35,-0.35" x:Name="HourHand">    
  89.             <Rectangle.RenderTransform>    
  90.                 <RotateTransform x:Name="hourHandTransform"/>    
  91.             </Rectangle.RenderTransform>    
  92.         </Rectangle>    
  93.     
  94.         <!-- Second Hand -->    
  95.         <Rectangle Fill="Gray" Width="5" Height="80" Canvas.Left="192.5" Canvas.Top="226"    
  96.            RenderTransformOrigin="0.65,-0.26" x:Name="SecondHand" >    
  97.             <Rectangle.RenderTransform>    
  98.                 <RotateTransform x:Name="secondHandTransform"/>    
  99.             </Rectangle.RenderTransform>    
  100.         </Rectangle>    
  101.     
  102.     </Canvas>    
  103. </UserControl>    
Now go to view code in C#:
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Windows;    
  5. using System.Windows.Controls;    
  6. using System.Windows.Documents;    
  7. using System.Windows.Input;    
  8. using System.Windows.Media;    
  9. using System.Windows.Media.Animation;    
  10. using System.Windows.Shapes;    
  11.     
  12. namespace Clock    
  13. {    
  14.     public partial class Page : UserControl    
  15.     {    
  16.         public Page()    
  17.         {    
  18.             InitializeComponent();    
  19.         }    
  20.     
  21.     
  22.         public void Canvas_Loaded(object sender, EventArgs e)    
  23.         {    
  24.     
  25.             // The current date and time.    
  26.             System.DateTime date = DateTime.Now;    
  27.     
  28.             // Find the appropriate angle (in degrees) for the hour hand    
  29.             // based on the current time.    
  30.             double hourangle = (((float)date.Hour) / 12) * 360 + date.Minute / 2;    
  31.     
  32.             // The transform is already rotated 116.5 degrees to make the hour hand be    
  33.             // in the 12 o'clock position. You must build this already existing angle    
  34.             // into the hourangle.    
  35.             hourangle += 180;    
  36.     
  37.             // The same as for the hour angle.    
  38.             double minangle = (((float)date.Minute) / 60) * 360;    
  39.             minangle += 180;    
  40.     
  41.             // The same for the hour angle.    
  42.             double secangle = (((float)date.Second) / 60) * 360;    
  43.             secangle += 180;    
  44.     
  45.             // Set the beginning of the animation (From property) to the angle     
  46.             // corresponging to the current time.    
  47.             hourAnimation.From = hourangle;    
  48.     
  49.             // Set the end of the animation (To property)to the angle     
  50.             // corresponding to the current time PLUS 360 degrees. Thus, the    
  51.             // animation will end after the clock hand moves around the clock     
  52.             // once. Note: The RepeatBehavior property of the animation is set    
  53.             // to "Forever" so the animation will begin again as soon as it completes.    
  54.             hourAnimation.To = hourangle + 360;    
  55.     
  56.             // Same as with the hour animation.    
  57.             minuteAnimation.From = minangle;    
  58.             minuteAnimation.To = minangle + 360;    
  59.     
  60.             // Same as with the hour animation.    
  61.             secondAnimation.From = secangle;    
  62.             secondAnimation.To = secangle + 360;    
  63.     
  64.             // Start the storyboard.    
  65.             clockStoryboard.Begin();    
  66.     
  67.         }    
  68.     
  69.     }    
  70.     
  71. }    
Canvas and StoryBoard controls are main part of this.

clock

Here is 3D Clock in silverlight with C#.

 
Membership not found