Une variable permet de stocker des données. Voici comment déclarer une variable au sein d'une classe, et dans ce cas, la variable est un champ d'objet (en C#, on différencie champ de propriété) :

class Program
{
   int monEntier = 13;
}

Vous remarquez que le type est toujours précisé en premier, dans notre cas int signifie entier. Il vous faut, cependant, faire la différence entre la déclaration et l'affectation. Ce sont deux étapes distinctes et l'affectation peut être réalisée plus tard. Nous aurions tout aussi bien pu écrire :

class Program
{
   int monEntier;
   monEntier = 13;
}

Il arrivera souvent de déclarer une variable sans pour autant l'affecter. Par exemple, dans un jeu, la variable score ne sera pas affectée dès son initialisation mais durant l'exécution du programme. Lorsqu'une variable de type entier est déclarée sans être affectée, sa valeur par défaut est 0. Ce comportement est dû au fait que le type int est un type primitif numérique.

Il est nécessaire de typer les variables, d'une part par obligation due au langage, et d'autre part parce que cela permet d'améliorer les performances de vos applications. Le choix du type est très important dans ce contexte, car c'est lui qui déterminera l'occupation mémoire allouée par défaut pour stocker la valeur. Parmi tous les types existants, on trouve les types primitifs. Ceux-ci acceptent des valeurs simples. Ils sont à la base de tous développements, sans eux aucune conception ne verrait le jour. Ci-dessous quelques types primitifs importants.

• sbyte : il contiendra une valeur entière comprise entre -128 et 127. Son nom vient du fait que la valeur pourra être négative (s pour signed) et que le nombre de possibilités correspond à un octet soit 2⁸ (256 chiffres). Il ne faudra pas confondre Byte, en anglais, et bit, qui signifie 0 ou 1.
• byte : ce type peut accepter un entier entre 0 et 255.
• uint : il accepte un entier entre 0 et 2³², soit 4 294 967 295 possibilités. Le u de uint signifie que la valeur sera toujours non signée (u pour unsigned), donc toujours positive.
• int : il représente le même nombre de possibilités mais contient la moitié des chiffres en dessous de 0. Soit entre -2 147 483 648 et 2 147 483 647.
• decimal : il contient des valeurs à virgule. La plage des valeurs admises se situe entre 10^-28 et 7.9x10²⁸.
• double : ce type contient également des valeurs à virgule. Comme pour decimal le stockage des données est assez complexe, mais le nombre de valeurs acceptées est beaucoup plus grand : entre 5x10^-324 et 1.7x10³⁰⁸.
• bool : il est le digne représentant de la logique de Mr George Boole. Ce mathématicien britannique est à l'origine d'une révolution des mathématiques et de la philosophie au XIX^e siècle. On en trouve aujourd'hui de nombreuses utilisations dans l'industrie ou dans le secteur informatique. Ce type ne peut contenir que deux valeurs : vrai ou faux (true ou false) ; le bit de donnée repose sur cette logique.
• string : il représente une chaîne de caractères. La valeur est toujours spécifiée entre guillemets. La chaîne de caractères contenue peut-être infinie, la mémoire utilisée sera allouée au fur et à mesure des besoins. Toutefois le type string n'est pas comme les autres types simples (voir la section Le tas et la pile Le tas et la pile dans ce chapitre).

Stocker des valeurs simples ne suffit pas. Bien souvent, vous aurez besoin d'une variable ayant la capacité de contenir plusieurs données. Voici les types complexes :

• Les énumérations notées enum. Elles vous permettent de stocker un choix de valeurs arbitrairement. Si l'on reprend l'exemple de la voiture, nous pourrions par exemple proposer une énumération pour le type de carburant au lieu d'une chaîne de caractères. Nous pourrions écrire ceci :

   

  Sélectionnez

  class Program{
     Voiture MaDeLorean = new Voiture() { TypeCarburant = 
          Carburant.Detritus, Marque = ";DeLorean”, Modele = ";volante” };
  }
  enum Carburant{
     Diesel,
     Essence,
     propane,
     Detritus,
     Ethanol
  }
  class Voiture{
     public string Marque;
     public string Modele;
     public Carburant TypeCarburant;
  }

• Vous remarquez que l'énumération est en dehors de la classe, elle se suffit à elle-même. Elle pourrait également en faire partie. Au sein de la classe Voiture, nous déclarons un nouveau champ public de type Carburant. Le mot-clé public est un modificateur d'accès, nous verrons les modificateurs d'accès plus loin dans ce chapitre. L'affectation se produit au niveau de la classe Program, à l'instanciation d'une nouvelle voiture grâce à cette ligne :

   

  Sélectionnez

  Voiture MaDeloreane = new Voiture() { TypeCarburant = 
     Carburant.Detritus, Marque = ";DeLorean”, Modele = ";celle qui vole” 
  };

• Il faut savoir qu'une valeur d'énumération possède toujours un type sous-jacent. Par défaut ce type est int mais vous pourriez le changer.

• Les structures notées struct. Il s'agit de l'équivalent d'une classe, mais elle est gérée différemment en mémoire. Il faut envisager une structure comme une définition d'objets. Dans la majorité des cas, ce seront des objets simples. Par exemple, un point géographique est défini grâce à deux coordonnées : la latitude et la longitude, toutes deux exprimées en degrés. Nous pourrions ainsi définir la position de notre voiture grâce à une structure qui s'appellerait PositionGPS :

   

  Sélectionnez

  class Program{
     //ceci est une écriture pratique 
     //pour créer un nouvel exemplaire de voiture
     Voiture MaDeloreane = new Voiture(){
        TypeCarburant = Carburant.Detritus,
        Marque = "DeLorean",
        Modele = "volante",
        MyPlace = new PositionGPS() { DegreLat=180, DegreLong=176 }
     };
  }
  struct PositionGPS{
     public int DegreLat;
     public int DegreLong;
  }
  class Voiture{
     public string Marque;
     public string Modele;
     public Carburant TypeCarburant;
     public PositionGPS MyPlace;
  }

• Les tableaux notés Array et []. Ce sont des objets différents de ceux que nous venons de citer en cela qu'ils sont faits pour stocker de multiples données sous forme d'éléments indexés numériquement à partir de 0. Il faudra toujours préciser le type des objets stockés. Pour initialiser un tableau, il existe deux méthodes. La première consiste à utiliser le mot-clé new et à indiquer le nombre d'éléments qu'il pourra contenir. Dans d'autres langages comme Java ou Action-Script 3, ce type correspond à la classe Vector (vecteur). Voici un exemple d'instanciation :

   

  Sélectionnez

  Voiture[] MesVoitures = new Voiture[3];

• Par la suite, on affecte une voiture à chaque index numérique du tableau comme ceci :

   

  Sélectionnez

  MesVoitures[0] = MaDeLorean;
  MesVoitures[1] = MaPorsche;
  MesVoitures[2] = MaSuper5;

• Voici la seconde méthode appelée "écriture littérale" :

Voiture[] MesVoitures = { MaDeloreane, MaPorsche, MaSuper5 };

Il nous suffit maintenant d'accéder aux voitures du tableau. Pour cela, nous pouvons utiliser une boucle qui nous permettra de tracer le nom de chaque voiture dans une console Windows. La boucle foreach est la mieux adaptée à ce type de situation. Voici comment l'utiliser :

void TraceMesVoitures(){
   //Pour chaque élément de type Voiture dans le tableau MesVoitures
   foreach(Voiture V in MesVoitures){
      //cette ligne permet d'afficher le résultat dans une Console
      Console.WriteLine("j'ai une {0}", V.Marque);
   }
   //celle-ci permet de figer l'affichage de la console pour la lecture
   Console.ReadLine();
}

Concrètement, la boucle parcourt le tableau MesVoitures, récupère un exemplaire de Voiture à chaque index et trace une phrase en fenêtre de sortie. Cette boucle s'arrête d'elle-même lorsque le tableau est entièrement parcouru. Les tableaux possèdent la propriété length qui permet de connaître le nombre d'éléments contenus en leur sein. L'objet List, en C#, est plus souvent utilisé que l'objet tableau (Array) en raison des nombreuses capacités qu'il offre. Un tableau possède une longueur (ou nombre d'éléments) fixe. La classe List possède pour sa part des méthodes lui permettant d'ajouter ou de supprimer des éléments sans avoir besoin d'initialiser la longueur. Vous la trouverez dans l'espace de noms System.Collections.-Generic.

Vous avez sans doute remarqué le mot-clé public présent devant la déclaration de certains membres de classe. C'est un modificateur d'accès. Ces derniers permettent de rendre accessibles ou non des champs, des propriétés et des méthodes de classe. Le mot-clé public permet de rendre un membre de classe accessible depuis l'extérieur de la classe. C'est cela qui nous a permis d'instancier des voitures tout en initialisant leurs champs "Public" depuis l'extérieur. Voici un cas concret :

class Program{
   //ceci est une écriture pratique 
   //pour créer un nouvel exemplaire de voiture
   Voiture maDeLorean = new Voiture();
   maDeLorean.marque = "DeLorean";
}
class Voiture{
   public string marque;
   Guid numeroSerie = new Guid();
}

La propriété numeroSerie n'est définie avec aucun modificateur d'accès. En fait, lorsque rien n'est précisé, c'est le modificateur private qui est utilisé à la compilation pour un membre de classe. Pour une classe ce sera le mot-clé internal. Un champ de classe, défini avec private, n'est pas accessible en dehors de la classe, mais seulement en son sein. La meilleure pratique consiste toujours à laisser le moins de champs ou de méthodes visibles depuis l'extérieur. Votre classe doit toujours être fermée à la modification et toujours ouverte à l'extension. Seules les propriétés et méthodes utiles doivent être accessibles à celui qui instancie ou utilise votre classe. Dans le cas précédent, il est logique que le numéro de série reste privé et ne soit pas accessible au quidam de base. Le type Guid est en fait une valeur unique, car le nombre de possibilités est quasi illimité. De plus, on affecte la valeur lors de l'instanciation de la classe Voiture. Voici la liste des modificateurs d'accès utilisables :

• public : permet l'accès depuis n'importe quel endroit du code ;
• private: définit un membre de classe accessible uniquement depuis la classe contenant ce membre ;
• internal : autorise l'accès à toutes les classes de l'espace de noms dans lequel est la classe et aux espaces de noms amis ;
• protected : permet l'accès au code situé au sein de la classe ou dans une de ses sous-classes.

Il vous arrivera souvent dans un langage orienté objet de transformer le type d'une valeur en un autre type. Catégoriser des objets est une démarche qui permet d'optimiser les performances des applications. Toutefois catégoriser est une démarche rigide, même dans la vie courante. Il est toujours dangereux et rarement vrai à long terme qu'un objet soit d'un seul type. La classification des espèces, bien que nécessaire d'un point de vue scientifique, est remise en question à chaque fois qu'une espèce sortant du cadre est découverte. L'ornithorynque est le cas le plus flagrant qui démontre que classifier des espèces est hasardeux. Celui-ci pond des œufs, allaite ses petits, possède un bec de canard, s'appuie sur des pattes aux cinq orteils palmés. Bref, il regroupe de nombreux aspects que l'on croyait uniques au mammifères, aux reptiles et aux ovipares. Il ne rentre dans aucune catégorie simple et présente certains aspects de plusieurs d'entre elles (depuis la théorie de Darwin, la classification des espèces a évolué, il s'agit bien ici d'un exemple mettant en évidence la dangerosité de cette manière de raisonner). Pour cette raison et de nombreuses autres, il vous arrivera donc souvent, si vous commencez la POO, d'utiliser un type à la place d'un autre ; d'avoir un jour besoin d'un entier à la place d'un décimal ou de transformer un booléen en chiffre. Pour transformer un type en un autre type, vous utiliserez une opération de conversion implicite ou explicite appelée transtypage ou casting en anglais.

La conversion implicite est réalisée par le compilateur sans que vous ayez besoin de lui indiquer un mot-clé. Pour que le compilateur puisse réussir cette opération, il suffit juste que le type de destination accepte la valeur que l'on souhaite définir avec ce type. Par exemple, il est facile de transformer un type byte en type uint, car un byte est toujours positif et la plage de valeurs possibles est contenue dans la plage de valeurs possibles de uint :

int MonEntier;
byte MonByte = 113;
MonEntier=MonByte; 
// Dans ce cas, le type de b sera converti en int à la compilation, 
// ce qui est faisable, puis a recevra la valeur de b.

Il est donc très facile de déduire les conversions implicites pour les types primitifs numériques. Le deuxième type de transtypage est un peu plus délicat à manier, car il vous faudra préciser vous-mêmes la conversion souhaitée. Nous allons reprendre le même exemple, mais en affectant la valeur de type byte à un entier noté int :

byte MonByte2;
int MonEntier2 = 113;
MonByte2 = (byte)MonEntier2;
Console.WriteLine(";type de MonByte2 :: "; + MonByte2.GetType());

Dans ce cas, vous devrez mettre le type de destination entre parenthèses devant la valeur à convertir. Tout type possède une méthode GetType renvoyant le type. Si jamais vous oubliez de convertir explicitement, Visual Studio vous surligne la valeur affectée - dans notre cas, cela serait mon-Entier2. Lorsque vous passez la souris au-dessus du surlignage, Visual Studio vous indique que vous avez peut-être oublié une conversion et vous précise qu'une conversion explicite existe. Cela n'est pas toujours le cas.

Que se passe-t-il si jamais une valeur numérique sort de la plage de valeur admise par le type de destination ? Par exemple, que se passerait-il si monEntier3 était égal à 312 ? Le résultat correspond à la valeur à convertir, modulo (%) la longueur de la plage des valeurs du type de destination. Modulo est un opérateur mathématique qui permet de calculer le reste d'une division entière. Dans notre exemple "312 modulo 256" nous renverra 56. 312 divisé par 256 est égal à 256 divisé par 256 (qui est nombre entier) plus 56 divisé par 256. 56 est bien le reste de la division. Ce sera donc la valeur affectée à notre variable de type byte :

int MonEntier3 = 312;
byte MonByte3 = (byte)MonEntier3;
Console.WriteLine(";type de MonByte3 :: "; + MonByte3.GetType() + "; - 
                    valeur :: "; + MonByte3);

Un autre moyen de convertir explicitement une valeur est d'utiliser la classe Convert. Celle-ci possède des méthodes de conversion. Nous pourrions par exemple écrire :

byte MonByte4;
int MonEntier4 = 312;
MonByte4 = Convert.ToByte(MonEntier4);
Console.WriteLine(";type de MonByte4 :: "; + MonByte4.GetType());

L'avantage de cette méthode est qu'elle génère par défaut une erreur à l'exécution si jamais la valeur à convertir ne correspond pas à la plage du type de destination. Dans l'exemple précédent, nous aurons donc une erreur levée.

Jusqu'à maintenant nous n'avons utilisé que des champs de classe. Une propriété est un membre de classe stockant une valeur au même titre qu'un champ de classe. Cependant l'avantage d'une propriété est qu'elle permet l'ajout de logique lorsqu'elle est mise à jour ou lue. Définir une propriété est simple avec Visual Studio, il suffit de taper prop, suivi de deux tabulations pour générer automatiquement le code :

public string modele { get; set; }

Ceci est la nouvelle écriture écourtée des propriétés depuis C# 3. Vous remarquez le mot-clé get qui signifie obtenir et le mot-clé set qui signifie établir. Ces termes représentent deux méthodes qui vont nous permettre de contrôler les accès à notre propriété. En règle générale, une propriété est toujours accompagnée d'un champ privé, donc non accessible, qui est mis à jour par ces deux méthodes. Nous allons maintenant ajouter un champ privé et un peu de logique dans notre propriété :

class Program
{
   static void Main(string[] args)
   {
      Voiture maVoiture = new Voiture();
      Console.WriteLine(";modele de la voiture :: "; + maVoiture.modele);
      Console.ReadLine();

   }
}

class Voiture{
// ceci est le champ privé modele de type chaîne de caractères
   private string _modele;
   public string Modele 
   { 
      get{ // on met la logique concernant la lecture de la propriété
           //si le modèle est défini alors je renvoie le nom du modèle
         if ( _modele.Length > 0) return _modele;
         else return "N.C."; //si non je renvoie Non Communiqué
      } 
      set{  // on met la logique concernant l'écriture de la propriété
            // si la valeur que l'on essaie d'établir n'est pas nulle
           // alors on affecte la nouvelle valeur du modèle
         if (value.Length > 0) _modele = value;
      }
   }
}

Par défaut, une propriété générée par Visual Studio est publique. Si vous souhaitez créer une propriété uniquement accessible en lecture, il suffit de supprimer la méthode set. Vous pouvez également préciser un modificateur d'accès devant le mot-clé set, ce qui est plus élégant et avantageux. Le modificateur d'accès internal permettra par exemple d'accepter l'écriture de cette propriété uniquement aux objets contenus dans l'espace de nom ; protected permettra quant à lui de laisser l'accès en écriture aux classes héritant de Voiture.

On répartit les types en deux grandes catégories : les références attribuées sur le tas et les valeurs attribuées sur la pile. Concrètement, il s'agit de deux manières différentes de stocker des données. La pile représente l'espace mémoire alloué pour les valeurs, alors que le tas représente l'espace mémoire gérant les références. La gestion de ces espaces mémoire est très différente. L'allocation mémoire est figée dans le cas de la pile mais peut être variable sur le tas. Vous pouvez considérer les références comme des variables qui pointent vers une adresse mémoire, l'affectation sera contenue à cette adresse. Le Tableau 2.1 vous présente ces types.

Vous remarquez que le type string est géré sur le tas. Chaque modification d'une chaîne de caractères entraîne une allocation mémoire et donc des accès coûteux en terme de performances. Il faudra utiliser la classe StringBuilder qui permet d'alléger les accès mémoire.

Différencier une référence d'une valeur est assez simple. Il faut se rappeler qu'une référence est une variable qui pointe à une adresse mémoire. Commençons par définir une valeur de type structure allouée sur la pile :

struct PositionGPS{
   public int DegreLat;
   public int DegreLong;
}
PositionGPS Gpa = new PositionGPS { DegreLat = 141, DegreLong = 76 };
PositionGPS Gpb = Gpa;
Gpa.DegreLat = 35;
Console.WriteLine(Gpb.DegreLat);

La console affiche 141, la structure gpb ne change pas, car nous avons procédé à une simple recopie de valeurs. Les deux variables ciblent un espace mémoire différent. Elles sont donc autonomes. Examinons le même code en remplaçant les structures par des classes personnalisées. Celles-ci sont sont attribuées sur le tas :

class Point{
   public int X;
   public int Y;
}
Point P1 = new Point(){ X = 141, Y = 76 };
Point P2 = P1;
P1.X = 35;
Console.WriteLine(P2.X);

Cette fois, la console affiche 35, la valeur du champ X de P2 a changé, car l'instance P2 pointe vers la même allocation mémoire que P1. On procède à une recopie de pointeur dans le cas d'une affectation de variables de type référence. P2 et P1 ciblent le même espace mémoire.

Un nouveau mot-clé est apparu avec C# 3 : var. Ce mot-clé vous évitera de préciser le type d'une variable lors de sa déclaration. Cela signifie que le type d'une variable déclarée avec var n'est fixé qu'au moment de l'affectation de la variable. Cette capacité est très pratique si vous ne connaissez pas à l'avance la valeur d'affectation. Toutefois le mot-clé var n'est pas utilisable pour déclarer des membres de classes, il sert essentiellement à définir des variables locales aux méthodes.

Les types anonymes ont un peu le même rôle que les structures. Comme pour celles-ci, l'objectif majeur est de créer un objet ne contenant que des propriétés (bien que les structures puissent faire mieux). C'est une reprise directe de ce que vous trouverez dans les langages dynamiques fonctionnels. Ces types anonymes ne peuvent être définis et affectés qu'au sein d'une méthode, grâce au mot-clé var. Il s'agit donc de variables locales. Voici comment créer une classe anonyme :

var MaVoitureAnonyme = new { Modele="307", Marque="Peugeot", 
                    Prix=8950, Annee=2004 };

En réalité, le typage fort est présent, mais une classe anonyme, ainsi que les champs qui la composent, sont créés dynamiquement.

Une méthode est une fonction appartenant à une classe. Son premier objectif est de centraliser la mise en œuvre d'une série d'instructions. Celle-ci sera exécutable à l'infini par simple appel du nom de la méthode, suivi de deux parenthèses (ouverte et fermée). Quels que soient les langages, les fonctions ou méthodes permettent la réutilisation du code. En langage C#, les fonctions globales qui n'appartiennent à aucune classe n'existent pas. C'est un abus de langage de dire qu'une méthode statique de classe (donc appartenant et exécutable par la classe) est une fonction globale. A contrario de C#, les fonctions sont considérées comme des objets dans les langages dits fonctionnels. Dans ces langages, dont JavaScript fait partie, une fonction peut exister par elle-même (car elle est considérée comme un objet). Ce n'est pas le cas en C#. Deux types de méthodes existent, les méthodes exécutables par la classe et les méthodes invoquées par les exemplaires ou instances de classe. Il faut tout d'abord définir une méthode pour l'invoquer par la suite. Voici une définition et un appel de la méthode rouler, propre aux exemplaires de la classe Voiture :

class Voiture{
   public void Rouler(){
      Console.WriteLine("La voiture roule 100 km");
   }
}
class Program{
   static void Main(string[] args){
      //On invoque la méthode rouler sur l'instance de Voiture MaDeLorean
      MaDeLorean.Rouler();
      Console.ReadLine();
      //la console tracera le message définit au-dessus
   }
}

Comme vous pouvez le constater, le nom de la méthode est d'abord précédé du mot-clé public (voir "Les modificateurs d'accès"), puis du mot-clé void qui fait référence au type muet. Cela signifie que la méthode ne retourne aucune valeur. Dans le cas d'une méthode renvoyant une valeur, il suffit de préciser le type à la place de void. On pourrait déduire que Rouler modifie la position de la voiture et renvoie du dioxyde de carbone en même temps. Voici le même exemple mis à jour :

public class Voiture{
   public int Rouler(){
      Console.WriteLine("La voiture roule 100 km ")
      return 125;
   }
}
class Program{
   static void Main(string[] args){
      Voiture MaDeLorean = new Voiture(){
         TypeCarburant = Carburant.Detritus,
         Marque = ";De Loreane”, Modele = ";volante”,
         MyPlace = new PositionGPS() { DegreLat = 180, DegreLong = 176 }
      };
      //On invoque la méthode rouler sur l'instance MaDeLorean 
      Console.WriteLine(";Elle rejette :: "; + MaDeLorean.Rouler() + 
                           "; g CO2 / Km”);
      Console.ReadLine();
      //la console tracera le message défini dans la méthode,
      //puis le message défini dans la méthode Main
    }
}

Comme nous l'avons déjà dit, la méthode Main de la classe Program est une méthode d'initialisation, c'est le point d'entrée de notre application console, c'est-à-dire que celle-ci sera exécutée dès le lancement de l'application par la CLR. C'est pour cela que sa définition commence par le mot-clé static. Les méthodes static présentent de nombreux avantages. Nous pourrions par exemple créer une méthode de ce type pour la classe Voiture, qui renverrait le nombre de voitures en circulation.

Nous allons maintenant améliorer la méthode rouler en lui définissant un paramètre. Comme nous l'avons vu au début de ce chapitre, une méthode doit faciliter la réutilisation(1). Toutefois, on constate que notre méthode rouler ne permet à une voiture de rouler que 100 km. Il serait utile de pouvoir choisir le nombre de kilomètres à chaque appel de cette méthode. Pour cela, il nous faut ajouter un paramètre dans la définition de cette méthode :

class Voiture
{
   public string Marque;
   public string Modele;
   public Carburant TypeCarburant;
   public PositionGPS MyPlace;
   public int Rouler( int nombreKilometre)
   {
      Console.WriteLine(";La voiture roule” + nombreKilometre + ";km”);
      return 125;
   }
}

Puis, nous invoquons celle-ci en lui passant le nombre de kilomètres attendus :

static void Main(string[] args)
{
   //On invoque la méthode rouler sur l'instance maDeLorean 
   Console.WriteLine("Elle émet :: " + MaDeLorean.Rouler(113) + 
                         " g CO2 / km");
   Console.ReadLine();
   //la console tracera le message défini dans la méthode en 
   //prenant en compte le nombre de kilomètres parcourus 
}

Dans certains cas, vous aurez besoin de passer un nombre variable de paramètres. C# propose pour cela une signature de fonction spécifique. Il vous faudra utiliser le mot-clé params entre les parenthèses en précisant le type des paramètres reçus. Le terme params représente le tableau des paramètres qui ont été passés lors de l'appel de la méthode. Si vous ne souhaitez pas préciser de type, il suffit de préciser object. Toutes les classes en C# héritent de object, ainsi vous pourrez spécifier n'importe quel type de paramètre. Dans l'exemple suivant, nous calculons le prix moyen d'une voiture :

static void Main(string[] args){
   Voiture MaDeLorean = new Voiture(){
      Prix=150000,
      TypeCarburant = Carburant.Detritus,
      Marque = "De Loreane",
      Modele = "volante",
      MyPlace = new PositionGPS() { DegreLat = 180, DegreLong = 176 }
   };
   Voiture MaPorsche = new Voiture() { Marque = "Porsche", 
            Modele = "Carrera 4", TypeCarburant = Carburant.Essence, 
            Prix=18500 };
   Voiture MaSuper5 = new Voiture() { Marque = "Renault", 
            Modele = "Super5", TypeCarburant = Carburant.Diesel, 
            Prix=1300 };
   //on trace directement le retour de la méthode CalculPrixMoyen
   Console.WriteLine(";prix moyen des voitures :: {0}”, CalculPrixMoyen 
  (MaDeLorean, MaPorsche, MaSuper5) );
}
//on utilise le tableau de paramètre et on précise un type de retour
//car cette fonction renvoie la moyenne calculée
private static decimal CalculPrixMoyen( params Voiture[] mesVoitures){
   decimal Total = 0;
   foreach (Voiture v in mesVoitures){
      Total += v.Prix;
   }    
   return Total / mesVoitures.Length;
}

Les variables que vous définissez au sein d'une méthode ne sont accessibles qu'à l'intérieur de celle-ci. Ce sont des variables locales à la méthode. À la fin de l'exécution et dans le cas de variables de type valeur, celles-ci libèrent la mémoire qui leur est allouée. Ces variables ne sont donc pas accessibles depuis l'extérieur. La variable locale total de l'exemple précédent est donc inaccessible dans la méthode main. Cependant, vous pouvez très bien décider d'affecter une propriété ou un champ de classe. Ils peuvent être atteint depuis n'importe quel endroit au sein de cette classe mis à part au sein de membres ou propriétés statiques.

Comme nous l'avons dit à plusieurs reprises, C# s'oriente vers les langages dynamiques. Les méthodes d'extension sont un nouveau pas dans cette direction. Celles-ci permettent d'ajouter de manière propre et efficace des méthodes à n'importe quel type. Une méthode d'extension doit toujours être static et public et appartenir à une classe static. Tout se passe au niveau de la signature de la méthode dont voici un exemple simple :

static class MyExensionsMethods {
   public static bool IsBiggerThan (this int myInt, int compare)
   { 
      return myInt > compare; 
   }
}

Vous remarquez que le premier paramètre commence par le mot-clé this. Cela signifie qu'il fait référence à la variable de type entier qui va faire appel à la méthode. Le second paramètre est le premier paramètre de la méthode IsBiggerThan lorsque celle-ci sera appelée. Voici comment se déroule l'appel :

int monEntier = 37;
bool myBoolean = monEntier.IsBiggerThan( 13 );

Un des grands axes de la programmation orientée objet des années 80 à 90 est la capacité des classes à hériter d'autres classes. Dans l'application d'exemple, peut-être souhaitez-vous louer des voitures de type Utilitaire. Dans ce cas, il n'est pas nécessaire d'écrire une classe Utilitaire en reprenant chaque champ de la classe Voiture. Nous pouvons simplement considérer que la nouvelle classe Utilitaire héritera de la classe Voiture. Dans ce dernier cas, nous n'aurons qu'à le préciser au moment de sa définition comme ceci :

class Utilitaire : Voiture{
   public int Volume;
   public void Charger(){
      Console.WriteLine("on charge l'utilitaire");
      Console.ReadLine();
   }
   public void Decharger(){
      Console.WriteLine("on décharge l'utilitaire");
      Console.ReadLine();
   }
}

Le grand avantage réside dans le fait que nous n'avons pas à recoder une nouvelle classe entièrement. De ce point de vue, l'héritage en POO est une technique de développement qui permet la réutilisation. La sous-classe de Voiture (Utilitaire) bénéficie de tous les comportements et propriétés d'une voiture normale en plus des siennes. Voici comment créer une instance de la classe Utilitaire :

//une classe héritée de Voiture
Utilitaire MonKangoo = new Utilitaire() { Marque = "Renault", 
Longueur = 1.2, Modele = "Super5", TypeCarburant = "diesel", Volume=6 };

La problématique n'est cependant pas si simple, car imaginez un véhicule de type 4x4. Nous pourrions l'envisager comme un utilitaire ou un véhicule familial. Doit-il hériter dans ce cas de la classe Voiture ou de la classe Utilitaire ? Il n'y a malheureusement aucune bonne réponse à cette question en utilisant l'héritage, car il est impossible d'hériter de plusieurs classes en C#. Nous avons donc là un problème de conception important : n'oubliez pas qu'une fois la décision prise, vous ne pourrez plus revenir en arrière facilement. Votre développement subira à long terme les décisions que vous aurez pris trop tôt face à la nécessité de commencer le développement. Bien que de nombreuses techniques permettent de concevoir un code souple à la modification, la programmation objet tente de classifier les fonctionnalités par type, ce qui ne correspond pas toujours à une réalité. Les langages dynamiques permettent la prise de décisions tardives, mais aussi de rectifier simplement des choix de conception. Plus vous décidez tard, meilleure est votre appréciation de la situation et des besoins. Nous verrons que C# s'oriente dans cette direction depuis sa version 3.

Comme nous l'avons vu, toutes les classes de C# héritent de la classe object. Celle-ci possède une méthode ToString qui permet d'avoir une représentation, sous forme de chaîne de caractères, de l'instance sur laquelle elle est invoquée. Les classes C# ont pour la plupart une implémentation différente de cette méthode. Les classes personnalisées dont Voiture fait partie, implémentent par défaut la méthode ToString propre à object. Utilisons cette méthode sur notre classe Voiture et voyons le résultat :

Console.WriteLine( MaDeLorean.ToString());
//renvoie ParcAuto.Voiture

Comme vous le constatez, la méthode retourne par défaut l'espace de noms et le type Voiture. Il peut être utile d'avoir un retour personnalisé pour la classe Voiture. Nous allons donc redéfinir notre propre méthode ToString, il suffit d'utiliser le mot-clé override :

public override string ToString(){
   return "modèle :: " + Modele + " - marque :: " + Marque;
}

Ce mot-clé permet d'outrepasser la méthode héritée de la classe de base. Ainsi, vous pouvez redéfinir cette méthode à votre convenance. Il est encore possible d'invoquer la méthode originelle de cette manière :

return "classe :: " + base.ToString()+" - modèle :: " 
            + Modele + " - marque :: " + Marque;

Le terme base fait référence à la classe dont on hérite, dans notre cas c'est object.

Une interface est constituée des signatures de méthodes, de délégués et d'événements (voir Chapitre 7 Interactivité et modèle événementiel). Elle représente un contrat abstrait d'implémentation. Une classe implémentant une interface doit nécessairement contenir les mêmes signatures de méthodes, délégués et événements mais avec une définition concrète de ceux-ci (à l'exception des classes abstraites). Les interfaces (et les classes abstraites) permettent d'assouplir le développement et rendent le code plus facile à maintenir et évolutif. L'utilisation d'interfaces se révèle au final moins dangereux et plus facile à gérer que l'héritage. Pour implémenter une ou plusieurs interfaces, il faudra ajouter un caractère : après le nom de la classe, suivi du nom des interfaces. Si la classe est héritée d'une autre classe, il faudra suivre cet ordre :

class MaClasse : ClasseDeBase, interface1, interface2,…, interfaceN
class Voiture : Vehicule, IUtilitaire, IFamilial

Par convention, on préfixe les noms d'interface de I, ce qui donne plus de lisibilité.

Nous n'entrerons pas plus dans les détails de C# au sein de ce chapitre, car, comme vous l'avez constaté, C# est un langage performant dont l'apprentissage nécessiterait un livre à part entière. Maintenant que vous êtes familiarisé avec cet environnement, vous allez créer votre première application Silverlight grâce aux outils proposés au sein de la gamme Expression.

Dans le prochain chapitre, vous utiliserez Expression Blend et aborderez les bases de la mise en forme XAML, ainsi que l'architecture des projets Silverlight.

Les classes partielles sont nées avec l'apparition de .Net 2. Elles avaient déjà pour but de séparer le fond et la forme au sein de fichiers distincts. Pour cela, le développeur pouvait glisser/déposer n'importe quel composant .Net au sein d'une fenêtre représentant l'interface visuelle. Le code logique était bien séparé du code décrivant l'interface visuelle mais ce dernier n'héritait pas du XML (contrairement à XAML). Lorsque le développeur compilait son application, celle-ci était donc générée à partir de deux fichiers. Ce mécanisme, permis grâce aux classes partielles, est exactement le même que celui utilisé aujourd'hui par Silverlight. Toutefois ce concept est bien plus efficace et pertinent avec cette technologie. Comme nous l'avons dit lors du précédent chapitre, une classe est un modèle d'objet. Une classe partielle est donc une partie d'un modèle d'objet contenue, la plupart du temps, dans un fichier séparé. Examinons le code XAML de notre projet HelloWorld :

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="HelloWorld.MainPage"
    Width="Auto" Height="Auto" mc:Ignorable="d">…
</UserControl>

Vous remarquez que le UserControl principal contient la propriété x:Class qui a pour valeur HelloWorld.MainPage. Cela signifie que ce nœud est une définition de la classe MainPage héritant de la classe UserControl, et que cette définition est contenue dans l'espace de noms HelloWorld. Tout ce qui est déclaré dans le fichier XAML est donc un nouveau membre de cette classe. Le fichier MainPage.xaml.cs permet d'ajouter du code logique à l'application et aux objets déclarés dans MainPage.xaml. C'est lui qui permet les interactions utilisateur et la création d'algorithmes complexes. Voici un extrait de ce texte :

namespace HelloWorld
{
   public partial class MainPage : UserControl
   {
      public MainPage()
      {
         // Required to initialize variables
         InitializeComponent();
      }
   }
}

Cette classe se nomme MainPage. Elle hérite, elle aussi, de la classe UserPage et elle est contenue dans l'espace de nom HelloWorld. Vous remarquez l'utilisation du mot-clé partial. Ce mot signifie que la classe est partielle. Il s'agit donc de la même classe au sein de deux fichiers séparés. Chacun a pour but de définir une partie de celle-ci et non la totalité. C'est une approche très performante car XAML est bien plus pratique pour gérer l'arbre visuel et logique ainsi que les animations. C# sera, quant à lui, beaucoup plus performant pour développer l'aspect fonctionnel et les interactions complexes. Nous allons maintenant étudier les mécanismes du compilateur permettant de gérer deux langages aussi différents que C# et XAML.

La compilation d'un projet Silverlight s'effectue toujours en deux étapes. La première consiste à transformer les langages de haut niveau gérés par la CLR comme C#, VB, XAML ou les langages gérées par la DLR, comme IronPython en langage intermédiaire. Quel que soit le langage d'origine, le langage intermédiaire résultant de la compilation est le même pour tous les langages gérés par .NET. La compilation est réalisée par le compilateur propre au langage dans lequel vous développez. Ce langage intermédiaire est contenu dans la dll qui est encapsulée au sein du fichier xap. Dans notre cas, elle se nomme "HelloWorld.dll" que nous avons évoquée plus haut. La deuxième étape est une compilation effectuée lors de la lecture du fichier xap par le plug-in Silverlight. L'implémentation du lecteur Silverlight diffère selon les systèmes d'exploitation et le navigateur utilisé. Cette compilation est donc à chaque fois différente mais l'objectif est le même : transformer le langage intermédiaire en langage machine. C'est le Just In Time Compiler qui gère cette étape. Son but est de compiler au dernier moment en langage machine afin d'obtenir les meilleures performances possibles selon le système. Comme il est différent et spécialisé selon les systèmes et les navigateurs, il produit du code machine plus adapté qu'un compilateur générique (voir Figure 3.16).

Dans le prochain chapitre, nous plongerons dans l'interface d'Expression Blend pour créer un site Silverlight très simple et gérer le redimensionnement des éléments visuels.

Vous allez commencer par les menus les plus simples : ceux du pied de page. Ils sont contenus dans un StackPanel. Ce type de conteneur permet d'empiler verticalement ou horizontalement un ensemble d'objets. Dans notre cas, il s'agira de champs texte de type TextBlock. Tout contrôle visuel est cliquable au sein des projets Silverlight ou WPF. Le TextBlock n'échappe pas à cette règle, il peut donc jouer le rôle de liens ou de boutons. Commencez par créer un composant StackPanel. Dans la barre d'outils de Blend, cliquez en laissant appuyer sur l'icône représentant le composant Grid. Une série d'icônes apparaît. Sélectionnez l'icône représentant le StackPanel (voir Figure 4.3).

L'icône StackPanel remplace l'icône Grid au 1^er niveau, double-cliquez dessus. StackPanel est automatiquement placé en haut à gauche de la grille principale LayoutRoot. Il possède des dimensions de 100 pixels de hauteur comme de largeur. Vous allez définir une largeur et une hauteur en mode Auto, pour cela cliquez sur l'icône à droite de la propriété Width et Height. Le StackPanel n'a plus de largeur ni de hauteur, il s'est adapté à son contenu. Comme il n'en a pas encore, il possède des dimensions en largeur et hauteur égales à zéro pixel. Ce comportement est lié au fait qu'il est aligné en haut à gauche et qu'il n'est pas en mode Stretch (étirement).

Cliquez sur l'icône correspondant à un alignement horizontal à droite dans les options d'alignement (), puis définissez une marge à droite de 30 pixels. Spécifiez ensuite un alignement vertical vers le bas ainsi qu'une marge de 10 pixels par rapport à la bordure basse de la grille LayoutRoot. Ne spécifiez aucune marge à gauche (entrez la valeur  0). Pour finir, vérifiez bien qu'Orientation est en mode Horizontal. Ce mode indique la direction d'empilement des éléments contenus.

Lorsque vous avez double-cliqué sur l'icône du StackPanel, vous l'avez directement imbriqué dans la grille LayoutRoot. Ce n'est pas un hasard. Vous avez pu réaliser cette opération, car cette grille était sélectionnée comme contexte conteneur.

Le contexte conteneur est toujours entouré d'un liseré bleu ou jaune. Cela signifie que toutes les actions du graphiste, la création de composants, leur sélection ou encore leur modification, seront réalisées dans le conteneur sélectionné comme contexte actif. Pour créer une série de menus à l'intérieur du StackPanel, il vous faut donc cliquer sur celui-ci dans la vue de design pour le définir en tant que contexte actif. Ensuite, vous pouvez double-cliquer sur l'icône TextBlock dans la barre d'outils. Lors de chaque double-clic, vous imbriquez une nouvelle occurrence de TextBlock au sein du StackPanel. Répétez cette opération trois fois. Une fois les trois champs texte créés, définissez des marges à droite de 20 pixels pour les deux premiers. Vous pouvez sélectionner les deux éléments et spécifier leurs marges en même temps dans le panneau des propriétés. Ensuite, changez la valeur contenue dans la propriété Text, qui est accessible via le panneau des propriétés ou directement par double-clic sur le composant TextBlock dans la fenêtre de design (voir Figure 4.4). Vous pouvez également choisir une police afin d'affiner le visuel. Je vous conseille la police Trebuchet MS dans un premier temps car cela évite d'avoir à l'embarquer puisqu'elle est intégrée par défaut à Silverlight.

Vous remarquez que le StackPanel s'agrandit vers la gauche automatiquement à chaque nouvel élément visuel ajouté en son sein.

Comme la navigation de notre site repose essentiellement sur le menu du haut, nous allons imbriquer des boutons au sein d'un conteneur. Afin de gérer les redimensionnements extrêmes de notre site, nous allons utiliser un composant WrapPanel. Celui-ci est proche du StackPanel dans son principe, c'est-à-dire qu'il empile les éléments les uns après les autres. Toutefois, il met à la ligne un élément visuel si jamais celui-ci tend à dépasser le bord droit ou le bord bas du conteneur selon son orientation (voir Figure 4.5).

Couplé au mode de redimensionnement Auto, propre aux propriétés largeur et hauteur, nous pourrions ajuster les dimensions dynamiquement à chaque remise à la ligne. Par exemple, si nous définissons la hauteur (Height) du WrapPanel sur Auto et son orientation à horizontale et un alignement vertical haut (éviter le mode Stretch dans ce cas, ainsi que les marges), alors le WrapPanel s'ajustera en hauteur pour chaque nouvelle ligne d'éléments visuels. Vous pouvez voir l'exemple précédent mis à jour en utilisant le mode Auto (voir Figure 4.6).

Comme vous pouvez le constater, sur le premier schéma de la Figure 4.6, les rectangles (22, 23, 24) ne sont plus coupés, la hauteur est réajustée en fonction du nombre de lignes. Sur le second schéma, il ne reste plus aucun espace à droite de l'élément 18 car la largeur du WrapPanel s'ajuste au contenu.

Pour créer un conteneur de ce type, vous devez utiliser la bibliothèque de composants, car il ne se trouve pas dans la liste des conteneurs proposés par défaut. Cliquez sur la dernière icône de la barre d'outils, celle ressemblant à une double flèche (). Elle vous permet d'ouvrir la bibliothèque de composants. Sélectionnez le mode d'affichage avec grandes icônes pour identifier les contrôles disponibles (voir Figure.4.7).

Le champ de recherche sert de filtre, entrez-y les lettres wr. Le contrôle de type Wrap-Panel n'est pas visible dans la liste. C'est en fait très logique, il n'est pas instanciable par défaut au sein des projets Silverlight. Pour y remédier, il vous suffit de télécharger et d'installer la bibliothèque nommée Silverlight Toolkit. Elle est maintenue par l'équipe Silverlight de Microsoft et regroupe de nombreux avantages dont certains contrôles qui ne sont, par défaut, accessibles qu'au sein des projets WPF. Afin d'assurer un maximum de fonctionnalités au sein de Silverlight, ces composants ont été redéveloppés et mis à disposition dans le Silverlight ToolKit. Vous le trouverez à l'adresse : http://www.codeplex.com/Silverlight/. Cliquez sur le menu Download (voir Figure 4.8).

Une fois la bibliothèque installée, sauvegardez votre projet et relancez Blend. Cette fois-ci, le composant WrapPanel est affiché. Cela prend parfois quelques secondes car Blend doit explorer les nouvelles bibliothèques de contrôles installées. Sélectionnez le contrôle WrapPanel, son icône apparaît juste en dessous de celle permettant l'accès à la bibliothèque. Double-cliquez dessus, une instance de type WrapPanel est automatiquement créée au sein du contexte conteneur sélectionné. Dans notre cas, cela doit être LayoutRoot.

Nous allons l'ancrer sur les bordures droite, gauche et haute de la grille principale. Pour cela, vous allez définir une largeur et une hauteur en mode Auto, comme nous avons fait pour le menu du bas avec le composant StackPanel. Ensuite, cliquez sur l'icône d'alignement vers le haut et spécifiez une marge de 10 pixels par rapport au bord haut. Cliquez sur l'icône étirement horizontal pour activer ce mode. Définissez des marges à 30 pixels pour la bordure gauche et à 90 pixels pour la bordure droite. Cliquez sur l'icône à droite des propriétés Width et Height. Le WrapPanel n'a plus de hauteur. Il s'est adapté à son contenu qui est vide. Il possède donc une hauteur égale à 0 pixel. Au contraire, comme nous avons défini des marges à gauche et à droite ainsi qu'un alignement horizontal étiré, il possède une largeur égale à la largeur totale de l'application moins les marges (voir Figures 4.9 et 4.10).

Comme vous pouvez le voir, le WrapPanel est ancré en haut, à gauche et à droite. Les icônes représentant un verrouillage indiquent l'ancrage des objets ou non sur les bords du conteneur Grid principal. Elles sont accompagnées de nombres indiquant la valeur en pixel de chaque marge. Elles sont cliquables et permettent de modifier les options d'alignement horizontal et vertical.

Vous allez maintenant ajouter des boutons correspondant à chacun des menus de la Figure 4.2. Sélectionnez le WrapPanel, puis double-cliquez cinq fois sur l'icône représentant un bouton au sein de la barre d'outils. Vous venez à l'instant d'imbriquer cinq boutons dans le conteneur WrapPanel. Vous auriez pu les dessiner directement au sein de ce conteneur. Cette manière de faire présente l'avantage d'éviter de préciser, pour chaque bouton, les dimensions en hauteur et largeur. Avec cette méthode, celles-ci ont été définies en mode Auto pour chacun d'eux. Les valeurs des propriétés Width et Height s'ajustent en fonction de leur contenu textuel, qui est par défaut la chaîne de caractères Button. Dès cet instant, le WrapPanel possède une hauteur qui s'ajuste à chaque bouton. Si vous définissez une police différente ou une taille différente, le bouton réajustera sa hauteur qui réajustera celle du WrapPanel. Si vous avez défini des marges verticales sur l'un des boutons, celles-ci affecteront directement la hauteur finale du WrapPanel.

Sélectionnez chaque bouton en maintenant la touche Maj enfoncée. Ensuite, au sein du panneau des propriétés, dans l'onglet des propriétés communes, spécifiez la police Trebuchet MS, ainsi qu'une hauteur de caractères de 14 pixels.

Désélectionnez tous les boutons en cliquant n'importe où sur la scène, puis cliquez sur le premier bouton et entrez la chaîne de caractères Nouveautés dans la propriété Content. Procédez de même avec tous les autres afin d'avoir un menu correspondant à la Figure 4.2. Ensuite, créez un dernier bouton à l'extérieur du WrapPanel au sein du conteneur Layout-Root. Il doit être ancré en haut à droite et posséder des marges de 10 pixels en haut et de 8 à droite. Dans sa propriété Content, insérez la chaîne de caractères Plein écran. Ce bouton ne fait pas partie directement du WrapPanel car il ne donne pas accès au même niveau d'utilisation. Il nous permettra de passer alternativement du mode plein écran au mode d'affichage normal. Vous devriez maintenant avoir un visuel similaire à la Figure 4.11.

Pour finir, sélectionnez le UserControl racine et définissez une largeur et une hauteur en mode Auto, cela vous permettra de profiter du navigateur à 100 %. Étirez ensuite la vue de design avec les manipulateurs pour simuler une largeur de 640 pixels et une hauteur de 320 pixels. Voici le code XAML généré en arrière-plan par Blend, pour la totalité de la grille principale :

<Grid x:Name="LayoutRoot" Background="#FFFFFFFF" Margin="0,0,0,0" >
   <controlsToolkit:WrapPanel Height="Auto" HorizontalAlignment="Stretch" 
        VerticalAlignment="Top" Width="Auto" Margin="30,10,90,0" 
        d:LayoutOverrides="Width">
      <Button Height="Auto" Width="Auto" Content="Nouveautés" 
        Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" 
        Visibility="Visible"/>
      <Button Height="Auto" Width="Auto" Content="Portfolio" 
        Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" 
        Visibility="Visible"/>
      <Button Height="Auto" Width="Auto" Content="Médias" 
        Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" 
        Visibility="Visible"/>
      <Button Height="Auto" Width="Auto" Content="Savoir faire" 
        VerticalAlignment="Center" Margin="0,0,20,0" FontSize="14"     
        FontFamily="Trebuchet MS" Visibility="Visible"/>
      <Button Height="Auto" Width="Auto" Content="Contact" 
        Margin="0,0,0,0" FontSize="14" FontFamily="Trebuchet MS" 
        Visibility="Visible"/>
   </controlsToolkit:WrapPanel>
   <StackPanel Height="Auto" HorizontalAlignment="Right" Margin="0,0,30,8" 
        VerticalAlignment="Bottom" Orientation="Horizontal">
      <TextBlock Text="A propos " TextWrapping="Wrap" Margin="0,0,30,0" 
            FontFamily="Trebuchet MS" Foreground="#FF6C6C6C" 
            FontWeight="Bold" FontSize="12" 
        TextDecorations="Underline"/>
      <TextBlock Text="Qui sommes nous ? " TextWrapping="Wrap" 
            Margin="0,0,30,0" FontFamily="Trebuchet MS" 
            Foreground="#FF6C6C6C" FontWeight="Bold" FontSize="12"/>
      <TextBlock Text="Newsletter" TextWrapping="Wrap" 
            FontFamily="Trebuchet MS" Foreground="#FF6C6C6C" 
            FontWeight="Bold" FontSize="12"/>
   </StackPanel>
   <Button Height="45" Width="60" Content="Plein écran" Margin="0,10,8,0" 
        HorizontalAlignment="Right" VerticalAlignment="Top" FontSize="10" 
        Visibility="Visible"/>
   <Grid Margin="30,70,30,50" Background="#FF8C8C8C" 
        Visibility="Collapsed">
      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" 
        Text="Contenu des Pages" TextWrapping="Wrap" FontSize="36" 
        FontFamily="./segoepr.ttf#Segoe Print" Foreground="#FFE2E0E0" 
        FontWeight="Bold"/>
   </Grid>
</Grid>

En très peu de lignes, nous sommes parvenus à créer une interface redimensionnable. Vous remarquez que la balise WrapPanel est préfixée de controlsToolkit. Cela signifie qu'il n'est pas référencé dans l'assembly System.Windows.dll par défaut. En réalité, lorsque vous avez ajouté ce composant dans l'application, Blend a automatiquement référencé deux bibliothèques issues du Silverlight ToolKit : System.Windows.Controls.dll et System.Windows.Controls.Toolkit.dll. Pour le vérifier, il suffit d'ouvrir votre panneau projet et de déplier le répertoire Reference. Blend a également fait en XAML l'équivalent d'un using C# pour référencer l'espace de noms controlsToolkit. Voici le code ajouté dans le UserControl racine :

xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Toolkit"

Lorsque vous concevrez et partagerez vos composants personnalisés, les personnes désirant les utiliser agiront de la même manière. Elles devront donc ajouter la bibliothèque contenant vos composants en tant que nouvelle référence. Toutefois Blend fait ce travail pour vous dans la plupart des situations. Pour l'instant, ce visuel est un peu brut, mais nous apprendrons rapidement à créer des composants et des styles personnalisés.

Affectez à cette grille une hauteur et une largeur automatique avec un alignement étiré (Stretch). Pour éviter qu'elle ne recouvre les autres objets, elle doit posséder des marges d'environ 30 pixels à gauche, 60 pixels en haut, 30 pixels à droite et 30 pixels en bas (voir Figure 4.12).

Pour finir, créez un composant TextBlock centré et sans marges au sein de la grille avec dimensions en mode Auto.

Afin de rendre la grille plus visible lors de la compilation, définissez une couleur
d'arrière-plan gris clair. Pour cela sélectionnez, en haut du panneau des propriétés, l'attribut Background présent dans l'inspecteur de couleurs. Ensuite, cliquez sur la deuxième icône en partant de la gauche. Elle permet de spécifier une couleur unie (voir Figure 4.13).

Comme vous pouvez le remarquer, le code couleur hexadécimal est codé sur quatre octets soit #FFFFFFFF.

Si vous n'êtes pas un familier de .Net, cette méthode est intéressante car elle permet de redéfinir à l'exécution le curseur d'un objet. La classe statique Cursors liste tous les curseurs disponibles lors du survol d'un objet graphique. Double-cliquez sur MainPage.xaml.cs et insérez le code en gras suivant :

public partial class MainPage : UserControl
{
   public MainPage()
   {
      InitializeComponent();
      PleinEcranBT.Cursor = Cursors.Hand;
   }
}

Assigner une valeur dans le XAML est équivalent à affecter une valeur dans le constructeur. Pour rappel, le constructeur d'une classe représente sa méthode d'initialisation, celle qui se lance à l'instanciation de l'objet. L'intérêt d'affecter les valeurs dans le code C# est de coupler l'assignation de ces valeurs à une logique métier.

Expression Blend permet de simplifier le processus pour accomplir cette opération. Il vous suffit d'ouvrir le panneau des propriétés propre au bouton plein écran, puis de définir un curseur de type Hand (voir Figure 4.16).

Nous allons créer une icône de redimensionnement que nous placerons au sein du bouton plein écran. Cette icône est très simple à réaliser, et elle va nous permettre d'apprendre les opérations de base que Blend propose pour les tracés vectoriels (voir Figure 4.17).

Dans un premier temps, faites un carré de 16 pixels de côté via la primitive Rectangle. Ensuite, légèrement en dessous, créez deux rectangles allongés de 6 pixels de hauteur par 14 de longueur. Alignez-les horizontalement côte à côte en gardant un espace entre eux de 8 pixels (voir Figure 4.18).

Une fois les rectangles réalisés, sélectionnez-les, puis ouvrez le menu Object et, au sein de l'onglet Combine, cliquez sur l'option Unite. Vous obtenez une primitive de type Path. Les deux rectangles ont donc été convertis en tracé vectoriel. Dans l'arbre visuel, en lieu et place des deux rectangles, vous remarquez qu'est apparu un objet [Path]. Sélectionnez le carré, puis le nouveau tracé et cliquez droit dessus. Grâce au menu Align, centrez les deux objets horizontalement et verticalement. Ensuite, au sein du panneau des propriétés, dans l'onglet des transformations RenderTransform, cliquez sur la deuxième icône en partant de la gauche. Vous ouvrez ainsi le panneau qui gère la rotation des objets. L'onglet RenderTransform est commun à tous les objets graphiques. Entrez la valeur de 45 degrés dans le champ Rotation (voir Figure 4.19).

Pour finir, désélectionnez tout, et dans l'ordre, cliquez sur le tracé (les deux anciens rectangles), puis sur le carré, en maintenant la touche Maj enfoncée. Ensuite, ouvrez le menu Object, puis Combine et sélectionnez l'option Substract. Le carré s'est vu retirer tout l'espace occupé par le tracé vectoriel (voir Figure 4.16). Il ne nous reste plus qu'à insérer cette image dans notre bouton plein écran en l'affectant à sa propriété Content. Cela est assez simple à faire : glissez l'icône au-dessus du bouton. Dès que le message vous indiquant la possibilité d'imbriquer l'élément apparaît, cliquez sur la touche Alt et relâchez le bouton de la souris. C'est fait, l'icône est intégrée au bouton plein écran. Afin d'obtenir un visuel élégant, vous pouvez redimensionner le bouton à 18 pixels de hauteur et de largeur, puis sélectionner le tracé à l'intérieur et lui affecter des dimensions en mode Auto. Cette dernière modification lui permet de s'adapter à son conteneur (le bouton). Pour ma part, j'ai également défini des marges extérieures (Margin) en haut et à droite de 8 pixels sur le bouton (voir Figure 4.20).

Finalement, on considère les objets bénéficiant de la propriété Content comme des conteneurs à enfant unique. Au sein de la plate-forme Silverlight, de nombreux composants utilisateur en bénéficient. Les primitives échappent assez logiquement à cette particularité. Le site, sans interaction logique, est disponible en ouvrant pleinEcran_maquette.zip dans le chap4 des exemples du livre.

Vous l'aurez compris, au sein de Silverlight presque tous les objets peuvent être imbriqués les uns dans les autres. Mais comment faire en C# pour affecter la propriété Content avec un élément existant ou instancié dynamiquement ?

Pour répondre à cette question, nous allons affecter un composant Image à la propriété Content du bouton Contact. Ce type de composant permet d'afficher des images bitmap. Pour cela, nommez le bouton ContactBtn, puis téléchargez dans votre répertoire projet l'image IconeContact.png, présente dans le dossier chap4 des fichiers d'exemples. Ensuite, au sein de Blend, cliquez droit sur le projet et sélectionnez l'option Add Existing Item… Dans la fenêtre d'exploration, sélectionnez l'image téléchargée et cliquez sur OK. Cette opération vous a permis d'ajouter l'image en tant que ressource. Double-cliquez sur MainPage.xaml.cs. Voici le code C# commenté permettant d'affecter l'image à la propriété Content :

public MainPage()
{
   InitializeComponent();
   PleinEcranBT.Cursor = Cursors.Hand;
   //on écoute l'événement Loaded diffusé lors du premier affichage
   //du UserControl soit this
   Loaded +=new RoutedEventHandler(MainPage_Loaded);
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{

   // 1 - ici on crée un composant Image
   Image myImage = new Image();
   // 2 - puis on définit son mode de redimensionnement
   myImage.Stretch = Stretch.None;
   // 3 - on crée ensuite un objet Uri qui pointe vers 
   // notre fichier image à utiliser
   Uri adresseImage = new Uri("IconeContact.png",UriKind.Relative);
   // 4 - on crée un objet de type ImageBitmap en lui spécifiant 
   // l'adresse relative que nous venons de définir
   BitmapImage bi = new BitmapImage( adresseImage );
   //5 - on précise au composant la source de l'image qu'il doit afficher
   myImage.Source = bi;
   //6 - pour finir, on ajoute le composant Image à la 
   // propriété Content de notre bouton Contact
   ContactBtn.Content = myImage;
}

Vous remarquez que l'image n'a pas été copiée dans le répertoire ClientBin. En réalité, elle a été compilée au sein du fichier xap, plus exactement dans le fichier dll contenu dans le xap. Il faudra toujours utiliser un objet de type BitmapImage que l'on affectera ensuite à la propriété Source du composant Image. Finalement, la partie la plus simple est d'attribuer le composant Image à la propriété Content de notre bouton. Pour affecter un composant plus complexe, tel que Grid, à cette propriété, nous aurions simplement pu écrire ContactBtn.Content = new Grid();. Cette grille aurait pu, à son tour, contenir des objets visuels, il n'y a pas limite. Le code n'est pas entièrement expliqué car nous ferons référence au mode redimensionnement ainsi qu'au chargement d'image ultérieurement.

La notion d'héritage remonte aux débuts de la programmation orientée objet. Lorsqu'une classe hérite d'une autre classe, elle récupère les méthodes, les champs et les propriétés de celle-ci. Ainsi, le code créé pour la classe mère, et échu aux classes filles, n'est écrit qu'une seule fois par le développeur. L'héritage fait partie des nombreuses techniques de réutilisation de code existantes en POO. Comme de nombreuses autres plates-formes, Silverlight est basé sur ce concept et les ingénieurs l'ayant conçu ont privilégié cette méthodologie. En tant que designer interactif ou développeur, la connaissance de la bibliothèque vous permettra de concevoir vos propres composants de manière optimisée et perspicace en héritant de la classe adéquate, qui n'aura ni trop ni pas assez de fonctionnalités. La classe mère de toutes les autres est Object. Elle possède plusieurs méthodes dont toutes les autres classes héritent et qu'elles utilisent. En voici une liste non exhaustive :

• Equals : cette méthode permet de comparer les valeurs contenues par deux références d'objet ;
• GetType : renvoie le type de l'instance qui l'invoque, ce qui est très pratique pour étudier et énumérer à l'avance un type inconnu ;
• MemberwiseClone : renvoie une nouvelle référence clonée à partir de l'instance qui l'invoque ;
• ReferenceEquals : permet de comparer deux références pour savoir si elles possèdent la même allocation mémoire ;
• ToString : lors de son appel, elle renvoie la valeur de l'instance sous forme de chaîne de caractères ; il peut être pratique d'outrepasser la méthode fournie par défaut pour générer une représentation personnalisée si celle implémentée ou héritée par défaut ne correspond pas à votre besoin.

Nous allons maintenant détailler les classes graphiques qui héritent de Object. Dans le schéma de la Figure 5.1, en dessous de Object, vous trouvez DependencyObject. Cette classe est abstraite, cela signifie qu'elle ne peut pas être directement instanciée. Elle fournit les mécanismes de base propres aux objets graphiques de la plate-forme Silverlight, dont le principe de DependencyProperty, aux classes en héritant. L'animation, l'imbrication et la notion de liaison (Binding) prennent appui sur ce principe. C'est là le cœur de la puissance et de la souplesse de Silverlight. Héritant de DependencyObject, la classe abstraite UIElement définit les mécanismes d'affichage propres aux objets graphiques. Elle possède les méthodes et propriétés permettant de calculer la taille et le positionnement de son instance dans l'espace, elle pose donc les bases du système d'agencement graphique. C'est dans cette classe que les propriétés d'opacité, de visibilité et de masque de découpe sont, par exemple, pourvues. Elle définit également les événements propres aux interactions utilisateurs : MouseEnter, Mouse-Leave, MouseLeftButtonUp, KeyUp, etc. La classe abstraite FrameworkElement hérite à son tour de UIElement et y ajoute le système de disposition visuel de Silverlight : le SLS pour Silverlight Layout System. Le SLS - ou système d'agencement de Silverlight - repose sur les méthodes Arrange-Override, MeasureOverride, sur les propriétés Width, Height, MinWidth, MinHeight, MaxWidth, MaxHeight, ActualWidth, ActualHeight et enfin, sur l'événement Size-Changed. La classe FrameworkElement définit également Loaded, diffusé lorsqu'une nouvelle instance est initialisée au sein de l'arbre visuel et logique de l'application. Pour finir, bien que les bases de la liaison de données soient définies en majeure partie dans la classe Dependency-Object, c'est la classe FrameworkElement qui résout l'accès aux membres de classe en fournissant la propriété DataContext nécessaire à la liaison de données. Finalement, FrameworkElement donne naissance à la majeure partie des classes concrètes, donc des composants visuels instanciables dans Silverlight.

Commençons par les primitives. Elles héritent toutes de la classe abstraite Shape, qui fournit les propriétés nécessaires pour affecter le remplissage du fond et le contour d'une forme primitive grâce aux propriétés Stroke et Fill. Shape permet également de personnaliser la forme du contour, ses extrémités et ses sommets. Toutes les classes héritant de Shape sont verrouillées, il est donc impossible de les étendre via l'héritage. La classe Path est particulière, car le tracé vectoriel est défini par la propriété Data. Toutefois, les propriétés Width et Height sont tout de même utilisées. Il faudra modifier la propriété Stretch de l'objet Path pour déterminer de quelle manière le tracé remplit les dimensions imposées en largeur et en hauteur. Par défaut, la propriété Strech a pour valeur Fill. Cela signifie que le tracé s'étirera pour remplir complètement les dimensions du composant Path en largeur et en hauteur.

Cette catégorie concerne une dizaine de classes qui, pour la majorité, sont fermées à l'extension et héritent en droite ligne de FrameworkElement. Elles ont pour but d'afficher ou de mettre en valeur un contenu simple et spécifique. Ci-dessous, les composants que vous pouvez y trouver.

• TextBlock : affiche du texte.
• Glyph : composant de gestion de texte bas niveau. Il permet d'afficher et de mettre en forme n'importe quel caractère via ses propriétés UnicodeString et Indices. Il offre plus d'options et plus de capacités que TextBlock, mais il est plus complexe à mettre en œuvre.
• Image : affiche et charge des images aux formats JPEG et PNG. Le format PNG 32 bits est supporté, ce qui vous permettra d'afficher des icônes transparentes, par exemple.
• MediaElement : contrôle qui permet de lire de la vidéo et du son aux formats WMV, WMA, MP3, ainsi que les fichiers encodés en H.264, ce qui étend ses capacités au format MP4 depuis la version 3 de Silverlight. Le logiciel Expression Encoder possède la capacité d'encoder la vidéo dans tous ces formats.
• MultiScaleImage: communément appelé composant DeepZoom, il prend en paramètre un ensemble d'images qu'il chargera par la suite dynamiquement afin de proposer une expérience utilisateur spécifique. Pour vous familiariser avec ce comportement utilisateur, vous pouvez vous rendre sur le sitehttp://www.laguna-coupe.com/.
• Popup et Border : conteneurs à enfant unique. Ils possèdent tous les deux la propriété Child qui leur permet de contenir n'importe quel UIElement. Border peut être considéré comme un rectangle amélioré, car il possède des propriétés de remplissage et d'affichage avantageuses. Popup permet, quant à lui, d'afficher une information au-dessus des autres composants constituant l'arbre visuel et logique. Il ne s'agit pourtant pas d'une fenêtre modale.
• ItemsPresenter : ce composant est assez particulier. Il est intégré au sein des composants de type ItemsControl et des classes en héritant. Il permet d'établir la position et l'espace alloués aux objets (ListBoxItem) d'une ListBox par exemple. Il est donc étroitement lié à la propriété ItemsSource d'une ListBox.
• ContentPresenter : gère le comportement de glisser-déposer et l'imbrication d'enfants uniques propres aux composants de type ContentControl. Il fait donc partie intégrante de leur structure.

Parmi les contrôles que nous avons évoqués, seuls quelques-uns implémentent la capacité d'être personnalisable tant au niveau de leur style que dans leur forme visuelle. Si l'on prend le cas du composant Image, celui-ci ne peut être directement paramétré pour posséder une bordure ou un fond. Pour cela, vous devrez utiliser la technique de composition propre à la programmation orientée objet. Vous devrez donc créer un contrôle, qui s'appellera, par exemple, Visionneuse et qui en interne possédera un Border ainsi qu'un composant Image. Si vous souhaitez que votre contrôle Visionneuse soit paramétrable par un designer interactif, vous devrez le faire hériter de la classe Control. Celle-ci hérite de Framework-Element et apporte, en plus, tous les mécanismes inhérents à la personnalisation du visuel d'un composant. Tous les contrôles que nous allons à présent évoquer héritent de cette classe et sont donc personnalisables par un graphiste, un designer ou un intégrateur. Nous ne traiterons pas de tous les composants, car ils sont nombreux, donc en voici une liste non exhaustive.

• AutoCompleteBox est un composant à mi-chemin entre un TextBox et une liste déroulante (ComboBox). De ce fait, il hérite directement de Control et non de la classe ItemsControls ou Selector. Il s'agit en fait d'un champ de saisie qui propose une liste de choix au fur et à mesure de la saisie utilisateur.
• RangeBase est une classe abstraite apportant les mécanismes, méthodes et propriétés de base propres aux objets de défilement ou de progression tels que Slider ou Progress-Bar. Si vous souhaitez faire un Slider à double curseur, vous devrez étendre cette classe.
• ItemsControl constitue le fondement des composants exposant une liste d'objets. Ceux-ci sont, la plupart du temps, reliés à un contexte de données ou directement fournis par le développeur à partir d'un fichier XML, d'une base de données ou d'un service Web.
• TextBox et PasswordBox sont deux composants permettant la saisie de données utilisateur. Alors que TextBlock n'est représenté visuellement que par le texte qu'il affiche, ceux-ci possèdent en leur sein une bordure extérieure ainsi qu'un fond et de nombreuses propriétés leur permettant d'être personnalisés.
• ContentControl est une classe abstraite apportant avec elle la capacité de contenir n'importe quel objet enfant. Cette capacité fait que, par défaut, tous les objets en héritant possèdent en interne un composant de type ContentPresenter et une propriété Content. Cette dernière est typée Object. Lorsque vous glissez un tracé vectoriel dans un bouton, vous affectez sa propriété Content, elle-même liée au ContentPresenter situé au sein du bouton. Cette capacité en fait une classe très puissante et très souple d'utilisation. De très nombreux composants héritent de cette classe du fait de cette capacité. Il arrivera sans doute que vous ayez besoin d'étendre cette classe pour vos propres besoins.
• ButtonBase hérite de ContentControl et apporte une gestion simplifiée et directe du clic gauche de la souris. Les classes en découlant, comme Button, RadioButton ou CheckBox, constituent la majeure partie des contrôles utilisateur au sein d'une interface. Il est à noter qu'il n'y a pas de différence fonctionnelle entre un ToggleButton et une CheckBox. La seule différence entre ces deux composants est purement visuelle.
• ToolTip est un peu spécifique. Cette classe permet d'afficher une bulle d'information lorsque la souris survole un objet graphique. Toutefois, il est impossible d'instancier cette classe directement, vous devrez passer par la classe statique ToolTipService et ses méthodes SetToolTip et GetToolTip. ToolTip hérite de ContentControl, elle peut donc afficher n'importe quel enfant de type UIElement ou héritant de UIElement. Pour ajouter une bulle d'information à un objet graphique, il vous suffira d'affecter la propriété ToolTip (du même nom que la classe, attention donc aux confusions) de cet objet. Cette propriété est attribuée par défaut aux objets de l'arbre visuel par la classe ToolTipService. ToolTip est une propriété dite attachée, elle n'est pas héritée mais attribuée dynamiquement. Nous reviendrons sur cette notion tout au long de ce chapitre.

Comme nous l'avons vu lors des chapitres précédents, les conteneurs à enfants multiples facilitent la mise en page et la création d'applications redimensionnables. Ce chapitre leur est dédié en grande partie, car ils constituent le fondement de toute application Silverlight. Ces conteneurs particuliers héritent de la classe abstraite Panel. De nombreuses notions et propriétés propres à ces composants sont basées sur les mêmes concepts existant au sein du langage HTML. Lorsque vous imbriquez un contrôle au sein d'un conteneur, l'objet imbriqué reçoit automatiquement des propriétés dites attachées. Par exemple, lorsque nous avons utilisé la grille d'alignement au Chapitre 3 Hello World, les objets imbriqués en son sein ont automatiquement reçu des propriétés attribuées par la grille (voir Figure 5.2).

Voici la liste des conteneurs de type Panel les plus courants.

• Canvas : c'est le conteneur le moins contraignant et le plus simple. Il faut considérer le conteneur Canvas comme un point dans l'espace à partir duquel les objets qui y sont contenus sont positionné. Les enfants de ce conteneur peuvent donc avoir des coordonnées positives ou négatives. Il peuvent donc être en dehors du Canvas, mais sont affichés dans tous les cas. Le redimensionnement d'un Canvas via ses propriétés Width et Height n'affecte en rien la position ou l'affichage de ses enfants (voir Figure 5.3).
  Les objets contenus au sein d'un Canvas récupèrent automatiquement les propriétés Top et Left attribuées par celui-ci. Lorsqu'une propriété est de type attachée, cela est visible dans le XAML. Les propriétés Top et Left sont préfixées de Canvas, comme le montre le code XAML ci-dessous :

   

  Sélectionnez

  <Canvas Margin="75,110,161,80">
        <Button Height="27" Width="72" Content="Button" Canvas.Left="45" 
                              Canvas.Top="29"/>
  </Canvas>

  

• 
  DockPanel permet de docker des objets en leur attribuant un espace dans une des quatre directions. Les composants qu'il contient pourront être dockés à gauche, en haut, à droite ou en bas du DockPanel. L'ordre dans lequel ceux-ci sont imbriqués, ainsi que les valeurs Width et Height de ces composants, déterminent l'espace qui leur est alloué et celui restant pour les autres composants du DockPanel. À cette fin DockPanel bénéficie de la propriété booléenne LastChildFill, qui permet de spécifier si le dernier élément imbriqué remplit ou non la totalité de l'espace restant. Par défaut cette propriété est à true, ce qui n'est pas le cas pour le DockPanel de la Figure 5.4 puisqu'il reste une place libre.

• Grid est un composant d'agencement très puissant et souple d'utilisation. Il est assez complexe et permet de résoudre la majorité des problématiques d'agencement. C'est pour cette raison que ce composant est directement placé au sein du UserControl racine lors de la création d'un projet Silverlight. Ce composant propose des options de mise en page très semblables à ce que vous pouvez réaliser en HTML et CSS avec les balises de type DIV. Il s'agit en réalité d'une grille qui peut contenir un nombre indéfini de colonnes et de lignes. Comme vous avez pu le voir dans les chapitres précédents, il contraint automatiquement les objets qui sont imbriqués en son sein.

• StackPanel permet d'empiler les objets les uns après les autres dans la direction horizontale ou verticale. Comme vous l'avez constaté, les options de marges influencent directement le positionnement des objets empilés les uns par rapport aux autres.

• WrapPanel possède le même comportement que StackPanel, mais renvoie à la ligne automatiquement (voir Chapitre 4 Un site plein écran en deux minutes).

Ces composants répondent à la grande majorité des besoins en matière d'agencement. Toutefois, vous devrez étendre la classe Panel pour créer vos propres conteneurs personnalisés. Cette classe possède à cette fin deux méthodes virtuelles, MeasureOverride et ArrangeOverride. Vous devrez donc les surcharger lorsque vous créerez vos propres conteneurs. Tous les composants héritant de Panel partagent la propriété Children. Cette dernière est un ensemble de contrôles UIElement donnant accès aux enfants du conteneur, qui seront forcément accessibles, car ce sont des objets graphiques. Ils sont donc au moins de type UIElement.

Ce qu'on appelle l'arbre visuel et logique d'une application est en fait l'ensemble des objets affichés ainsi que leurs relations enfant / parent. Trois propriétés permettent ainsi d'imbriquer les éléments : Content pour les contrôles de type ContentControl, Children pour les conteneurs héritant de Panel et Child pour tous les autres conteneurs spécifiques, tels que ViewBox par exemple. Nous allons maintenant nous intéresser à la propriété Children et apprendre à gérer la liste d'affichage d'un conteneur de type Panel.

Le design est influencé, car l'ordre d'imbrication impacte directement l'ordre de superposition des objets les uns par rapport aux autres, de la même manière que les calques sous Photoshop ou Expression Design (voir Figure 5.5).

Voici un exemple d'agencement au sein d'une grille. Comme vous le remarquez, rectangle0 est en dessous des autres d'un point de vue visuel. Il est situé à l'index 0 de la liste d'affichage, toutefois au sein de Blend il est représenté en haut de la liste d'affichage dans l'arbre visuel. Blend affiche par défaut l'arbre visuel en respectant l'ordre de création XAML. Le code XAML ci-dessous correspond à l'arbre visuel affiché à la Figure 5.5 :

<Grid x:Name="LayoutRoot" Background="#FFFFFFFF">
      <Rectangle x:Name="rectangle0" Fill="#FF4B7145" Stroke="#FF000000" 
            Height="108" HorizontalAlignment="Left" 
            Margin="137,89,0,0" VerticalAlignment="Top" Width="118"/>
      <Rectangle x:Name="rectangle1" Fill="#FF5F9657" Stroke="#FF000000" 
            Height="89" HorizontalAlignment="Left" 
            Margin="198,146,0,0" VerticalAlignment="Top" Width="122"/>
      <Rectangle x:Name="rectangle2" Fill="#FF8CAC95" Stroke="#FF000000" 
            Margin="255,201,249,191"/>
      <Rectangle x:Name="rectangle3" Fill="#FFB0BF9D" Stroke="#FF000000" 
            Margin="306,239,218,167"/>
      <Rectangle x:Name="rectangle4" Fill="#FF8DDB86" Stroke="#FF000000" 
            Height="67" HorizontalAlignment="Right" 
            Margin="0,0,180,136" VerticalAlignment="Bottom" 
            Width="95"/>
</Grid>

L'ordre proposé par défaut est donc assez logique d'un point de vue architecture. L'arbre visuel peut au départ vous induire en erreur si vous êtes habitué à d'autres logiciels, car l'objet le plus haut dans l'arbre est celui situé le plus à l'arrière-plan par rapport aux autres. Vous pouvez à tout moment changer ce mode de présentation en cliquant sur le bouton situé en bas à gauche de l'arbre visuel (). Toutefois, vous vous habituerez très vite à cette représentation, car elle est cohérente avec l'ordre des balises XAML générées.

D'un point de vue conception, l'ordre d'imbrication est déterminant, car il impose souvent le positionnement des objets au sein des conteneurs. L'agencement des enfants au sein d'un contrôle StackPanel ou WrapPanel, par exemple, en est une conséquence directe comme vous avez pu le constater au Chapitre 4 Un site plein écran en deux minutes (voir Figure 5.4 et 5.6).

Le bouton le plus à droite au sein du WrapPanel est ContactBtn. Il s'agit en fait du dernier bouton imbriqué et du seul qui est nommé. Il possède l'index 4. L'index influence donc également l'architecture même de l'application. Voici le code XAML représenté à la Figure 5.6 :

<controls:WrapPanel Height="Auto" HorizontalAlignment="Stretch" 
            VerticalAlignment="Top" Width="Auto" Margin="30,10,90,0" 
            d:LayoutOverrides="Width">
      <Button Height="Auto" Width="Auto" Content="Nouveautés" 
            Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" 
            Visibility="Visible" />
      <Button Height="Auto" Width="Auto" Content="Portfolio" 
            Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" 
            Visibility="Visible"/>
      <Button Height="Auto" Width="Auto" Content="Médias" 
            Margin="0,0,20,0" 
            FontSize="14" FontFamily="Trebuchet MS" 
            Visibility="Visible"/>
      <Button Height="Auto" Width="Auto" Content="Savoir faire" 
            VerticalAlignment="Stretch" Margin="0,0,20,0" 
            FontSize="14" FontFamily="Trebuchet MS" 
            Visibility="Visible"/>
      <Button x:Name="ContactBtn" Height="Auto" Width="Auto" 
            Content="Contact" Margin="0,0,0,0" FontSize="14" 
            FontFamily="Trebuchet MS" Visibility="Visible"/>
</controls:WrapPanel>

Parfois, le développeur voudra manipuler un objet non nommé ou réorganiser une interface en arrangeant la liste d'affichage. Le graphiste, quant à lui, souhaitera tout de même gérer la superposition des éléments les uns entre les autres sans s'occuper directement de l'architecture ou de la conception technique. Nous allons aborder les méthodes et techniques qui répondent à ces problématiques en nous efforçant de garder un flux de production souple et en préservant les rôles de chacun.

Un objet nommé est facile à cibler, car lorsqu'un objet est nommé, il devient un champ privé de la classe de l'application. Il faut en effet garder à l'esprit que tout ce que nous produisons au sein du fichier XAML est en réalité créé au sein de la classe partielle. Un développeur n'a qu'à écrire le nom d'un objet déclaré dans le XAML suivi d'un point pour accéder à tous ses membres. Nous pourrions de cette manière facilement accéder au bouton ContactBtn (voir Figure 5.7).

Toutefois, vous n'aurez pas toujours la possibilité de connaître le nom d'un objet à l'avance ou encore de nommer tous les objets dans Blend. Nous allons donc apprendre à accéder à un objet anonyme.