This sample uses xaml and c# to create an analog clock in a windows store application. Xaml allows you to vary the angle of lines when drawn on the screen. I used an ellipse as the background of the clock. We will draw 3 lines for the hour, seconds, and minute hand on an analog clock. A rotate transform turns a line into the second, minute and hour hand. The transform will draw the line from the center of a circle at the angle needed to represent the time. For seconds and minutes multiply the value by 6 to get the angle for the clocks hand transform. For hours multiply the hour by 30 to get the angle needed for the hour hand transform. I use a dispatch timer to update angle of the hands based on the current time. The dispatch timer will fire an event every second which we use to update the angle of the clocks hand. The clock could be improved by using a clock image instead of an ellipse.
Additional work would need to be done to be able to submit the app to the store. If ads were added you would need to give the app permission to access the internet. Any app that has access to the internet would require a privacy policy.
The Xaml
<Page x:Class="WSAnalogClock.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:WSAnalogClock" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid Width="300" Height="300"> <Ellipse Width="300" Height="300" Fill="Blue"></Ellipse> <!-- Second --> <Rectangle Margin="150,0,149,150" Name="rectangleSecond" Stroke="White" Height="120" VerticalAlignment="Bottom"> <Rectangle.RenderTransform> <RotateTransform x:Name="secondHand" CenterX="0" CenterY="120" Angle="0" /> </Rectangle.RenderTransform> </Rectangle> <!----> <!-- Minute --> <Rectangle Margin="150,49,149,151" Name="rectangleMinute" Stroke="LightGreen"> <Rectangle.RenderTransform> <RotateTransform x:Name="minuteHand" CenterX="0" CenterY="100" Angle="0" /> </Rectangle.RenderTransform> </Rectangle> <!----> <!-- Hour --> <Rectangle Margin="150,80,149,150" Name="rectangleHour" Stroke="LightYellow"> <Rectangle.RenderTransform> <RotateTransform x:Name="hourHand" CenterX="0" CenterY="70" Angle="0" /> </Rectangle.RenderTransform> </Rectangle> <!----> </Grid> </Grid> </Page>
The C# code to update the clock
using System; using System.Collections.Generic; using System.IO; using System.Linq; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Core; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238 namespace WSAnalogClock { /// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class MainPage : Page { DispatcherTimer timer = new DispatcherTimer(); public MainPage() { this.InitializeComponent(); timer.Interval = TimeSpan.FromSeconds(1); timer.Tick += timer_Tick; timer.Start(); } void timer_Tick(object sender, object e) { secondHand.Angle = DateTime.Now.Second * 6; minuteHand.Angle = DateTime.Now.Minute * 6; hourHand.Angle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute * 0.5); } /// <summary> /// Invoked when this page is about to be displayed in a Frame. /// </summary> /// <param name="e">Event data that describes how this page was reached. The Parameter /// property is typically used to configure the page.</param> protected override void OnNavigatedTo(NavigationEventArgs e) { } } }
