Interaction avec les objets XAML

Dans le premier chapitre, nous avons ajouté une ligne pour insérer un fichier contenant du code JavaScript dans la page. Ce fichier va maintenant nous servir.
Le but de ce chapitre est de montrer comment l'utilisateur peut interagir avec la page et comment les actions telles qu'un clic de souris peuvent être reconnues et associées à des programmes agissant sur la page.

Comment on ajoute une action

On donne le nom de gestionnaire d'évènement à un programme qui répond à une action de l'utilisateur. XAML permet de prendre en compte ces évènements, et chaque type d'action de l'utilisateur dispose d'un nom correspondant dans le langage.
Voici comment on traite les évènement:

  1. Dans une code XAML, on ajoute une ligne de la forme:
    nomEvènement = "javaScript:nomfonction"
  2. Dans le fichier JavaScript, on ajoute une fonction correspondante:
    function nomfonction()
    {
    ...
    }

Principaux évènements reconnus

MouseLeftButtonDown: Quand on clique sur le bouton gauche de la souris.
MouseLeftButtonUp: Quand on le relâche.
MouseEnter: La souris entre dans sur la surface de l'objet.
MouseLeave: Elle en sort.
MouseMove: Elle se déplace sur la surface.
Loaded: Lorsque la page est chargée.

Exemple de code: afficher Salut

Dans cet exemple simplissime, le fait de cliquer sur la page affichera une message "Salut!".
On démarre avec un rectangle auquel on ajoute l'évènement MouseLeftButtonDown:

<Canvas etc.
<Rectangle
 Height="100"
 Width="100"
 Fill="Yellow" 
 MouseLeftButtonDown="javascript:hello" 
/>
</Canvas>
Le code JavaScript qui affiche le message: 
function hello()
{
  alert("Salut!");
}

Cliquez sur le rectangle jaune:

Exemple de code: le cercle changeant de couleur

Les fonctions JavaScript d'évènement peuvent recevoir deux argument: sender, l'objet dans lequel se produit l'évènement, et args, une liste de paramètres passés à la fonction.
Ainsi ou peut utiliser les attributs de l'objet en les associant à sender qui se substitue à l'objet à l'intérieur de la fonction JavaScript.
Dans cet exemple, nous allons dessiner une ellipse et lorsque l'utilisateur cliquera à l'intérieur de cette image, sa couleur passera du jaune au bleu.
Pour se faire nous associerons l'attribut Fill à sender et nous lui assignerons la nouvelle couleur.

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Ellipse  
      Height="100" Width="100" 
      Stroke="Black" 
      Strokethickness="10" 
      Fill="Yellow"
      MouseLeftButtonDown="javascript:mouseclic"
/>

</Canvas>

Et le code JavaScript

function mouseclic(sender, args)
{
   sender.Fill="LightBlue";
}

En fait le cercle devrait rester bleu, pour qu'il redevienne jaune, une commande supplémentaire a été ajoutée:

 MouseLeftButtonDown="javascript:mouseclic"
 MouseLeftButtonDown="javascript:mouseup"

Avec une autre fonction JavaScript: 

function mouseup(sender, args)
{
   sender.Fill="Yellow";
}

Voir les fichiers