Een analoge klok maken in een Windows Store Applicatie (nl-NL)

Dit voorbeeld gebruikt xaml en C# om een analoge klok te maken in een windows store applicatie. Xaml laat u toe de hoek van lijnen weergeven op een scherm te laten variëren. Ik heb een ellips gebruikt als achtergrond van de klok. We zullen drie lijnen tekenen voor de uur, seconden en minuut wijzer op een analoge klok. Een roterende transformatie veranderd de lijn in een seconde, minuten en uur wijzer. De transformatie zal een lijn tekenen van de centrum van een cirkel in de hoek die nodig is om de tijd weer te geven. Voor seconden en minuten vermeerder je de waarde met 6 om de hoek te krijgen voor de minuten wijzer transformatie. Voor uren vermeerder met 30 om de hoek te krijgen voor de uur transformatie. Ik heb een dispatch timer gebruikt om de hoek van de wijzers aan te passen aan de huidige tijd. De dispatch timer zal een event starten elke seconde welke we vervolgens gebruiken om de hoek van de wijzer aan te passen. De klok kan verbeterd worden door gebruik te maken van een afbeelden van een klok ipv een ellips.

De XAML:

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

De C# code:

        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); 
        }