Créer des Applications WP8 Les contrôles

Les contrôles

Jusqu’à présent nous avons vu peu de contrôles, la zone de texte non modifiable, la zone de saisie modifiable, le bouton… Il existe beaucoup de contrôles disponibles dans les bibliothèques de contrôles XAML pour Windows Phone. Ceux-ci sont facilement visibles grâce à la boite à outils que l’on retrouve à gauche de l’écran.

Voyons un peu ce qu’il y a autour de ces fameux contrôles.

Généralités sur les contrôles

Il y a plusieurs types de contrôles, ceux-ci dérivent tous d’une classe de base abstraite qui s’appelle UIElement qui sert à gérer tout ce qui doit pouvoir s’afficher et qui est capable de réagir à une interaction simple de l’utilisateur. Mais la classe UIElement ne fait pas grand-chose sans la classe abstraite dérivée FrameworkElement qui fournit tous les composants de base pour les objets qui doivent s’afficher sur une page. C’est cette classe également qui gère toute la liaison de données que nous découvrirons un peu plus tard.
C’est donc de cette classe que dérivent deux grandes familles de contrôles : les contrôles à proprement parler et les panneaux.
Les panneaux dérivent de la classe abstraite de base Panel et servent comme conteneurs permettant de gérer le placement des contrôles. Nous allons y revenir dans un prochain chapitre.
Les contrôles dérivent de la classe abstraite Control. Elle sert de classe de base pour tous les éléments qui utilisent un modèle pour définir leur apparence. Nous y reviendrons plus tard, mais une des grandes forces du XAML est d’offrir la possibilité de changer l’apparence d’un contrôle, tout en conservant ses fonctionnalités. Les contrôles qui héritent de la classe Control peuvent se répartir en trois grandes catégories.

• Ceux qui dérivent de la classe ContentControl et qui permettent de contenir d’autres objets. C’est le cas du bouton par exemple, nous y reviendrons.
• Il y a également les contrôles qui dérivent de la classe ItemsControl, qui servent à afficher une liste d’éléments, c’est le cas de la ListBox par exemple, nous l’étudierons plus loin.
• Et enfin, il reste les contrôles qui dérivent directement de la classe Control, qui ne contiennent pas d’autres contrôles ou qui n’affichent pas de liste d’éléments, comme par exemple le TextBlock ou le TextBox que nous avons vu.

Pour schématiser, nous pouvons observer ce schéma (incomplet) à la figure suivante.

Hiérarchie de classe pour les contrôles

Une dernière remarque avant de terminer, sur l’utilisation des propriétés. Nous avons vu l’écriture suivante pour par exemple modifier la valeur de la propriété Text du contrôle TextBlock :

<TextBlock Text="Hello world" />

Il est également possible d’écrire la propriété Text de cette façon :

<TextBlock>

    <TextBlock.Text>

        Hello world

    </TextBlock.Text>

</TextBlock>

Cette écriture nous sera très utile lorsque nous aurons besoin de mettre des choses plus complexes que des chaines de caractères dans nos propriétés. Nous y reviendrons.
Enfin, une propriété possède généralement une valeur par défaut. C’est pour cela que notre TextBox sait s’afficher même si on ne lui précise que sa propriété Text, elle possède une couleur d’écriture par défaut, une taille d’écriture par défaut, etc.

Utiliser le designer pour ajouter un CheckBox

Revenons à notre boite à outils remplie de contrôle. Elle se trouve à gauche de l'écran, ainsi que vous pouvez le voir sur la figure suivante.

La boîte à outils des contrôles dans Visual Studio

Grâce au designer, vous pouvez faire glisser un contrôle de la boîte à outils dans le rendu de la page. Celui-ci se positionnera automatiquement.

Prenons par exemple le contrôle de case à cocher que nous avons entre-aperçu un peu plus tôt : CheckBox. Sélectionnez-le et faites le glisser sur le rendu de la page (voir la figure suivante).

Ajout d'un contrôle CheckBox à partir du designer

Le designer m’a automatiquement généré le code XAML correspondant :

<CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="168,167,0,0" VerticalAlignment="Top"/>

Vous aurez sûrement des valeurs légèrement différentes, notamment au niveau de la propriété Margin. C’est d’ailleurs en utilisant ces valeurs que le designer a pu me positionner le contrôle dans la grille.
Remarquons que si j’avais fait glisser un Canvas et ensuite la case à cocher dans ce Canvas, j’aurais plutôt eu du code comme le suivant :

<Canvas HorizontalAlignment="Left" Height="100" Margin="102,125,0,0" VerticalAlignment="Top" Width="100">

    <CheckBox Content="CheckBox" Canvas.Left="56" Canvas.Top="40"/>

</Canvas>

Ici, il a utilisé la propriété Canvas.Top et Canvas.Left pour positionner la case à cocher. Nous allons revenir sur ce positionnement un peu plus loin.

Il est possible de modifier les propriétés de la case à cocher, par exemple son contenu, en allant dans la fenêtre de Propriétés (voir la figure suivante).

Modification des propriétés d'un contrôle à partir de la fenêtre des propriétés

Si la fenêtre de propriétés n’est pas affichée, vous pouvez la faire apparaitre en allant dans le menu Affichage, Fenêtre propriétés.

Ici, je change la valeur de la propriété Content. Je peux observer les modifications sur le rendu et dans le XAML.
Remarquons que le designer est un outil utile pour créer son rendu, par contre il ne remplace pas une bonne connaissance du XAML afin de gérer correctement le positionnement.

Utiliser Expression Blend pour ajouter un ToggleButton

J’aurais aussi pu faire la même chose dans Expression Blend qui est l’outil de design professionnel. J’ai également accès à la boîte à outils (voir la figure suivante).

Barre d'outils des contrôles dans Blend

Et de la même façon, je peux faire glisser un contrôle, disons le ToggleButton, sur ma page. J’ai également accès à ses propriétés afin de les modifier. Ici, par exemple, je modifie la couleur du ToggleButton (voir la figure suivante).

Modification des couleurs du ToggleButton dans Blend

Une fois revenu dans Visual Studio, je peux voir les modifications apportées depuis Blend, avec par exemple dans mon cas :

<ToggleButton Content="ToggleButton" HorizontalAlignment="Left" Margin="111,169,0,0" VerticalAlignment="Top" Background="#FFF71616" BorderBrush="#FF2DC50C"/>

Nous reviendrons sur Blend tout au long de ce cours.

• Il existe tout une hiérarchie des contrôles utilisables dans nos pages.
• Les contrôles sont accessibles depuis la barre d’outils de Visual Studio ou dans expression blend.
• Le designer de Visual Studio et celui de Blend peuvent nous faciliter la tâche dans le design de nos applications.