Accéder aux objets et leurs propriétés

Les balises XAML sont accédées par le code JavaScript selon le DOM comme en HTML. Mais des différences existent quand aux gestionnaires d'évènements.

Les gestionnaires d'évènements

Ce sont les fonctions que l'on assigne par leur nom aux évènements prédéfinis de XAML. Par exemple à Click, on assigne clicme qui est le nom d'une fonction devant être exécutée lorsque l'évènement se produit, autrement dit lorsque l'utilisateur clique sur le bouton de la souris.
Ces gestionnaires d'évènement ont des paramètres prédéfinis:
- sender, le nom de l'objet auquel est associé l'évènement, par exemple le rectangle à l'intérieur duquel on clique sur la souris.
- args, un paramètre dont la classe dépend de l'évènement.

Accéder aux éléments internes

Pour accéder aux parties d'un objet, on utilise directement leurs noms, contrairement à ce qui se passe avec Silverlight.
Il faut donc pour cela avoir donné un nom à l'objet, cela avec l'attribut:

x:Name

Exemple:

<Window Click="clicButton">
    <Button x:Name="clicme" />
</Window>

La fonction C#:

void clicButton(object sender,  EventArgs args)
{
  object x = clicme;
}

Accéder à un élément XAML quelconque

Si l'on veut accéder à une élément XAML quelconque dans le fichier, il ne pourra pas être accédé à partir du pointeur sender.
Mais on peut créer une variable globale pour accéder aux élement d'un objet ActiveX, avec cette ligne: 

var application = document.getElementById("monControle");

La variable "application", que l'on peut nommer comme on voudra en fait, remplacera sender, ainsi l'instruction suivante est équivalente à celle qui utilise sender dans l'exemple précédent:

function uneFonction()
{
  var r = application.FindName("rect");
}

Accéder aux propriétés

On accède aux propriétés des objets en utilisant le nom de la propriété comme indice, et cela même s'il s'agit d'une propriété attachée:

<Canvas  MouseLeftButtonDown="clicRect">
    <Rectangle 
         x:Name="rect" 
         Canvas.Top="10" 
         Canvas.Left="20"
    </Rectangle>
</Canvas>

et la fonction:

function clicRect(sender, args)
{
  var r = sender.FindName("rect");
  alert("Top=" + r["Canvas.Top"]);
 }

On voit que la propriété Canvas.Top est indice de l'objet r qui pointe sur l'élément Rectangle de nom rect et la fonction alert affiche donc la position verticale du rectangle dans le Canvas.

Autre exemple avec un bouton et un bloc de texte:

<Canvas x:Name="LayoutRoot" Width="400">
  <Button x:Name="clicme" Width="128" Height="20" Canvas.Left="24" Canvas.Top="20"
           Content="Clique moi" Click="clicButton" />
  <TextBlock x:Name="disp"  Height = "20" Width = "128" 
     Background="#FF4ED2D5" Text="Rien" Canvas.Left="24" Canvas.Top="50" />
</Canvas>

On crée une fonction:

private void clicButton(object sender, EventArgs e)
{
  disp.Text =  "Merci";
  clicme.Content = "Clique encore";
}

On voit que la propriété Content est associée directement au nom du bouton "clicme", de même la propriété Text est associée au nom du block de texte "disp", ainsi la fonction clicButton peut changer ce qu'affiche le programme en assignant quelque chose à ces propriétés.

Dans l'exemple, quand on clique sur le bouton, le champ de texte qui contenait "Rien" contient maintenant "Merci", et le bouton change aussi, il affichait "Clique moi", il affiche maintenant "Clique encore".

Démonstration avec un rectangle

Le code source complet:

<Canvas  
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   MouseLeftButtonDown="clicRect"
  >      
<Rectangle
  x:Name="rect"
  Canvas.Top="10"
  Canvas.Left="20"
  Stroke="Black"
  Width="100"
  Height="30"
  Fill="LightBlue"
/>
</Canvas> 

function clicRect(sender, args)
{
  var r = sender.FindName("rect");
  alert("Top=" + r["Canvas.Top"]);
}

Les fichiers du code...