ARTICLE

Silverlight Clock

Posted by Nipun Tomar Articles | Silverlight with C# August 12, 2008
This article will describe how to create Silverlight clock using timer.
Reader Level:
Download Files:
 

There is an article Creating a Clock with Silverlight which describes how to create Silverlight clock. Following those steps and with a few changes, clock can be made to work with timer instead of Storyboard Animation.
Demo

Create clock hands and their shadow in Page.xaml
<Canvas Width="126.667" Height="126.667" x:Name="Time">

                <Canvas Width="126.667" Height="126.667" x:Name="Hour" RenderTransformOrigin="0.5,0.5">

                    <Canvas.RenderTransform>

                        <RotateTransform Angle="0" x:Name="HourAngle" />

                    </Canvas.RenderTransform>

                    <Rectangle Width="1.833" Height="40" RadiusX="1" RadiusY="1" Canvas.Top="30.001" Canvas.Left="62.413" RenderTransformOrigin="0.5,0.5" Stroke="#7F434343" StrokeThickness="0.2">

                        <Rectangle.Fill>

                            <RadialGradientBrush>

                                <GradientStop Color="#FF4F4F4F" Offset="1"/>

                                <GradientStop Color="#FF120F0F" Offset="0"/>

                            </RadialGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                </Canvas>

                <Canvas Width="126.667" Height="126.667" RenderTransformOrigin="0.508,0.508" x:Name="HourShadow">

                    <Canvas.RenderTransform>

                        <RotateTransform Angle="0" x:Name="HourShadowAngle" />

                    </Canvas.RenderTransform>

                    <Rectangle Width="2.25" Height="40" RadiusX="1" RadiusY="1" Canvas.Top="31" Canvas.Left="63.205" StrokeThickness="0.2">

                        <Rectangle.OpacityMask>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="#004F4F4F" Offset="1"/>

                                <GradientStop Color="#88120F0F" Offset="0.02"/>

                                <GradientStop Color="#88120F0F" Offset="0.98"/>

                                <GradientStop Color="#004F4F4F" Offset="0"/>

                            </LinearGradientBrush>

                        </Rectangle.OpacityMask>

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">

                                <GradientStop Color="#004F4F4F" Offset="1"/>

                                <GradientStop Color="#99120F0F" Offset="0.4"/>

                                <GradientStop Color="#99120F0F" Offset="0.6"/>

                                <GradientStop Color="#004F4F4F" Offset="0"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                </Canvas>

                <Canvas Width="126.667" Height="126.667" x:Name="Minute" RenderTransformOrigin="0.5,0.5">

                    <Canvas.RenderTransform>

                        <RotateTransform Angle="0" x:Name="MinuteAngle" />

                    </Canvas.RenderTransform>

                    <Rectangle Width="1.083" Height="60.666" RadiusX="1" RadiusY="1" Canvas.Top="14.095" Canvas.Left="62.788" RenderTransformOrigin="0.5,0.5" Stroke="#7F434343" StrokeThickness="0.2">

                        <Rectangle.Fill>

                            <RadialGradientBrush>

                                <GradientStop Color="#FF4F4F4F" Offset="1"/>

                                <GradientStop Color="#FF120F0F" Offset="0"/>

                            </RadialGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                </Canvas>

                <Canvas Width="126.667" Height="126.667" RenderTransformOrigin="0.508,0.508" x:Name="MinuteShadow">

                    <Canvas.RenderTransform>

                        <RotateTransform Angle="0" x:Name="MinuteShadowAngle" />

                    </Canvas.RenderTransform>

                    <Rectangle Width="1.75" Height="60.666" RadiusX="1" RadiusY="1" Canvas.Top="15.345" Canvas.Left="64.038" StrokeThickness="0.2">

                        <Rectangle.OpacityMask>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="#004F4F4F" Offset="1"/>

                                <GradientStop Color="#88120F0F" Offset="0.02"/>

                                <GradientStop Color="#88120F0F" Offset="0.98"/>

                                <GradientStop Color="#004F4F4F" Offset="0"/>

                            </LinearGradientBrush>

                        </Rectangle.OpacityMask>

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">

                                <GradientStop Color="#004F4F4F" Offset="1"/>

                                <GradientStop Color="#99120F0F" Offset="0.4"/>

                                <GradientStop Color="#99120F0F" Offset="0.6"/>

                                <GradientStop Color="#004F4F4F" Offset="0"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                </Canvas>

                <Canvas Width="126.667" Height="126.667" x:Name="Second" RenderTransformOrigin="0.5,0.5">

                    <Canvas.RenderTransform>

                        <RotateTransform Angle="0" x:Name="SecondAngle" />

                    </Canvas.RenderTransform>

                    <Rectangle Width="0.802" Height="65" RadiusX="1" RadiusY="1" Canvas.Top="10" Canvas.Left="62.927" RenderTransformOrigin="0.5,0.5" Stroke="#339F0000" StrokeThickness="0.2">

                        <Rectangle.Fill>

                            <RadialGradientBrush>

                                <GradientStop Color="#BDC70A0A" Offset="1"/>

                                <GradientStop Color="#FF7C0C0C" Offset="0.357"/>

                            </RadialGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                </Canvas>

                <Canvas Width="126.667" Height="126.667" RenderTransformOrigin="0.508,0.508" x:Name="SecondShadow">

                    <Canvas.RenderTransform>

                        <RotateTransform Angle="0" x:Name="SecondShadowAngle" />

                    </Canvas.RenderTransform>

                    <Rectangle Width="0.75" Height="65" RadiusX="1" RadiusY="1" Canvas.Top="11.5" Canvas.Left="64.538" StrokeThickness="0.2">

                        <Rectangle.OpacityMask>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="#004F4F4F" Offset="1"/>

                                <GradientStop Color="#88120F0F" Offset="0.02"/>

                                <GradientStop Color="#88120F0F" Offset="0.98"/>

                                <GradientStop Color="#004F4F4F" Offset="0"/>

                            </LinearGradientBrush>

                        </Rectangle.OpacityMask>

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">

                                <GradientStop Color="#004F4F4F" Offset="1"/>

                                <GradientStop Color="#99120F0F" Offset="0.4"/>

                                <GradientStop Color="#99120F0F" Offset="0.6"/>

                                <GradientStop Color="#004F4F4F" Offset="0"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                </Canvas>

                <Ellipse Width="3" Height="3" StrokeThickness="0.1" Canvas.Left="61.83" Canvas.Top="61.83">

                    <Ellipse.Fill>

                        <RadialGradientBrush>

                            <GradientStop Color="#FF3F3F3F" Offset="0.969"/>

                            <GradientStop Color="#00353535" Offset="1"/>

                            <GradientStop Color="#FF1E1E1E" Offset="0.478"/>

                            <GradientStop Color="#FF000000" Offset="0"/>

                        </RadialGradientBrush>

                    </Ellipse.Fill>

                </Ellipse>

            </Canvas>

            <Canvas Width="126.667" Height="126.667" x:Name="Reflection">

                <Ellipse Width="116.5" Height="116.5" Canvas.Left="5.083" Canvas.Top="5.083">

                    <Ellipse.Fill>

                        <RadialGradientBrush GradientOrigin="0.512,0.553">

                            <RadialGradientBrush.RelativeTransform>

                                <TransformGroup>

                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.238" ScaleY="1.125"/>

                                    <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>

                                    <RotateTransform Angle="-34.092" CenterX="0.5" CenterY="0.5"/>

                                    <TranslateTransform X="0.112" Y="-0.022"/>

                                </TransformGroup>

                            </RadialGradientBrush.RelativeTransform>

                            <GradientStop Color="#40FFFFFF" Offset="1"/>

                            <GradientStop Color="#80FFFFFF" Offset="0.645"/>

                            <GradientStop Color="#40FFFFFF" Offset="0.64"/>

                            <GradientStop Color="#00FFFFFF" Offset="0.57"/>

                        </RadialGradientBrush>

                    </Ellipse.Fill>

                    <Ellipse.OpacityMask>

                        <RadialGradientBrush>

                            <GradientStop Color="#FF000000" Offset="0.772"/>

                            <GradientStop Color="#88FFFFFF" Offset="0.96"/>

                            <GradientStop Color="#66FFFFFF" Offset="0.965"/>

                            <GradientStop Color="#44FFFFFF" Offset="0.985"/>

                            <GradientStop Color="#00FFFFFF" Offset="1"/>

                        </RadialGradientBrush>

                    </Ellipse.OpacityMask>

                </Ellipse>

            </Canvas>

        </Canvas>

Define DispatcherTimer and Clock tick in Page.xaml.cs
DispatcherTimer dt;

        public Page()

        {

            dt = new DispatcherTimer();

            InitializeComponent();

            //Define the event that will occur at timer tick

            dt.Tick += new EventHandler(Clock);

            //Set the timer interval

            dt.Interval = TimeSpan.FromSeconds(1);

            //strat the timer

            dt.Start();

        }

void Clock(object sender, EventArgs e)

        {

            TextBlockDigital.Text = DateTime.Now.ToLongTimeString();

            RotateTransform rotateTransform = new RotateTransform();

            //Set the angle of Second and SecondShadow

            //One tick=6 degrees

            rotateTransform.Angle = DateTime.Now.Second * 6;

            Second.RenderTransform = rotateTransform;           

            SecondShadow.RenderTransform = rotateTransform;

            //Set the angle of Minute and SecondShadow

            rotateTransform = new RotateTransform();

            rotateTransform.Angle = DateTime.Now.Minute * 6;

            Minute.RenderTransform = rotateTransform;

            MinuteShadow.RenderTransform = rotateTransform;

 

            int hr = DateTime.Now.Hour;

            if (hr >= 12)

                hr = hr - 12;

            //Set the angle of Hour and HourShadow

            rotateTransform = new RotateTransform();

            rotateTransform.Angle = (hr * 30) + DateTime.Now.Minute / 2;

            Hour.RenderTransform = rotateTransform;

            HourShadow.RenderTransform = rotateTransform;

        } 

COMMENT USING