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>
        <!--for Second -->
        <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>
        <!-- for Minute -->
        <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>
        <!-- for Hour -->
        <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:

• Implementing Adaptive Layout In UWP App
• Compile/Build The UWP Project From The Command Line