Gestion d évènement et Commandes



Documents pareils
Copyright 2009 Micro Application , rue des Petits-Hôtels Paris. 1 ère Édition - Février Auteurs - Loïc BAR, Simon BOIGELOT

Déployer une application cliente avec le Framework.NET 3.5 Client Profile

Le hub d entreprise est une application de déploiement des applications mais aussi un outil de communication

Le MSMQ. Version 1.0. Pierre-Franck Chauvet

< Atelier 1 /> Démarrer une application web

Dans cette Unité, nous allons examiner

Formation. Module WEB 4.1. Support de cours

Groupe Eyrolles, 2003, ISBN : X

Manuel d utilisation 26 juin Tâche à effectuer : écrire un algorithme 2

LES TOUT PREMIERS PAS

Le poste de travail, les dossiers et les fichiers

Contrôler un ordinateur à distance avec Google Chrome

Notions fondamentales du langage C# Version 1.0

My Poker Manager Guide Utilisateur. Guide Utilisateur

Mes premiers diaporamas avec Open Office Impress?

Déploiement d application Silverlight

FICHIERS ET DOSSIERS

Les calques supplémentaires. avec Magix Designer 10 et autres versions

WebParts. Version 1.0

Création WEB avec DreamweaverMX

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

INTERWRITE Workspace

Développement d un logiciel de messagerie instantanée avec Dotnet (version simplifiée)

Gérer ses fichiers et ses dossiers avec l'explorateur Windows. Février 2013

Composition d un ordinateur :

SEO On-page. Avez-vous mis toutes les chances de votre côté pour le référencement de votre site?

Gestion des documents avec ALFRESCO

Atelier Travailler vos photos Mars 2015

Les Aventuriers du Bout du Monde La revue des clubs Microcam

Documentation Liste des changements apportés

SOMMAIRE. Comment se connecter?

Utilisation du client de messagerie Thunderbird

COURS WINDEV NUMERO 3

Maîtrisez votre Navigateur

Procédure de sauvegarde pour AB Magique

Comment accéder à d Internet Explorer

Introduction au développement SharePoint. Version 1.0

Cette application développée en C# va récupérer un certain nombre d informations en ligne fournies par la ville de Paris :

Manuel v. 6sV Simplement surfer. Simplement cliquer. Simplement bloguer.

NOTICE TELESERVICES : Créer mon compte personnel

Comment réaliser une capture d écran dans Word. Alors comment ouvrir une page Word?

Fiche Technique. MAJ le30/03/2011

Les outils de SEO (Référencement naturel) et les Sites SharePoint Public sur Office 365

Utilisation de l éditeur.

Avertissement : Nos logiciels évoluent rendant parfois les nouvelles versions incompatibles avec les anciennes.

Utiliser Internet Explorer 7

Guide de l utilisateur Mikogo Version Windows

AIDE à l utilisation du cédérom «L athlétisme à l école» Niveau Primaire SOMMAIRE

Notice de fonctionnement DVR H Méthode de Visionnage ESEENET

Tutoriel première utilisation ICEM-CFD. Couche limite et modification du maillage en 2D

Navigation dans Windows

Manuel d utilisation de l outil collaboratif

Développer des Applications Internet Riches (RIA) avec les API d ArcGIS Server. Sébastien Boutard Thomas David

Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX

Hébergement et configuration de services WCF. Version 1.0

PREMIERE UTILISATION D IS-LOG

Form Designer Guide d utilisateur DOC-FD-UG-FR-01/01/12

The Grid 2: Manuel d utilisation

Les 1 er pas sur. Guide d utilisation

Signature plume. Matériel : une plume ou un crayon. Ouvrir PhotoFiltre. Ouvrir votre image plume dans PhotoFiltre

Automatisation d'une Facture 4. Liste Déroulante Remises Case à cocher Calculs

EXTENSION de Microsoft Dynamics CRM Réf FR 80452

Création d un service web avec NetBeans 5.5 et SJAS 9

GUIDE D UTILISATION DU BACKOFFICE

Introduction : L accès à Estra et à votre propre espace Connexion Votre espace personnel... 5

Créer des étiquettes avec les adresses d'un tableau Calc

Utilisez Toucan portable pour vos sauvegardes

F.A.Q 1.0 Designer 3D Atex System

Utiliser le site learningapps.org pour créer des activités interactives

Tutoriel. Votre site web en 30 minutes

TP1 : Initiation à Java et Eclipse

1) Installation de Dev-C++ Téléchargez le fichier devcpp4990setup.exe dans un répertoire de votre PC, puis double-cliquez dessus :

Modes Opératoires WinTrans Mai 13 ~ 1 ~

Optimiser pour les appareils mobiles

Cahier Technique. «Développer une application intranet pour la gestion des stages des étudiants» Antonin AILLET. Remi DEVES

WINDOWS 8. Windows 8 se distingue par la présence de 2 interfaces complémentaires :

Remote Desktop Connection (RDC) devient Connexion Bureau à Distance (CBD)

HTTP Commander. Table des matières. 1-Présentation de HTTP Commander

J ai peur des souris mais je me soigne Petit manuel à l attention des profs de langues vivantes désireux d affronter le Monstre Informatique

Micro-ordinateurs, informations, idées, trucs et astuces utiliser le Bureau à distance

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE

Réseau local entre Windows Xp et 7

Rafraichissement conditionné d'une page en.net

Introduction de Windows Form

Silhouette Studio Leçon N 2

Comment sélectionner des sommets, des arêtes et des faces avec Blender?

Ceci est un Chromebook, ton ordinateur!

Démarrage des solutions Yourcegid On Demand avec Citrix

Module.NET 3 Les Assemblys.NET

Chapitre 4 : Guide de Mouvement et Masque

Informatique appliqué Microsoft Windows et la suite bureautique Office. Carlier François

Rapports d activités et financiers par Internet. Manuel Utilisateur

Procédure pas à pas de découverte de l offre. Service Cloud Cloudwatt

Manuel Utilisateur Chariot odys.sante-lorraine.fr

Transcription:

Gestion d évènement et Commandes Version 1.0 Sommaire

2 Les évènements et commandes en Silverlight 17/05/09 1 Les Événements... 3 1.1 Les événements d entrées... 3 1.1.1 Gestion d évènement d entrée... 3 1.1.1.1 La souris 3 1.1.2 Gestionnaire d évènement... 13 1.1.3 Les données d événement spécialisée... 13 1.1.4 Utilisation du gestionnaire d événement... 13 1.1.5 Les évènements routés... 15 1.1.6 Les évènements routés personnalisés.... 20 1.1.7 Exemples d évènement des plus courant... 21 1.2 Evènement de non-entrée... 23 1.2.1 FrameworkElement:Loaded... 24 2 Les commandes... 25 3 Conclusion... 26

3 Les évènements et commandes en Silverlight 17/05/09 1 Les Événements Pour rendre notre programme intéressant, la gestion des évènements semble indispensable. Les évènements peuvent être définis comme un message envoyé par un Objet pour signaler une action (telle que le clic de la souris ou encore le passage à une valeur inférieure d une variable). Silverlight (ainsi que WPF) utilise une gestion propre à ces technologies pour les gérer. Nous allons voir dans ce chapitre comment traiter les événements. 1.1 Les événements d entrées Les événements d entrées sont définis comme des interactions avec l utilisateur. Ce sont généralement des clics de souris, déplacements de souris, ou encore des états de certaines touches du clavier (état haut ou état bas). Ces évènement sont faciles à traiter et permettent d améliorer l UI (l User Interface). Il faut préciser que ce n est pas Silverlight qui reçoit directement les évènements, mais bien le navigateur internet qui héberge le plug-in. Le navigateur envoie ensuite l information à l API de Silverlight (une API managée). 1.1.1 Gestion d évènement d entrée Pour gérer la gestion d évènements d entrée, Silverlight (comme le WPF) utilise le code XAML et le code-behind, en parallèle. Pour mieux comprendre, prenons l exemple d un contrôle simple, le bouton. Souvent utilisé dans les programmes, il est l un des contrôles de base. Son évènement principal est bien sur le clic sans lequel il serait inutile. Voyons comment gérer cet évènement. Voici la balise d un simple bouton prenant comme attribut la taille est le nom du contrôle. <!--Xaml--> <Button x:name="button1" Content="Button" Height="60" Width="100"/>

4 Les évènements et commandes en Silverlight 17/05/09 Pour traiter le clic sur le bouton, il nous faut utiliser l attribut suivant entre les balises. L attribut que portera la propriété Click détermine en fait le nom de l évènement qui sera ensuite géré en code-behind. <!--Xaml--> <Button x:name="button1" Content="Button" Height="60" Width="100" Click="Button1_Click"/> Une fois l attribut Click inséré dans le code XAML, il faut rajouter la fonction Button1_Click dans son code-behind de la façon suivante. Cependant, il est possible de le créer automatiquement lorsque l on va insérer la propriété Click. Tout cela est rendu possible grâce à l IntelliSense de Visual Studio qui va nous proposer de créer automatiquement un nouvel évènement qui se traduira automatiquement par le code-behind ci-dessous. Il n est donc pas obligatoire de tout rentrer à la main. Voici donc le code automatiquement créer lors de la création de l évènement. C est entre les accolades que nous allons rentrer toutes les méthodes et action qui vont être réalisées lors de l activation de l évènement. //C# namespace SilverlightApplication4 public partial class Page : UserControl public Page() InitializeComponent(); private void Button1_Click(object sender, RoutedEventArgs e)

5 Les évènements et commandes en Silverlight 17/05/09 Bien sûr, notre clic ne sert à rien ici mais avec un peu d imagination on peut rendre un bouton bien plus intéressant. //C# private void Button1_Click(object sender, RoutedEventArgs e) MessageBox.Show("Bouton Cliqué"); Ici, l ajout de la MessageBox permet de vérifier le bon fonctionnement de notre contrôle. Après compilation vous devriez vous retrouver avec une page internet semblable à celle-ci. Certes ici, le design est très limité mais nous nous intéressons plus à la partie fonctionnelle qu à l aspect visuel de notre interface. Remarque : Vous avez surement noté l auto complétion qu effectue Visual Studio. Dans celui-ci, les évènements tels que le clic sont signalés par un éclair jaune orange.

6 Les évènements et commandes en Silverlight 17/05/09 Bien sûr nous avons seulement traité un évènement simple sur un bouton mais les possibilités sont bien plus grandes avec des contrôles tels que les sliders ou les autres contrôles. Silverlight permet donc de prendre en charge un grand nombre d entrées que fournit l utilisateur. Dans ces entrées, j entends tous les évènements qui seront géré par l utilisateur (ou plutôt provoqué par l utilisateur) grâce à la souris, au clavier ou au focus. 1.1.1.1 La souris Comme en WPF le FrameWork nous fournit un panel d évènements avec la souris : MouseMove MouseEnter MouseLeave MouseLeftButtonDown / MouseLeftButtonUp Bien entendu, je ne pense pas qu il soit sorcier de savoir à quoi sert chaque évènement présenté précédemment étant donné qu il suffit juste d avoir de petite connaissance en anglais.

7 Les évènements et commandes en Silverlight 17/05/09 Cependant Silverlight ne peut pas encore prendre en compte le Click droit à cause du fait qu il soit un plugin utilisé par le navigateur. De plus, sous les interfaces Silverlight on n en aura pas la même utilité qu en WPF avec ButtonState. Ensuite, afin de gérer ces évènements, nous avons à notre disposition deux classes MouseEventArgs et MouseButtonEventArgs. La différence principale entre ces deux classes est que la seconde gère les évènements de bouton de la souris contrairement à la première. On pourrait ainsi faire un regroupement de la sorte : MouseEventArgs MouseMove MouseEnter MouseLeave MouseButtonEventArgs MouseLeftButtonDown MouseLeftButtonUp Voici ce que donne L IntelliSense quand on utilise des évènements d entrées se référant à la souris. Enfin, nous allons voir dans les deux bout de code suivant que nous avons simplement définit un évènement lorsque la souris survole le bouton pour qu elle puisse afficher un message box. C est la même chose que l exemple de l introduction, seulement nous avons modifié le type d évènement de la souris. <!--Xaml--> <Button x:name="button1" Content="Button" Height="60" Width="100" Click="Button1_Click"/> //C# private void Button1_Click(object sender, RoutedEventArgs e) MessageBox.Show("Bouton Cliqué"); Il sera possible de développer d avantage les évènements de souris en développement plus l utilisation des deux classes et en considérant les évènements vus comme des évènements routés. Ainsi que développer la capture de la souris ou même le drag and drop.

8 Les évènements et commandes en Silverlight 17/05/09 1.1.1.2 Le clavier Précédemment, nous avons vu que la souris est prise en compte par Silverlight. Cependant, il existe un autre outil tout le temps utilisé : le clavier. Et bien Silverlight prend aussi en charge les évènements générés par une action sur le clavier. On considère deux évènements qui organisent toute la gestion du clavier : KeyDown KeyUp Il existe bien entendu des évènements de clavier pour les navigateurs comme par exemple pour rafraîchir une page ou ouvrir un nouvel onglet. Et aussi pour le mode plein écran, la touche Echap permet de quitter ce mode. C est pour ça que suivant le type de focus, les évènements de clavier sont donnés en priorité à l application que l utilisateur a en cour d utilisation. Tout comme pour la souris, les évènements du clavier on recourt à KeyEventArgs. //C# private void Grid_KeyUp(object sender, KeyEventArgs e) if (e.key == Key.M) MessageBox.Show("touche appuyé"); <!--Xaml--> <UserControl x:class="claiver_projet.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" KeyUp="Grid_KeyUp"> <Grid x:name="layoutroot" Background="Aqua" > </Grid> </UserControl> <TextBlock Text="Appuyer sur la touche M"/>

9 Les évènements et commandes en Silverlight 17/05/09 Ainsi, notre programme affichera une MessageBox indiquant que la touche M a été relâché. Grace à cet exemple, on voit comment choisir quelle touche du clavier a été pressé.

10 Les évènements et commandes en Silverlight 17/05/09 1.1.1.3 Le Focus Le Focus est un concept visuel abstrait qui ne concerne que les contrôles Silverlight. Le focus peut être assimilé à un système de fenêtre, dans le sens ou les différents contrôles telle que KeyUp ne s applique que sur la fenêtre active. Ici, le focus utilise le même système : les contrôles clavier sont utilisables uniquement dans l élément qui le contient. Bien sûr, Silverlight a un comportement par défaut qui fournit un système spécifique de focus pour des programmes simples. On remarque que le focus est sur un contrôle tel que le bouton grâce à un liseré bleu clair sur celui-ci. Pour utiliser le Focus il suffit simplement de rajouter le contrôle GotFocus. <!--Xaml--> <Grid GotFocus="Grid_GotFocus"/> //C# private void Grid_GotFocus(object sender, RoutedEventArgs e)

11 Les évènements et commandes en Silverlight 17/05/09 Ici, lorsque le Grid obtiendra le contrôle, le code behind correspondant sera exécuté. Il existe le même contrôle pour la perte du Focus : LostFocus. Pour qu un contrôle reçoive le Focus, il est important qu il respecte trois conditions : IsEnabled a la valeur true. Visibility a la valeur Visible. Le focus ne doit pas être entièrement en dehors de la zone de contenu Silverlight. Enfin, le passage du focus peut se faire par la touche tabulation. Par défaut, la touche tabulation passe d un contrôle au suivant dans l ordre logique le plus direct. On peut donc décomposer cette action, en appuyant sur la touche TAB le contrôle possédant le focus perd celui-ci, déclenchent le contrôle LostFocus par la même occasion, et le Focus passe au contrôle suivant, et le code-behind correspondant au GotFocus du contrôle. Il est possible de modifier les paramètres de tabulation avec TabIndex et TabNavigation. Le type de valeur est System.int32. Sa modification demande une grande connaissant non abordée dans ce chapitre. Voici un exemple avec le focus : <!--Xaml--> <UserControl x:class="silverlightapplication8.page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:name="layoutroot" Background="White"> <Button Height="40" Width="120" Content="Sans le focus" HorizontalAlignment="Left"/> <Button Height="40" Width="120" Content="Avec le focus" HorizontalAlignment="Center" GotFocus="Button2_GotFocus"/> </Grid> </UserControl> <TextBlock />

12 Les évènements et commandes en Silverlight 17/05/09 Et le code-behind : //C# public partial class Page : UserControl public Page() InitializeComponent(); private void Button2_GotFocus(object sender, RoutedEventArgs e) MessageBox.Show("Contrôle qui a obtenu le focus"); Ici, notre exemple affichera une MessageBox quand le focus sera sur le contrôle Button2.

13 Les évènements et commandes en Silverlight 17/05/09 1.1.2 Gestionnaire d évènement Maintenant que vous avez vu la pratique, nous allons voir un peu plus en détail les différentes étapes, en commençant par le gestionnaire d évènement. Le gestionnaire d événement, c est tout simplement les classes publiques, ou avec un niveau d accès privée dans notre codebehind. Cette classe contient les différentes méthodes correspondant aux événements définis dans le XAML. Il est impératif de leur donner le même nom. Il est important de souligner que pour les nombreux évènements Silverlight, le gestionnaire d évènement Silverlight ne référence que deux paramètres dans sa signature : L object sender Les données de l évènement (EventArgs) 1.1.3 Les données d événement spécialisée Les données d évènements sont très importantes. Elles dérivent toute de EventArgs, mais doivent correspondre à l évènement. Cela est particulièrement vrai pour les évènements d entrée tels que les évènements souris ou les évènements clavier. En effet, il est important de connaitre la position au moment de l évènement de la touche. Par exemple, pour une combinaison de plusieurs touches clavier, il est important de savoir quelle touche a été actionnée car chaque touche déclenche le même KeyDown. Vous devez pour cela accéder au KeyEventArgs pour identifier la touche qui a été actionnée. (Voir donc la partie sur le clavier et la souris dans les évènements d entrées.) 1.1.4 Utilisation du gestionnaire d événement Pour utiliser le gestionnaire d évènement, deux choix s offrent à vous. Dans les deux cas, le résultat sera le même et aucune des deux méthodes n est à proscrire. Je vous laisse donc faire le choix entre la première méthode plus simple et pratique, et la seconde, plus appropriée et conventionnelle (fortement conseillée pour des programmes lourds multi programmateurs).

14 Les évènements et commandes en Silverlight 17/05/09 1.1.4.1 Première méthode Comme dit précédemment cette méthode est la plus simple et la plus pratique, Visual Studio permettant même une astuce pour son utilisation. Cette méthode est celle utilisée dans l exemple du bouton. Il s agit de créer un évènement et une méthode correspondante. <!--Xaml--> <Button x:name="button1" Content="Button" Height="60" Width="100" Click="Button1_Click"/> //C# private void Button1_Click(object sender, RoutedEventArgs e) Simple à mettre en œuvre et d utilisation, elle reste plus limitée que la seconde. De plus, Visual Studio propose une astuce d utilisation. En effet, après avoir créé votre code XAML, il est possible de faire un clic droit sur l événement et de choisir l option «Naviguer vers le gestionnaire d événements», celui-ci vous créera la méthode correspondante à votre évènement dans la classe appropriée. A noter aussi qu il vous mettra automatiquement les paramètres dans la signature (et donc les paramètres spécialisée si besoins est). Ici, on remarque que le paramètre KeyEventArgs (paramètre correspondant à KeyDown) a été ajouté par votre IDE dans le code behind.

15 Les évènements et commandes en Silverlight 17/05/09 1.1.4.2 Seconde méthode Cette méthode, plus conseillée, consiste à utiliser un évènement routé Loaded (voir la suite du cours). En effet, grâce à cette méthode on peut rajouter un gestionnaire d évènement tout en vérifiant la disponibilité de notre programme (vérifier que le chargement est terminé et que l affichage est prêt). Cette solution, plus d usage en Silverlight, est à préconiser pour la programmation à plusieurs sur un même projet. (Je conseille de revoir cette partie après avoir vu la partie FrameworkElement:Loaded) <!--Xaml--> <Rectangle x:name="rec1" Loaded="Rec1_Loaded" /> //C# void Rec1_Loaded(object sender, RoutedEventArgs e) Rectangle Rec1 = sender as Rectangle; Rec1.MouseLeftButtonDown += new MouseButtonEventHandler(OnMouseLeftButtonDown); 1.1.5 Les évènements routés Silverlight prend en charge deux types d évènement. Les évènements dit classiques qui reste similaire aux évènements.net et les éléments routés introduit par le WPF. Ces évènements routés ressemblent beaucoup à ceux classiques dans le sens où leur utilisation et leurs déclarations sont similaires. La principale différence entre la gestion de ces évènements est le chemin qu empreinte celle-ci pour être traitée. En effet, les actions générées vont parcourir l ensemble des contrôles de la fenêtre Silverlight jusqu'à ce qu il soit marqué comme traité. Pour éviter certaines confusions avec le WPF, il est important de préciser qu il existe certaines différences entre ces deux langages. Les différentes stratégies de routage sont : La stratégie «directe» qui correspond en tout point à la gestion d évènement classique. L action part du contrôle source jusqu'à être marquée comme traitée. La stratégie «Par le bas» ou Bubbling, ici l action part du contrôle d origine pour ensuite être remonté et être marqué comme traité. En WPF, il existe aussi la stratégie «par le haut» ou Tuneling qui n est pas applicable en Silverlight.

16 Les évènements et commandes en Silverlight 17/05/09 Les évènements routés sont les suivant : Nom de l évènement Code C# Description KeyDown public event KeyEventHandler Se produit lorsqu une touche KeyDown est enfoncée KeyUp public event KeyEventHandler KeyUp Se produit lorsqu une touche est relâchée GotFocus public event RoutedEventHandler GotFocus Se produit lorsque l UIElement reçoit le Focus LostFocus public event RoutedEventHandler LostFocus Se produit lorsque l UIElement perd le focus MouseLeftButtonDown MouseLeftButtonUp public event MouseButtonEventHandler MouseLeftButtonDown public event MouseButtonEventHandler MouseLeftButtonUp Se produit lorsque le bouton gauche de la souris est enfoncé Se produit lorsque le bouton gauche de la souris est relâché MouseMove BindingValidationError public event MouseEventHandler MouseMove public event EventHandler<ValidationErrorEve ntargs> BindingValidationError Se produit lorsque la position (coordonnées) de la souris changement Se produit lorsqu'une erreur de validation des données est signalée par une source de liaison J aimerai attirer votre attention sur les méthodes appelées lors du début de l évènement. En effet, bien que celle-ci ressemble beaucoup à un évènement classique, elle comporte quelques différences. En effet, celle-ci prend deux paramètres : Object RoutedEventArgs (ou un dérivé tels que MouseButtonEventArgs) Ces deux paramètres, similaires aux évènements non routés, se voient ajoutés deux propriétés : OriginalSource : qui permet de récupérer le contrôle à l origine de la source. Handled : est un booléen. Si ça valeur est positive, cela indique que l évènement à été traité et la recherche s arrêtera.

17 Les évènements et commandes en Silverlight 17/05/09 Le principe des éléments routés est que l action commence par l origine. Pour bien vous faire comprendre cette notion un peu abstraite, je vous propose un exemple qui permet de bien se représenter la chose. Pour commencer, avec notre système d affichage, j utilise une simple ListBox. <!--Xaml--> <ListBox x:name="results" Height="100" Width="400" Grid.Row="1"/> De cette sorte, j ai un affichage clair et simple pour montrer les différentes couches de l arbre graphique par lequel l action va passer. Ensuite, je vais construire l environnement de test et déclarer les différents évènements. <!--Xaml--> <Grid x:name="grid1" Height="400" Width="400" Background="Aqua" Grid.Row="0" MouseLeftButtonUp="Grid1_MouseLeftButtonUp" MouseLeftButtonDown="Grid_MouseButtonDown"> </Grid> <Grid x:name="grid2" Height="300" Width="300" Background="Blue" MouseLeftButtonUp="Grid2_MouseLeftButtonUp" MouseLeftButtonDown="Grid_MouseButtonDown"> </Grid> <Grid x:name="grid3" Height="200" Width="200" Background="Black" MouseLeftButtonUp="Grid3_MouseLeftButtonUp" MouseLeftButtonDown="Grid_MouseButtonDown"> </Grid> Ici, on remarque que Grid3 est contenu dans Grid2 lui-même contenu dans Grid1. Ainsi, on peut facilement deviner l arbre graphique de ce simple exemple. Enfin, on créé le code-behind pour que les contrôles génèrent le nom de la Grid à chaque clic de souris. Ainsi, on pourra voir sur quel grid on clique, mais aussi par où l action passe.

18 Les évènements et commandes en Silverlight 17/05/09 Voici le code XAML entier : <!--Xaml--> <UserControl x:class="silverlightapplication5.page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="500"> <Grid x:name="layoutroot" Background="White" > <Grid.RowDefinitions> <RowDefinition Height="400"/> <RowDefinition Height="100"/> </Grid.RowDefinitions> <Grid x:name="grid1" Height="400" Width="400" Background="Aqua" Grid.Row="0" MouseLeftButtonUp="Grid1_MouseLeftButtonUp" MouseLeftButtonDown="Grid_MouseButtonDown"> <Grid x:name="grid2" Height="300" Width="300" Background="Blue" MouseLeftButtonUp="Grid2_MouseLeftButtonUp" MouseLeftButtonDown="Grid_MouseButtonDown"> <Grid x:name="grid3" Height="200" Width="200" Background="Black" MouseLeftButtonUp="Grid3_MouseLeftButtonUp" MouseLeftButtonDown="Grid_MouseButtonDown"> </Grid> </Grid> </UserControl> </Grid> </Grid> <ListBox x:name="results" Height="100" Width="400" Grid.Row="1"/>

19 Les évènements et commandes en Silverlight 17/05/09 Voici ensuite le code-behind de cet exemple : //C# namespace SilverlightApplication5 public partial class Page : UserControl public Page() InitializeComponent(); private void Grid_MouseButtonDown(object sender, MouseButtonEventArgs e) Results.Items.Clear(); e.handled = true; private void Grid1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) ListBoxItem item = new ListBoxItem(); item.content = "Grid1"; Results.Items.Add(item); private void Grid2_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) ListBoxItem item = new ListBoxItem(); item.content = "Grid2"; Results.Items.Add(item); private void Grid3_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) ListBoxItem item = new ListBoxItem(); item.content = "Grid3"; Results.Items.Add(item);

20 Les évènements et commandes en Silverlight 17/05/09 Si vous compilez ce code vous obtiendrez une fenêtre similaire à celle-ci : Je vous invite maintenant à cliquer sur les différents carrés pour voir ce qui ce passe dans la ListBox. On remarque facilement les différents Grid qui, suivant leur sélection, modifie les items de la ListBox. Aussi, on observe bien que l ordre des Grid est respecté en fonction des évènements traités. 1.1.6 Les évènements routés personnalisés. Une des notions apportées avec le WPF et les évènements routés, était la possibilité de personnaliser ceux-ci. Malheureusement, à l heure actuelle, il est impossible avec Silverlight 2.0 et 3.0, de créer des évènements routés personnalisés. Les seuls évènements routés disponibles sont ceux cités précédemment dans le tableau.

21 Les évènements et commandes en Silverlight 17/05/09 1.1.7 Exemples d évènement des plus courant 1.1.7.1 Exemple de gestion de la souris Pour montrer un autre exemple de gestion de la souris, je propose cette simple application Web, qui montre l évènement MouseMove (un des plus compliqués et qui peut demander beaucoup de ressources. Il est conseillé de l utiliser raisonnablement). Ici, notre application fera bouger une ellipse en fonction des mouvements de la souris. Cet exemple sera un peu plus développé que le précédent <!--Xaml--> <UserControl x:class="silverlightapplication6.page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" MouseMove="UC_MouseMove"> <Grid x:name="layoutroot" > <Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD1F0F8"/> <GradientStop Color="#FF47C6E7" Offset="0.589"/> </LinearGradientBrush> </Grid.Background> <Grid x:name="grid1" Width="640" Height="480" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="0.5" ScaleY="0.5"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Grid.RenderTransform> <Ellipse HorizontalAlignment="Left" Margin="220,200,0,144" Width="200" Height="130" Fill="#FFFFFFFF" Stroke="#FF000000" Opacity="0.245"/> <TextBlock x:name="textblock1" Text="Dotnet-France" FontSize="20" Margin="245,255,0,144"/> </Grid> </Grid> </UserControl>

22 Les évènements et commandes en Silverlight 17/05/09 Voici le code behind : //C# using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightApplication6 public partial class Page : UserControl public Page() InitializeComponent(); private void UC_MouseMove(object sender, MouseEventArgs e) Point mouse = e.getposition(this); TransformGroup group = (TransformGroup)this.Grid1.RenderTransform; TranslateTransform translate = (TranslateTransform)group.Children[3]; translate.x = this.width /5 - (mouse.x) *0.5 ; translate.y = this.height /5 - (mouse.y) *0.5 ; Nous n expliciterons pas ici chaque ligne du code behind car cela reviendrai à faire un cours orienté sur le C#. Mais néanmoins, nous utilisons l évènement MouseMove qui bien entendu concerne le déplacement de la souris.

23 Les évènements et commandes en Silverlight 17/05/09 Ci-dessous, le rendu visuel de notre exemple

24 Les évènements et commandes en Silverlight 17/05/09 1.2 Evènement de non-entrée Nous avons vu l utilisation d évènements d entrée, c'est-à-dire une interaction avec l utilisateur. Mais il existe aussi des évènements de non-entrée, c'est-à-dire des évènements qui ne sont pas dus à l utilisateur. En général, ces évènements correspondent à des modifications d états d objet (pour exemple, un MediaElement (cf. chapitre Multimédia) à plusieurs évènements pour gérer le transport du media). Pour voir les principaux évènements je conseillerais de regarder l auto complétion ou la documentation msdn. Nous allons par contre nous intéresser à FrameworkElement:Loaded. Cet évènement de non entrée est un peu spécial. 1.2.1 FrameworkElement:Loaded Cet évènement fait partie des évènements FramworkElement, qui fournit l infrastructure d API pour les objets Silverlight. On y retrouve les évènements d entrée Key et Mouse. Il utilise donc, comme les autres éléments d entrée Silverlight, RoutedEventHandler comme délégué. Mais celui-ci ne se propage pas comme les autres évènements routés. Nom de l évènement Code C# Description FrameworkElement:Lo public event RoutedEventHandler Se produit lorsqu'un aded Loaded FrameworkElement a terminé les passes de disposition, a procédé à l'affichage et est prêt pour l'interaction. Il permet donc de vérifier l état d affichage et de permettre au programme de commencer ses différentes interactions. Il n est bien sûr pas obligatoire (il n est en effet sur aucun des exemples précédent) mais permet pour des programmes lourds de vérifier la disponibilité du programme. Il est conseillé de le rajouter dans des programmes avec animation grâce à une ligne Xaml similaire à celle-ci. <!--Xaml--> <EventTrigger RoutedEvent="FrameworkElement.Loaded">

25 Les évènements et commandes en Silverlight 17/05/09 2 Les commandes Le WPF avait introduit le concept de commandes qui permettait de créer des commandes (permettant entre autre la gestion du copier, coller, couper et supprimer).malheureusement cette notion n a pas été retenue en Silverlight 3.0. Elle sera peut-être ajouté dans des versions futures.

26 Les évènements et commandes en Silverlight 17/05/09 3 Conclusion Dans ce chapitre, nous avons vu une des bases fondamentale à toute application Silverlight. Les évènements sont en effet obligatoires dans toute application, que ce soit un lecteur vidéo (bouton play, pause ) ou encore dans d autres applications riches.