[Win(P)RT] Circle Timer

jun 08, 2013 3:33 pm by Julien

Dans un post récent, Renaud Dumont, nous expliquait comment créer un timer circulaire sous Windows 8 ( vous pouvez aller voir son exemple à l'adresse suivant :http://www.renauddumont.be/post/2013/04/15/Windows-8-Creer-un-timer-rond-en-XAML . Son approche est astucieuse, il applique des transformations sur un rectangle pour créer un mask sur le cercle ! Venant de Windows Phone, je me suis dit qu'il existait une méthode beaucoup plus simple, qu'il suffisait d'avoir 2 arcs de simple, 1 pour le cercle complet et 1 pour l'avancement et que ce choix permettrait entre autre d'appliquer des animations. 

Sous Windows Phone, aucun probleme, nous avons accès a un path Arc qui permet de jouer sur l'angle et donc de créer facilement le controle : 

 

Un aperçu du controle sous Windows Phone, on peut y régler la couleur du cercle, la couleur du cercle de progression, la durée, mettre en pause, annuler le timer, le reprendre, un evenement est soulevé quandl e timer a fini !

Le contrôle fait sous WP, je me lance dans la version Windows 8 est la, je remarque qu'il n'y a pas d'arc sous WinRT :| Je comprends rapidement pourquoi Renaud a donc dev son controel de cette façon! En revanche, on retrouve les ArcSegment qui est la base d'un Path Arc. j'ai donc refait rapidement un Arc ( a la rache mais qui suffira au besoin de refaire le Circle Timer sous WinRT)

Le resultat en video 

 

On retrouve les mêmes propriétes que la version WP :)

 

Et pour finir un peu de code pour l'utiliser :

Version WinRT

<jilo:CircleTimer x:Name="ct"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          ArcThickness="45"
                          CountdownVisibility="Visible"
                          DurationInMs="10000"
                          InnerRadius="0"
                          Radius="100"
                          IndeterminateCursorFill="#FF54A44C"
                          ProgressCircleFill="#FFECB931"
                          CircleFill="#7F65008B" />

Version WP

<jilo:CircleTimer x:Name="ct"
				HorizontalAlignment="Center"
				VerticalAlignment="Center"
				CountdownVisibility="Visible"
				DurationInMs="10000"
                CircleFill="Blue"
                ProgressCircleFill="Yellow"
                ArcThickness="50"
                Height="215"
                Margin="113,76,128,319"
                Width="215" />

Voilou le code est dispo sur github :https://github.com/jlopresti/CircleTimer

PS : concernant l'arc, je me suis inspiré du controle present dans le WinRT Xaml Toolkit : http://winrtxamltoolkit.codeplex.com
mais ca me convenait pas, j'ai refait rapidement un truc plus simple et moins propre  mais qui fonctionne pour le timer !

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading