Essayez ! Créer un contrôle utilisateur WPF

Si vous souhaitez concevoir un composant réutilisable pouvant être ajouté à la planche graphique tout comme un contrôle système, vous pouvez créer un contrôle utilisateur dans Microsoft Expression Blend. Les contrôles utilisateur peuvent contenir des contrôles, des ressources, des chronologies d’animation, tout comme une application Windows Presentation Foundation (WPF). La seule différence réside dans l’élément racine qui est un élément UserControl et non une Fenêtre ou une Page.

Les procédures suivantes illustrent la création d’un contrôle utilisateur contenant une animation, puis son instanciation dans un autre document. Pour consulter un exemple de création d’un contrôle personnalisé dans du code pouvant être basé sur un contrôle système existant, voir Essayez ! créer un contrôle WPF personnalisé.

Vous trouverez d’autres exemples de contrôles utilisateur dans les exemples fournis avec Expression Blend. Dans le menu ? (Aide), cliquez sur Écran d’accueil, sélectionnez l’onglet Exemples, puis cliquez sur le nom d’un exemple, tel que SmoothBlends. Pour plus d’informations sur les contrôles utilisateur, y compris des exemples de code et de syntaxe XAML, voir la page sur la présentation générale de la création de contrôles dans la section Windows Presentation Foundation sur MSDN.

Remarque :

Les contrôles utilisateur ne sont pas pris en charge dans Microsoft Silverlight 1.0. Toutefois, vous pouvez créer des classes JavaScript personnalisées que vous pouvez instancier par programme. Pour un exemple, voir la classe Button dans l’exemple ButtonGallery disponible dans l’onglet Exemples de l’Écran d’accueil (dans le menu ? (Aide)). Les contrôles utilisateur sont pris en charge dans Silverlight 2. Pour plus d’informations, voir Créer un contrôle utilisateur dans votre projet Silverlight 2.

Pour définir le contrôle utilisateur

1. Dans Expression Blend, effectuez l’une des opérations suivantes :

   • Pour créer un contrôle utilisateur dans un fichier .dll, cliquez sur Nouveau projet dans le menu Fichier, sélectionnez le type de projet Bibliothèque de contrôles, donnez un nom au projet, sélectionnez la langue du fichier code-behind du document principal, puis cliquez sur OK. Utilisez cette option si vous souhaitez masquer la mise en œuvre de votre contrôle utilisateur lorsque vous le donnez à une autre personne ou si vous souhaitez modifier l’apparence du contrôle utilisateur en créant un modèle lorsque le contrôle utilisateur est dessiné dans une autre application.

   • Pour créer un contrôle utilisateur dans un fichier .xaml d’un projet existant, cliquez sur Nouvel élément (Ctrl+N) dans le menu Fichier, sélectionnez le modèle UserControl, donnez un nom au fichier, puis cliquez sur OK. Cette option est plus simple à modifier, car votre contrôle utilisateur se trouve dans le projet où vous l’utilisez. Par conséquent, vous pouvez omettre l’étape de mise à jour d’une référence à une .dll.

   Expression Blend ouvre le contrôle utilisateur pour modification.

2. Déterminez quel type de panneau vous souhaitez pour l’élément racine. Par défaut, un panneau Grille nommé LayoutRoot est utilisé, lequel autorise le redimensionnement d’animations lorsque le contrôle utilisateur est redessiné dans un autre document. Vous pouvez changer ce panneau en un panneau Canevas ou en tout autre contrôle de panneau en cliquant avec le bouton droit sur l’élément LayoutRoot sous Objets et chronologie, en pointant sur Modifier le type de disposition, et en cliquant ensuite sur le nom du panneau.

3. Dans la boîte à outils, sélectionnez les contrôles et les outils de dessin à inclure dans votre contrôle utilisateur et placez-les sur la planche graphique. Modifiez-les à l’aide des propriétés du panneau Propriétés. Les contrôles utilisateur peuvent contenir tout ce qu’une application WPF peut contenir.

4. Sous Objets et chronologie, créez les chronologies d’animation souhaitées. Pour obtenir un exemple, voir Créer une animation simple.

   Remarque :

   Lorsque vous définissez des images clés, tenez compte de la synchronisation de toutes les animations dans votre application, et à quel moment sera exécutée l’animation dans votre contrôle utilisateur. Par exemple, prenez une application qui anime d’abord un écran d’accueil, puis anime l’apparition progressive de l’interface utilisateur. Vous pouvez insérer chacune des animations dans son propre contrôle utilisateur, mais laissez suffisamment de temps au début de la deuxième animation pour terminer l’animation de l’écran d’accueil.

   Conseil :

   Réglez une image clé à la marque 0 seconde si vous souhaitez que l’animation puisse démarrer plusieurs fois. Par exemple, si vous créez une chronologie d’animation qui déplace un objet de gauche à droite et est déclenchée par un double-clic de souris, mais que vous n’avez pas réglé une image clé à la marque 0 seconde, l’animation ne s’exécutera pas plus d’une fois lors des double-clics suivants car il s’agit d’une transition graduelle entre animations. Pour plus d’informations sur les transitions graduelles entre animations, voir « Utilisation de plusieurs chronologies d’animation superposées » dans la rubrique Vue d’ensemble de l’animation.

5. Sous Déclencheurs, configurez les déclencheurs de propriétés ou d’événements qui permettront à votre application de répondre aux interactions d’utilisateur. Pour obtenir un exemple, voir Ajouter ou supprimer un déclencheur.

   Remarque :

   Lors du choix des déclencheurs à définir dans votre contrôle utilisateur, tenez compte de toutes les propriétés et déclencheurs devant être rendus disponibles dans votre contrôle utilisateur. Par exemple, prenez une application qui contient un bouton, et une animation qui est contenue dans un contrôle utilisateur. Dans Expression Blend, vous ne pouvez pas ajouter un déclencheur au contrôle utilisateur qui lancera la chronologie d’animation lorsque le bouton est enfoncé, sauf si ce dernier fait également partie du contrôle utilisateur. En outre, vous ne pouvez prévoir une liaison de données entre des valeurs de propriétés que si les deux propriétés se trouvent dans le même contrôle utilisateur. Vous pouvez contourner cette restriction par programme dans des fichiers code-behind, ou en créant un modèle avec déclencheurs et chronologies d’animation pour votre contrôle utilisateur après qu’il a été ajouté à un document. Pour consulter un exemple d’un contrôle utilisateur avec un fichier code-behind, voir la page sur la présentation générale de la création de contrôles dans la section Windows Presentation Foundation sur MSDN. Pour plus d’informations sur la modification d’un fichier code-behind dans Expression Blend, voir Modifier un fichier code-behind.

6. Une fois que vous avez terminé la création de votre contrôle utilisateur, vérifiez que vous changez la taille de l’élément racine de votre document de façon que sa taille ne soit pas excessive. Sous Objets et chronologie, sélectionnez votre document racine, puis à l’aide de l’outil Sélection , réglez la taille de la fenêtre de votre document au moyen des ornements bleus sur la planche graphique.

7. Si votre contrôle utilisateur dépend de clics de souris ou d’une interaction avec la zone vide dans le contrôle utilisateur, vous devez choisir pour l’arrière-plan de l’élément racine un pinceau de couleur unie afin que votre contrôle utilisateur utilise de l’espace sur la planche graphique lorsqu’il est ajouté à un autre document. Dans la catégorie Pinceaux du panneau Propriétés, choisissez pour la propriété Background (Arrière-plan) de votre élément racine un Pinceau de couleur unie . Si vous voulez que l’arrière-plan reste invisible, attribuez la valeur 0 à la sous-propriété Alpha.

8. Si votre contrôle utilisateur dépend d’une hauteur ou d’une largeur spécifique, définissez les propriétés MinHeight (Hauteur minimale) et MinWidth (Largeur minimale) dans la section Avancé  de la catégorie Disposition du panneau Propriétés.

9. Si vous souhaitez que votre contrôle utilisateur soit redimensionnable lorsqu’il est dessiné dans un document, assurez-vous que les propriétés Width (Largeur) et Height (Hauteur) de tous les objets dans le contrôle utilisateur soient réinitialisés à Auto.

10. Enregistrez vos fichiers et votre projet en cliquant sur Enregistrer tout dans le menu Fichier.

11. Si votre projet est une bibliothèque de contrôles, générez votre projet pour créer le fichier .dll en cliquant sur Générer le projet (Ctrl+Maj+B) dans le menu Projet. Le fichier .dll est généré et enregistré dans le dossier \bin\Debug au même endroit que votre projet.

Haut de la page

Pour instancier le contrôle utilisateur dans un autre document

1. Si vous avez créé une bibliothèque de contrôles, ajoutez une référence au fichier .dll dans le projet dans lequel vous souhaitez utiliser votre contrôle utilisateur. Dans le menu Projet, cliquez sur Ajouter une référence, recherchez le fichier .dll de votre contrôle utilisateur dans la fenêtre Ajouter une référence, puis cliquez sur Ouvrir.

2. Générez votre projet actuel (Ctrl+Maj+B) de façon que le contrôle utilisateur puisse être sélectionné dans la Bibliothèque de composants.

3. Dans l’onglet Contrôles personnalisés de la Bibliothèque de composants , sélectionnez votre contrôle utilisateur. L’icône de votre contrôle utilisateur apparaît sélectionnée au-dessus du bouton Bibliothèque de composants.

4. Utilisez votre souris pour dessiner votre contrôle utilisateur sur la planche graphique.

5. Testez votre projet (F5) pour voir votre contrôle utilisateur en action.

Haut de la page

Pour modifier un contrôle utilisateur après qu’il a été ajouté à un autre document

Si vous avez créé un document de contrôles utilisateur et non une bibliothèque de contrôles (.dll), vous pouvez entrer dans le mode d’édition de votre contrôle à l’aide du menu contextuel.

1. Cliquez avec le bouton droit sur le contrôle utilisateur sur la planche graphique ou sous Objets et chronologie, puis cliquez sur Modifier le contrôle. Expression Blend ouvre le document de contrôles utilisateur pour modification.

2. Une fois vos modifications effectuées, enregistrez le fichier, puis revenez au document principal.

Si vous avez créé un contrôle utilisateur dans un projet de bibliothèque de contrôles, vous devez modifier le projet de bibliothèque de contrôles d’origine, puis régénérer le fichier .dll.

Haut de la page