Créer un contrôle utilisateur vide

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, exactement comme une application. La seule différence tient au fait que l'élément racine 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 de contrôle personnalisé dans du code pouvant être basé sur un contrôle système existant, voir Essayez ! Créer un contrôle avec des propriétés personnalisées.

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.

Pour plus d'informations sur les contrôles utilisateur, y compris des exemples de code et de syntaxe XAML, voir la page Vue d'ensemble de la création de contrôles dans la section Windows Presentation Foundation sur MSDN.

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 WPF ou Bibliothèque de contrôles Silverlight 3, 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 des 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 dans le panneau Objets et chronologie, en pointant sur Modifier le type de disposition et en cliquant ensuite sur le nom du panneau.

3. Dans le panneau 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. Dans le panneau 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 que l'animation de l'écran d'accueil se termine.

   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 progressive entre animations. Pour plus d'informations sur les transitions progressives entre animations, voir la section « Utilisation de plusieurs chronologies d'animation superposées » à la rubrique Animation d'objets.

5. Dans le panneau Déclencheurs, configurez les déclencheurs de propriétés ou d'événements qui permettront à votre application de répondre aux interactions de l'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 Vue d'ensemble 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. Dans le panneau Objets et chronologie, sélectionnez la racine de votre document, 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, veillez à réinitialiser à Auto les propriétés Width (Largeur) et Height (Hauteur) de tous les objets du contrôle utilisateur.

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.

Voir aussi

Tâches

Créer un contrôle utilisateur à partir d'objets existants

Dessiner un contrôle utilisateur dans un autre document