Lorsque vous écrivez une application, l’application se compose de certains blocs de base que vous pouvez utiliser encore et encore. Ce bloc peut être une certaine logique qui existe comme un morceau de code (peut-être sous la forme d’une classe ou une méthode) ou sous la forme d’une interface utilisateur (qui est l’objet de la discussions ici).

Par exemple, votre application peut contenir une interface utilisateur simple qui permet aux
utilisateurs de votre site Web de taper des informations d’adresse. Vous utilisez peut-être ceci dans plusieurs pages; par exemple, vous pouvez l’utiliser pour recueillir l’adresse de l’utilisateur, l’adresse de travail, l’adresse d’expédition, et ainsi de suite. L’adresse peut se composé de plusieurs champs, tels que adresse, ville, et ainsi de suite. Silverlight vous permet de créer un élément d’interface utilisateur qui contient une autre interface utilisateur pour former un élément composite appelé un UserControl. En outre aux éléments d’interface utilisateur, UserControls vous permet d’ajouter un peu de logique telles que la validation dans le code.

Dans cette section, nous allons vous montrer comment créer un tel contrôle, ainsi que la façon de l’utiliser.

Exemple : créer un UserControl d’Adresse :

Dans cet exemple, nous allons vous montrer comment créer un type de contrôle que de nombreuses applications utilisent régulièrement – un contrôle pour recueillir des informations d’adresse.

Pour créer un contrôle d’adresses, vous devez avoir les champs suivants:

✓ Numero de la rue (Street Number)
✓ Nom de la rue (Street Name)
✓ Ville (City)
✓ État (State)
✓ ZIP ou code postal (Postal code)
✓ pays (Country)

Par souci de simplicité, vous pouvez définir tous ces champs comme des champs texte. Lire la suite pour voir comment.

1. Créer un nouveau projet Silverlight en choisissant Fichier ➪ Nouveau projet à partir du menu, et quand la boîte de dialogue Nouveau projet apparaît, sélectionnez Silverlight 4 Application + site Web et lui donner un nom approprié tel que AddressUserControlExample. Puis cliquez sur OK.
Un nouveau projet est créé et le fichier MainPage.xaml est représenté sur le plan de travail.

2. Double-cliquez sur le StackPanel dans le ToolsPanel pour l’ajouter à la MainPage. Faites glisser les poignées de redimensionnement pour définir la hauteur et la largeur du StackPanel à une dimension appropriée.

3. Ajouter six paires de TextBlocks et TextBoxes dans le plan de travail pour afficher les six champs d’adresse. Remplacer le texte par défaut dans le TextBlocks en double-cliquant dessus et en tapant sur ​​eux afin qu’ils lisent le numero de la rue, Nom de la rue, ville, État, code postal, et pays, comme le montre la figure suivante :

4. Ctrl+cliquez sur le TextBlocks un après l’autre jusqu’à ce que vous avez cliqué sur tous les TextBlocks sur le plan de travail. Ceci permet de sélectionner tous les TextBlocks et vous permet de modifier toutes les propriétés simultanément.

5. Allez dans le panneau de Propriétés, puis appuyez sur le bouton Gras dans le group text afin de rendre le texte dans tous les TextBlocks gras.

6. Ctrl+cliquez sur les contrôles TextBox un après l’autre jusqu’à ce que vous avez cliqué sur tous les TextBlocks sur le plan de travail.

7. Cliquez sur l’option Propriétés avancées à côté du champ de texte dans le Panneau Propriétés, et dans le menu, choisissez Réinitialiser (reset).

Le texte par défaut dans le contrôle TextBox est effacé et le code XAML pour les opérations que vous venez de réaliser devrait maintenant ressembler à ceci (certains balisage a été remplacé par ellipses […] Par souci de concision):

8. Utilisation de l’outil de sélection, sélectionnez le numéro de rue control TextBox du plan de travail et définir son nom à « txtStreetNumber » dans le panneau Propriétés. De même, définir le nom de rue, ville, État, Zones de texte Code postal, et pays à « txtStreetName », « txtCity », « txtState », « txtPostalCode », et « txtCountry », respectivement.
Donner un nom à ces champs sera utile lorsque vous définissez des valeurs pour plus tard.

9. Sélectionnez le StackPanel soit en cliquant dessus à partir des objets et Panneau Montage ou en utilisant l’outil de sélection et de sélection des StackPanel du plan de travail.

10. Faites un clic droit et choisissez en faire un contrôle utilisateur (Make Into User Control). Une UserControl boîte de dialogue apparaît, comme le montre la Figure suivante :

11. Remplacer UserControl1 dans le champ Nom en entrant AddressUserControl; puis cliquez sur OK. Un nouveau fichier nommé AddressUserControl.xaml est ajouté et l’ensemble des contenu du StackPanel être déplacée à ce nouveau contrôle.

12. Cliquez sur l’onglet MainPage.xaml sur le plan de travail. Le fichier MainPage.xaml s’ouvre et affiche un point d’exclamation en haut des champs d’adresse. Ceci apparait car le projet doit être compilé. Vous pouvez compiler le projet en appuyant sur Ctrl+Maj+B, ou vous pouvez appuyer sur F5 pour exécuter le projet.

13. Si vous avez compilé le projet, fermez le navigateur, et Expression Blend, cliquez sur le bouton sur le plan de travail XAML pour ouvrir la vue XAML de la MainPage.xaml.
Dans le fichier XAML, notez que tous les champs adresse que vous avez ajoutés sont
remplacée par une ligne unique qui contient un élément appelé
local: AddressUserControl:

Notez que dans l’élément UserControl, une ligne de départ avec le texte xmlns: local a été ajouté. Cet élément permet de savoir à Silverlight où le AddressUserControl vous venez d’ajouter est situé.

Prochain poste : on verra comment réutiliser ce UserControl et créer des propriétés pour ce dernier

Kamel DJELLAL
Chef de projet
EDIS CONSULTING – GROUPE UBISIDE

http://www.ubiside.fr/