Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PETITE PENDULE EN XAML


Information sur la source

Catégorie :WPF Source .NET ( DotNet ) Classé sous : xaml, rotatetransform, rendertransform, storyboard, doubleanimation Niveau : Débutant Date de création : 06/02/2007 Date de mise à jour : 04/04/2008 00:10:47 Vu / téléchargé: 7 919 / 231

Note :
Aucune note

Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note


Description

Cliquez pour voir la capture en taille normale
Je sais que les pendules peuvent être monnaie courante sur un site comme celui-ci, et que les admins doivent certainement en supprimer quelques unes de temps en temps, mais celle-ci à quelque chose de spécial.
"Elle est moche", me direz-vous. He bien oui, mais hormis celà, elle est faite en XAML, et utilise pour le déplacement des aiguilles des animations.
Concrètement, comment ça marche ?
On dessine un cercle (le fond de la pendule), et 3 traits (les aiguilles). On mets toutes les aiguilles à minuit, et on leur affecte une transformation de type rotation, d'angle 0. Ca sert strictement à rien me direz-vous. He bien SI, chers messieurs-dames ! Puisque je nomme cette rotation avec un nom spécial pour chaque aiguilles.
Par exemple, la rotation pour l'aiguille des secondes est appelée AngleSecondes.

C'est dans mon code behind que j'initialise les angles de départ des aiguilles (jai pas réussi à tout faire en XAML). Par exemple, pour l'angle de départ des seconde, cela va être System.DateTime.Now.Second * (360 / 6).
On a donc AngleSecondes.Angle = System.DateTime.Now.Second * (360 / 6) dans le code behind.

J'ai aussi des animations dans mon XAML. une par aiguille, encore une fois. Ces animations vont faire varier l'angle des secondes d'un "From" vers un "To" en un temps déterminé. Pour l'aiguille des secondes, la durée de notre animation est de 60 secondes, 3600 pour l'aiguille des heures, ect...
Le "From" de chaque animation est définit dans le code.
Par exemple, l'animation de notre aiguille des secondes s'appelle AnimSecondes.
AnimSecondes.From est égal à l'angle de départ de l'aiguille des secondes, soit AngleSecondes.
AnimSecondes.To est égal à AnimSecondes.To + 360 (Normal, on veut faire le tour de la pendule).

Il est évident que l'on ne veut pas que l'animation s'arrête à la fin, mais qu'elle reprenne au début à chaque fois... Dans le code XAML, celà se traduit par un RepeatBehavior="Forever".
 

Source

  • <Window x:Class="XamlClock.Window1"
  • xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  • xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  • Title="XamlClock" Height="300" Width="300" WindowStyle="None"
  • x:Name="Fenetre"
  • >
  • <Canvas>
  • <!-- Définition du cadran de l'horloge -->
  • <Ellipse x:Name="test" Width="280" Height="280" Canvas.Bottom="10" Canvas.Left="10" Canvas.Right="10" Canvas.Top="10">
  • <!-- La couleur du cadran -->
  • <Ellipse.Fill>
  • <SolidColorBrush Color="Red"></SolidColorBrush>
  • </Ellipse.Fill>
  • <!-- Un petit effet 3D -->
  • <Ellipse.BitmapEffect>
  • <BevelBitmapEffect LightAngle="120"></BevelBitmapEffect>
  • </Ellipse.BitmapEffect>
  • </Ellipse>
  • <!-- Définition de l'aiguille des secondes -->
  • <Line X1="150" Y1="150" X2="150" Y2="20" StrokeThickness="2" Stroke="Black">
  • <!-- On lui applique une transformation de rotation au départ, d'angle 0 (Tranformation nulle).
  • Le centre de rotation est le centre de l'horloge (ou le centre de la fenêtre.
  • La rotation de départ est donnée dans le code behind.-->
  • <Line.RenderTransform>
  • <RotateTransform
  • Angle="0" CenterX="150" CenterY="150" x:Name="AngleSecondes" />
  • </Line.RenderTransform>
  • </Line>
  • <!-- Définition de l'aiguille des minutes -->
  • <Line X1="150" Y1="150" X2="150" Y2="75" StrokeThickness="2" Stroke="Black">
  • <Line.RenderTransform>
  • <RotateTransform Angle="0" CenterX="150" CenterY="150" x:Name="AngleMinutes" />
  • </Line.RenderTransform>
  • </Line>
  • <!-- Définition de l'aiguille des heures -->
  • <Line X1="150" Y1="150" X2="150" Y2="100" StrokeThickness="2" Stroke="Black">
  • <Line.RenderTransform>
  • <RotateTransform Angle="0" CenterX="150" CenterY="150" x:Name="AngleHeures" />
  • </Line.RenderTransform>
  • </Line>
  • </Canvas>
  • <!-- Définition d'un trigger sur la fenêtre. Celui-ci intervient lors du "Loaded" (quand
  • la fenêtre est chargée. -->
  • <Window.Triggers>
  • <EventTrigger RoutedEvent="Window.Loaded">
  • <BeginStoryboard>
  • <Storyboard>
  • <!-- Définition des principales propriétés des animations.
  • On a ici 3 animations, une par aiguille. -->
  • <DoubleAnimation
  • Duration="0:1:0"
  • Storyboard.TargetName="AngleSecondes"
  • Storyboard.TargetProperty="Angle"
  • RepeatBehavior="Forever"
  • x:Name="AnimSecondes"></DoubleAnimation>
  • <DoubleAnimation
  • Duration="1:0:0"
  • Storyboard.TargetName="AngleMinutes"
  • Storyboard.TargetProperty="Angle"
  • RepeatBehavior="Forever"
  • x:Name="AnimMinutes"></DoubleAnimation>
  • <DoubleAnimation
  • Duration="43200"
  • Storyboard.TargetName="AngleHeures"
  • Storyboard.TargetProperty="Angle"
  • RepeatBehavior="Forever"
  • x:Name="AnimHeures"></DoubleAnimation>
  • </Storyboard>
  • </BeginStoryboard>
  • </EventTrigger>
  • </Window.Triggers>
  • </Window>
  • ... Et le code behind ...
  • using System;
  • using System.Collections.Generic;
  • using System.Text;
  • using System.Windows;
  • using System.Windows.Controls;
  • using System.Windows.Data;
  • using System.Windows.Documents;
  • using System.Windows.Input;
  • using System.Windows.Media;
  • using System.Windows.Media.Imaging;
  • using System.Windows.Shapes;
  • namespace XamlClock
  • {
  • /// <summary>
  • /// Interaction logic for Window1.xaml
  • /// </summary>
  • public partial class Window1 : System.Windows.Window
  • {
  • /// <summary>
  • /// Constructeur de la classe...
  • /// </summary>
  • public Window1()
  • {
  • InitializeComponent();
  • // Un peu de maths ?
  • // On initialise ici l'angle de départ de chaque aiguille.
  • AngleSecondes.Angle = 6 * System.DateTime.Now.Second;
  • AngleMinutes.Angle = (360 * ((System.DateTime.Now.Minute * 60) + System.DateTime.Now.Second)) / 3600;
  • AngleHeures.Angle = (360 * ((System.DateTime.Now.Hour > 12 ? System.DateTime.Now.Hour - 12 : System.DateTime.Now.Hour) * 3600)) / 43200;
  • // L'animation va donc partir de l'angle actuel...
  • AnimSecondes.From = AngleSecondes.Angle;
  • AnimMinutes.From = AngleMinutes.Angle;
  • AnimHeures.From = AngleHeures.Angle;
  • // ...et l'angle final est l'angle de départ + 360 degrés. Normal, on veut faire le tour de la pendule.
  • AnimSecondes.To = AnimSecondes.From + 360;
  • AnimMinutes.To = AnimMinutes.From + 360;
  • AnimHeures.To = AnimHeures.From + 360;
  • // Un petit écouteur pour récupérer la touche escape du clavier et quitter le programme.
  • this.KeyUp += new KeyEventHandler(Window1_KeyUp);
  • }
  • /// <summary>
  • /// Permet de récupérer les évènements du clavier survenant sur le formulaire principal.
  • /// </summary>
  • void Window1_KeyUp(object sender, KeyEventArgs e)
  • {
  • // Si on appuie sur "Echap", on ferme la fenêtre.
  • if(e.Key == Key.Escape)
  • this.Close();
  • }
  • }
  • }
<Window x:Class="XamlClock.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="XamlClock" Height="300" Width="300" WindowStyle="None"
	x:Name="Fenetre"
    >
	<Canvas>
		<!-- Définition du cadran de l'horloge -->
		<Ellipse x:Name="test" Width="280" Height="280" Canvas.Bottom="10" Canvas.Left="10" Canvas.Right="10" Canvas.Top="10">
			<!-- La couleur du cadran -->
			<Ellipse.Fill>
				<SolidColorBrush Color="Red"></SolidColorBrush>
			</Ellipse.Fill>
			<!-- Un petit effet 3D -->
			<Ellipse.BitmapEffect>
				<BevelBitmapEffect LightAngle="120"></BevelBitmapEffect>
			</Ellipse.BitmapEffect>
		</Ellipse>
		<!-- Définition de l'aiguille des secondes -->
		<Line X1="150" Y1="150" X2="150" Y2="20" StrokeThickness="2" Stroke="Black">
			<!-- On lui applique une transformation de rotation au départ, d'angle 0 (Tranformation nulle).
			Le centre de rotation est le centre de l'horloge (ou le centre de la fenêtre.
			La rotation de départ est donnée dans le code behind.-->
			<Line.RenderTransform>
				<RotateTransform
					Angle="0" CenterX="150"  CenterY="150" x:Name="AngleSecondes" />
			</Line.RenderTransform>
		</Line>
		<!-- Définition de l'aiguille des minutes -->
		<Line X1="150" Y1="150" X2="150" Y2="75" StrokeThickness="2" Stroke="Black">
			<Line.RenderTransform>
				<RotateTransform Angle="0" CenterX="150"  CenterY="150" x:Name="AngleMinutes" />
			</Line.RenderTransform>
		</Line>
		<!-- Définition de l'aiguille des heures -->
		<Line X1="150" Y1="150" X2="150" Y2="100" StrokeThickness="2" Stroke="Black">
			<Line.RenderTransform>
				<RotateTransform Angle="0" CenterX="150"  CenterY="150" x:Name="AngleHeures" />
			</Line.RenderTransform>
		</Line>
	</Canvas>
	<!-- Définition d'un trigger sur la fenêtre. Celui-ci intervient lors du "Loaded" (quand
	la fenêtre est chargée. -->
	<Window.Triggers>
		<EventTrigger RoutedEvent="Window.Loaded">
			<BeginStoryboard>
				<Storyboard>
					<!-- Définition des principales propriétés des animations.
					On a ici 3 animations, une par aiguille. -->
					<DoubleAnimation
					  Duration="0:1:0"
					  Storyboard.TargetName="AngleSecondes"
					Storyboard.TargetProperty="Angle"
					RepeatBehavior="Forever"
					x:Name="AnimSecondes"></DoubleAnimation>
					<DoubleAnimation
					  Duration="1:0:0"
					  Storyboard.TargetName="AngleMinutes"
					Storyboard.TargetProperty="Angle"
					RepeatBehavior="Forever"
					x:Name="AnimMinutes"></DoubleAnimation>
					<DoubleAnimation
					  Duration="43200"
					  Storyboard.TargetName="AngleHeures"
					Storyboard.TargetProperty="Angle"
					RepeatBehavior="Forever"
					x:Name="AnimHeures"></DoubleAnimation>
				</Storyboard>
			</BeginStoryboard>
		</EventTrigger>
	</Window.Triggers>
</Window>


... Et le code behind ...

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;


namespace XamlClock
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>

    public partial class Window1 : System.Windows.Window
    {
        /// <summary>
        /// Constructeur de la classe...
        /// </summary>
        public Window1()
        {
            InitializeComponent();

            // Un peu de maths ?
            // On initialise ici l'angle de départ de chaque aiguille.
            AngleSecondes.Angle = 6 * System.DateTime.Now.Second;
            AngleMinutes.Angle = (360 * ((System.DateTime.Now.Minute * 60) + System.DateTime.Now.Second)) / 3600;
            AngleHeures.Angle = (360 * ((System.DateTime.Now.Hour > 12 ? System.DateTime.Now.Hour - 12 : System.DateTime.Now.Hour) * 3600)) / 43200;
            
            // L'animation va donc partir de l'angle actuel...
            AnimSecondes.From = AngleSecondes.Angle;
            AnimMinutes.From = AngleMinutes.Angle;
            AnimHeures.From = AngleHeures.Angle;

            // ...et l'angle final est l'angle de départ + 360 degrés. Normal, on veut faire le tour de la pendule.
            AnimSecondes.To = AnimSecondes.From + 360;
            AnimMinutes.To = AnimMinutes.From + 360;
            AnimHeures.To = AnimHeures.From + 360;

            // Un petit écouteur pour récupérer la touche escape du clavier et quitter le programme.
            this.KeyUp += new KeyEventHandler(Window1_KeyUp);
        }

        /// <summary>
        /// Permet de récupérer les évènements du clavier survenant sur le formulaire principal.
        /// </summary>
        void Window1_KeyUp(object sender, KeyEventArgs e)
        {
            // Si on appuie sur "Echap", on ferme la fenêtre.
            if(e.Key == Key.Escape)
                this.Close();
        }

    }
}

Conclusion

Voila, j'espère que cette petite source vous aura donné envie de gratter un peu de XAML et vous aura montré comment utiliser les animations.

Ma question aujourd'hui concerne tout de même la fiabilité de ce code. J'initialise mes angles de départ, et ensuite je laisse l'animation gérer les rotations toutes seules. Que se passe-t-il si le PC rame un coup ? Est-ce que mes aiguilles sont en retard sur l'horaire normale ? Faut-il remettre les pendules à l'heure de temps en temps ?
J'en sais rien, mais je pense que ça doit être quand même pas trop mal géré. Faudra faire des tests, pour voir...
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de yoannd le 06/02/2007 00:27:38

Haaaa la la... A quand un site code-sources xamlfr.com ? Avec une coloration syntaxique adaptée ;)

signaler à un administrateur
Commentaire de Lutinore le 06/02/2007 10:50:03 administrateur CS

.. et avec des admins qui comprennent quelque chose à wpf ^^

signaler à un administrateur
Commentaire de sebmafate le 06/02/2007 14:27:30 administrateur CS

c'est clair que Lutinore est plus C++ que WPF :p

signaler à un administrateur
Commentaire de mathmax le 06/02/2007 17:59:28

Je trouve ça super ! J'essaie de modifier un peu le code XAML pour comprendre un peu comment ça marche... :-) J'aimerais par exemple ajouter les numéros sur le pourtour de l'horloge. Avec les propriétés Canvas.Top et Canvas.Left c'est un peu embêtant et pas très précis. N'y a t'il pas moyen de positionner un objet XAML avec des coordonnées polaires ?  

signaler à un administrateur
Commentaire de MorpionMx le 06/02/2007 21:46:47 administrateur CS

On comptera pas sur Brunews pour nous expliquer en tout cas ... :D

signaler à un administrateur
Commentaire de yoannd le 06/02/2007 21:49:36

Je pense qu'on peut faire l'ajout de numéros assez simplement en les mettant au centre de l'écran, et en faisant quelques manips de rotation translation...

signaler à un administrateur
Commentaire de Gorio le 17/01/2008 10:57:42

Bonjour,

je suis sous .NET 2005. Pour ouvrir ton appli il faut .NET 2008 ?
Je n'y arrive pas avec .NET 2005. Faut-il installer le Framework 3.0 et le WPF ??

Merci.

signaler à un administrateur
Commentaire de Bidou le 17/01/2008 11:45:04 administrateur CS

XAML = framework 3

=>

Visual Studio 2008 ou Visual Studio 2005 + les extensions

signaler à un administrateur
Commentaire de Gorio le 18/01/2008 12:09:11

Oki merci bien BIDOU ! je vais tester cela.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

XAML Parser [ par Lutinore ] Salut, pour le moment je ne comprends pas grand chose au XAML, je voudrais m'affranchir de Visual Studio et surtout de MSBuild, c&#224;d je voudrais p XAML avec VS2005 RTM [ par jesusonline ] Bonsoir, J'ai r&#233;cemment vu des d&#233;mos de XAML (coucou Patrice :-)), puisque je n'ai plus de beta sur mon PC ;-) je cherche donc &#224; instal Tuto Xaml [ par Yxion ] Salut,Je viens de télécharger le .net 3 et tous ce qui va avec, ca marche bien... sauf moi. Je cherche donc si y a quelque chose pour aider moi, un tu xaml c# et canvas [ par matmat86 ] Bonjour,je viens de créer un canvas (sousVS 2005 avec le framework 3.0 pour précision) et je lui fournis du texteà l'intérieur. En revanche lorsque le OpenFileDialog xaml [ par matmat86 ] Bonjour,je développe une application web en c#/xaml et je n'ai pas accès à l'objet OpenFileDialog (car je n'ai pas accès à Windows.Forms) donc je voul Rotation d'image sans Graphics.RotateTransform [ par nico4nicolas ] Bonjour,Dans le but de faire une application plus étendue, je souhaite faire une rotation d'image sans utiliser Graphics.RotateTransform qui fait pour Class parent dans une frame (class Page) [ par gomoz ] (Mon titre n'est pas très clair, ne vous y fiez pas.)Je voudrais initialiser un délégate depuis une mon XAML parent. Mon XAML parent (simplifié) conti Vidéo en XAML / C# [ par CrazyJoe1 ] Bonjour à tous,Je suis en train de concevoir un programme avec une interface XAML qui doit affichier une liste de vidéo issue d'un fichier RSS (celui [XAML] --> Les styles et images [ par yoannd ] Bonjour,Je souhaite définir un style pour un menu item, et dans mon style, je souhaite définir l'icône de mon menu item.J'ai essayé plein de trucs, do Ajouter une image dans une Grid - XAML / C# [ par jim462 ] Bonjour,Je cherche comment ajouter une image dans une Grid.Par contre, je ne la veux pas dans le code XAML, mais dans le code C# (la raison, l'image s


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


LG KP501

Entre 9€ et 159€


Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,234 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.