Create An Analog Clock For Windows 10 Universal Application

In this article we are going to see how to create an analog clock in Windows 10 universal app using XAML and C#.

Create new Windows 10 universal application. For creating a new Windows 10 universal project, refer to the following:

Develop Apps For Windows 10

I am going to use an ellipse and rectangle control to draw the clock.

Go to MainPage.Xaml page and write the following xaml code,

<Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
<Grid Width="300" Height="300">
<Ellipse Width="300" Height="300" Fill="DarkOliveGreen"></Ellipse>
<Rectangle Margin="150,0,149,150" Name="second" Stroke="White" Height="120" VerticalAlignment="Bottom">
<Rectangle.RenderTransform>
<RotateTransform x:Name="secondHand" CenterX="0" CenterY="120" Angle="0" /> </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Margin="150,49,149,151" Name="minute" Stroke="LightGreen">
<Rectangle.RenderTransform>
<RotateTransform x:Name="minuteHand" CenterX="0" CenterY="100" Angle="0" /> </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Margin="150,80,149,150" Name="hour " Stroke="LightYellow">
<Rectangle.RenderTransform>
<RotateTransform x:Name="hourHand" CenterX="0" CenterY="70" Angle="0" /> </Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Grid>

We need 3 lines (rectangle) to show the hour, seconds, and minute hand on an analog clock. Set the angle zero (0) to transform the line from the center of the circle.

For seconds and minutes multiply the value by 6 to get the angle for the clock hand to transform. For hours multiply the hour by 30 to get the angle.

Using dispatcher time update the angle every second.

Now go to your code behind the page and write the following code.

DispatcherTimer timer = newDispatcherTimer();
publicMainPage()
{
this.InitializeComponent();
timer.Interval = TimeSpan.FromSeconds(1);
timer.Tick += Timer_Tick;
timer.Start();
}
privatevoidTimer_Tick(object sender, object e)
{
secondHand.Angle = DateTime.Now.Second * 6;
minuteHand.Angle = DateTime.Now.Minute * 6;
hourHand.Angle = (DateTime.Now.Hour * 30);
}

Now run the app and see the expected output like the following screen.

For more information on Windows 10 UWP, refer my e-book:

Windows 10 UWP E-book

Read more articles on Universal Windows App:

7 Comments

Join the conversation! Your thoughts help the community grow.

David Johnson10y ago
had to do a few fixups do to the errors in formatting but great
David Johnson10y ago
Great article submitted to hockeyapp https://rink.hockeyapp.net/manage/apps/308616/app_versions/1and available on onedrive https://onedrive.live.com/redir?resid=C1BF36AA573085B6!89888&authkey=!AEPLVnEy-NrDV2U&ithint=file%2czip
Suresh M10y ago
Thank you
S.Ravi Kumar10y ago
Nice
Debasis Saha10y ago
Nice One..
Rahul Kumar Saxena10y ago
Good One
Vignesh Mani10y ago
Nice one