Silverlight Clock

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.RenderTransform>

</Canvas.RenderTransform>

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<Canvas.RenderTransform>

</Canvas.RenderTransform>

<Rectangle.OpacityMask>

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<Canvas.RenderTransform>

</Canvas.RenderTransform>

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<Canvas.RenderTransform>

</Canvas.RenderTransform>

<Rectangle.OpacityMask>

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<Canvas.RenderTransform>

</Canvas.RenderTransform>

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<Canvas.RenderTransform>

</Canvas.RenderTransform>

<Rectangle.OpacityMask>

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<Ellipse.Fill>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Canvas>

<Ellipse.Fill>

<RadialGradientBrush.RelativeTransform>

</TransformGroup>

</RadialGradientBrush.RelativeTransform>

</RadialGradientBrush>

</Ellipse.Fill>

<Ellipse.OpacityMask>

</RadialGradientBrush>

</Ellipse.OpacityMask>

</Ellipse>

</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;

}

3 Comments

Join the conversation! Your thoughts help the community grow.

Catalin Miclea14y ago
Thanks alot, Tomar, this really helped me! And it works great! ;)
Mike Gold18y ago
You may want to mention that you need to include using System.Windows.Threading;
Mike Gold18y ago
You may want to mention that you need to include using System.Windows.Threading;