begin process at 2012 02 11 05:45:11
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

WPF

 > PETITE PENDULE EN XAML

PETITE PENDULE EN XAML


 Information sur la source

Note :
Aucune note
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é :11 491 / 284

Auteur : yoannd

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture Source .NET (Dotnet) PIXEL SHADER - CRÉATION, UTILISATION, ET BINDING
Source avec Zip Source avec une capture Source .NET (Dotnet) CRÉATION ET ENVOI DE FICHIERS ZIPPÉS
Source avec Zip Source avec une capture Source .NET (Dotnet) LES RÉFÉRENCES FAIBLES
Source avec Zip Source .NET (Dotnet) EXTENSION DES LISTES GÉNÉRIQUES (DESIGN PATTERN "DECORATEUR"...
Source avec Zip Source avec une capture Source .NET (Dotnet) UN PEU DE 3D AVEC XAML ET BLENDER

 Sources de la même categorie

Source avec Zip OUTIL DE VISUALISATION DE L'INDICE BOURSIER par ajkangoud
Source avec Zip Source avec une capture Source .NET (Dotnet) [WPF] RICH TEXT FORMAT par MasterShadows
Source avec Zip Source .NET (Dotnet) [WPF] GÉNÉRATEUR DE DOCUMENT XPS MULTIPAGES. par MasterShadows
Source avec Zip Source avec une capture Source .NET (Dotnet) WPF MESSAGE BOX ET WPF FOLDER SELECTOR par MasterShadows
Source avec Zip Source avec une capture Source .NET (Dotnet) EXPLORATEUR DE REGISTRE WINDOWS par thebestdrummer

 Sources en rapport avec celle ci

Source avec Zip Source .NET (Dotnet) CODE SOURCE DE L'ARTICLE "WPF : 10 BONNES RAISONS DE CHOISIR... par odahan
Source avec Zip Source avec une capture Source .NET (Dotnet) TETRIS WPF par max12
Source avec Zip Source avec une capture Source .NET (Dotnet) CUBE-IT: PETIT JEU EN WPF par Bidou
Source avec Zip Source .NET (Dotnet) CALCULETTE (OPÉRATEURS : +, -, X ET :) EN SILVERLIGHT par xXTitouffXx
Source avec Zip Source avec une capture Source .NET (Dotnet) QUELQUES EFFETS EN XAML par yoannd

Commentaires et avis

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

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

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

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

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

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 ?  

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

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

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

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.

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

XAML = framework 3

=>

Visual Studio 2008 ou Visual Studio 2005 + les extensions

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

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales