Barre de score ou de progression en XAML

La combinaison de code XAML et de gestion d'évènement pour créer un nouveau composant graphique.

Afficher une barre de score, comme celle de la Google Toolbar ou un indicateur de progression de chargement, cela suppose une interaction entre le dessin et le programme. Donc entre JavaScript et XAML.
La version la plus simple, celle de la barre verte, consisterait à dessiner un rectangle d'une taille définie au départ, mais pour disposer d'un widget d'usage plus général, on définira plutôt une barre qui puisse évoluer après affichage selon un paramètre venant de l'utilisateur.

Les étapes seront les suivantes:

  1. Affichage d'un rectangle de couleur.
  2. Entrée d'une valeur.
  3. Modification du rectangle selon la valeur donnée.

Dessin du rectangle

On le place dans un cadre, ce qui fait deux rectangles imbriqués. On a vu comment combiner des composantes à l'intérieur d'un Canvas dans le chapitre sur le bouton.
En option, on placera aussi la valeur sous forme numérique au milieu de la barre.

<Canvas>
    <Canvas 
		x:Name="Widget"
	>
        <Rectangle x:Name="border" />
        <Rectangle x:Name="bar" />
        <TextBlock x:Name="digit" Text="00" />
     </Canvas>
</Canvas>

Le script

Pour cette démo, on choisira une valeur à partir d'un formulaire et on donne cette valeur comme paramètre d'une fonction JavaScript qui change la taille de la barre. Dans l'application pratique, c'est le programme utilisateur qui déterminera la valeur fournie à la fonction JavaScript.

Initialisation de l'indicateur

On définit la taille du rectangle vert au chargement:

function barInit(sender, args)
{
	var obj = sender.findName("bar");       // la barre verte
	obj["Width"] = 0;

	var txt = sender.findName("digit");	// le texte
	txt.Text  = String(0);
}

Pour cela, on ajoute l'évènement Loaded au Canvas global:

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

Modification de l'indicateur

Un formulaire classique permet d'entre une valeur de 0 à 100. Cette valeur est interpolée à la taille maximale de la barre, qui est de 296 pixels dans l'exemple:

var value = document.enter.user.value;
value = value  * 296 / 100;

Noter que l'on ne dispose plus d'un "sender" puisque l'on accède au widget de l'extérieur, mais on retrouvera le widget à l'aide du DOM:

var barcontrol = document.getElementById("agControl1");

ou agControl1 est le nom du widget dans la page HTML.
Ensuite on accède aux éléments comme précédemment:

var txt = barcontrol.findName("digit");	
txt.Text  = String(value);

value = value  * 296 / 100;
	
var bar = barcontrol.findName("bar");
bar["Width"] = value;

La démo...

Entrer une valeur, entre 0 et 100:

 

Voir le code