Procédure pas à pas : mise à disposition de métadonnées pour les icônes de boîte à outils

Article
08/10/2011

Cette procédure pas à pas indique comment fournir des icônes de boîte à outils pour différents concepteurs, tels que Visual Studio et Expression Blend, dans une bibliothèque de contrôles personnalisés Windows Presentation Foundation (WPF). Lorsque vous ajoutez le contrôle personnalisé à la boîte à outils d'un concepteur, l'icône appropriée apparaît en regard du nom du contrôle.

Le Concepteur WPF pour Visual Studio permet de fournir des icônes de boîte à outils personnalisées pour différents concepteurs. Par exemple, vous pouvez cibler des icônes différentes pour votre contrôle personnalisé dans Visual Studio et Expression Blend. Les icônes fournies par l'implémentation au moment du design remplacent l'icône par défaut dans l'assembly de runtime du contrôle.

Dans cette procédure pas à pas, vous allez effectuer les tâches suivantes :

créer un projet de bibliothèque de contrôles personnalisés WPF avec une bitmap d'icône incorporée ;
créer un assembly séparé pour les métadonnées au moment du design qui substituent l'icône de boîte à outils par défaut ;
tester l'icône du contrôle au moment du design.

Lorsque vous aurez terminé, vous saurez comment remplacer l'icône au moment de l'exécution par défaut par un contrôle personnalisé au moment du design.

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Visual Studio 2010.

Création d'un contrôle personnalisé avec une icône de boîte à outils

Pour créer une icône de boîte à outils personnalisée pour un contrôle, vous ajoutez une image en tant que ressource incorporée au projet du contrôle.

Pour créer un contrôle personnalisé avec une icône de boîte à outils

Créez un projet de bibliothèque de contrôles personnalisés WPF dans Visual Basic ou Visual C# nommé TailspinToysControlLibrary.
Renommez le fichier de code CustomControl1 en TailspinToysControl.
Ajoutez une icône de boîte à outils nommée TailspinToysControl.icon.bmp en tant que ressource incorporée. Pour plus d'informations, consultez Procédure pas à pas : création d'une icône de boîte à outils personnalisée pour un contrôle.
À l'aide de l'Outil Texte, peignez DEFAULT dans la bitmap, ce qui indique quand la Boîte à outils charge l'icône par défaut de l'assembly du contrôle.
Affectez au chemin de sortie du projet la valeur \TailspinToysControlLibrary\bin\".
Générez la solution.

Création de l'assembly de métadonnées au moment du design

Le code au moment du design est déployé dans des assemblys de métadonnées spéciaux. Pour cette procédure pas à pas, les métadonnées personnalisées sont prises en charge par Visual Studio et Expression Blend, et sont déployées dans un assembly nommé TailspinToysControlLibrary.Design.

Pour créer l'assembly de métadonnées au moment du design

Créez un assembly au moment du design nommé TailspinToysControlLibrary.Design. Pour plus d'informations, consultez Procédure pas à pas : mise à disposition de métadonnées au moment du design personnalisées.
Ouvrez le fichier de code RegisterMetadata dans l'éditeur de code.

Remplacez le code généré automatiquement par le code suivant. Ce code crée un AttributeTable qui associe les attributs au moment du design personnalisés à la classe TailspinToysControl.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Microsoft.Windows.Design;
using Microsoft.Windows.Design.Features;
using Microsoft.Windows.Design.Metadata;

using TailspinToysControlLibrary;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(TailspinToysControlLibrary.Design.RegisterMetadata))]
namespace TailspinToysControlLibrary.Design
{
    internal class RegisterMetadata : IProvideAttributeTable
    {
        // Called by the designer to register any design-time metadata. 
        public AttributeTable AttributeTable
        {
            get
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();

                // Set ToolboxBrowsableAttribute to true to display your custom control 
                // in the Toolbox and in the Choose Items... dialog box. 
                builder.AddCustomAttributes(typeof(TailspinToysControl), new ToolboxBrowsableAttribute(true));

                return builder.CreateTable();
            }
        }
    }
}

Enregistrez la solution.

Création des icônes de boîte à outils au moment du design

Maintenant que vous disposez d'un assembly au moment du design, vous pouvez créer vos icônes de boîte à outils personnalisées et les ajouter au projet en tant que ressources incorporées. Vous allez créer deux icônes, une pour Visual Studio et une pour Expression Blend.

Pour créer l'icône de boîte à outils au moment du design pour Visual Studio

Ajoutez un nouveau fichier bitmap au projet TailspinToysControlLibrary.Design. Nommez le fichier bitmap TailspinToysControlLibrary.TailspinToysControl.VisualStudio.24bit.48x48.bmp.
Dans la fenêtre Propriétés, affectez la valeur 24 bits à la propriété Couleurs de la bitmap.
À l'aide de l'Outil Texte, peignez METADATA dans la bitmap, ce qui indique quand l'icône est définie à partir des métadonnées du concepteur.
Dans l'Explorateur de solutions, sélectionnez le fichier bitmap.
Dans la fenêtre Propriétés, affectez la valeur Ressource incorporée à la propriété Action de génération.
Ajoutez un nouveau fichier bitmap au projet TailspinToysControlLibrary.Design. Nommez le fichier bitmap TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.bmp.

Notes

Blend charge uniquement les fichiers .png sous forme d'icônes. Vous devez donc utiliser le programme Paint externe pour créer l'icône Blend.
Cliquez avec le bouton droit dans l'Éditeur d'images et sélectionnez Ouvrir l'éditeur externe dans le menu contextuel.

L'application Paint s'ouvre.
À l'aide de l'Outil Texte, peignez BLEND dans la bitmap, ce qui indique que l'icône est destinée à être utilisée dans la fenêtre Composants d'Expression Blend.
Enregistrez l'image en tant que fichier .png.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet TailspinToysControlLibrary.Design, pointez sur Ajouter, puis sélectionnez Élément existant dans le menu contextuel.
Dans la boîte de dialogue Ajouter un élément existant, sélectionnez TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.png et cliquez sur Ajouter.
Dans l'Explorateur de solutions, sélectionnez le fichier image .png.
Dans la fenêtre Propriétés, affectez la valeur Ressource incorporée à la propriété Action de génération.
Supprimez le fichier bitmap TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.bmp vide.
Générez la solution.

Test des icônes de boîte à outils

Testez votre icône de boîte à outils personnalisée en ajoutant TailspinToysControl à la boîte à outils.

Pour tester l'icône de boîte à outils

Ajoutez à la solution un nouveau projet d'application WPF en Visual Basic ou Visual C# nommé TestApplication.

MainWindow.xaml s'ouvre dans le Concepteur WPF. Dans la Boîte à outils, TailspinToysControl s'affiche dans l'onglet Contrôles TailspinToysControlLibrary. L'icône de contrôle par défaut est affichée.

Notes

L'icône incorporée dans l'assembly au moment de l'exécution du contrôle n'est pas affichée. Il s'agit d'une limitation de la fonctionnalité de remplissage automatique de la boîte à outils.
Dans la Boîte à outils, cliquez avec le bouton droit sur TailspinToysControl, sélectionnez Supprimer dans le menu contextuel, puis cliquez sur OK.

TailspinToysControl est supprimé de la Boîte à outils.
Dans la Boîte à outils, cliquez avec le bouton droit sur l'onglet Contrôles TailspinToysControlLibrary et sélectionnez Choisir les éléments dans le menu contextuel.

La boîte de dialogue Choisir des éléments de boîte à outils s'affiche.
Cliquez sur l'onglet Composants WPF. Pour plus d'informations, consultez Composants WPF, onglet de la boîte de dialogue Choisir des éléments de boîte à outils.
Cliquez sur Parcourir et naviguez jusqu'au dossier TailspinToysControlLibrary\TailspinToysControlLibrary\bin.
Double-cliquez sur TailspinToysControlLibrary.dll pour le sélectionner.

Les détails de l'assembly TailspinToysControlLibrary s'affichent dans la boîte de dialogue Choisir des éléments de boîte à outils. Votre icône au moment du design personnalisée s'affiche dans la zone de groupe TailspinToysControl.
Cliquez sur OK.

TailspinToysControl s'affiche dans la Boîte à outils avec l'icône TailspinToysControlLibrary.TailspinToysControl.VisualStudio.24bit.48x48.bmp, qui remplace l'icône dans l'assembly au moment de l'exécution.

Étapes suivantes

Vous pouvez également charger votre contrôle personnalisé et l'assembly au moment du design dans Expression Blend. À partir d'Expression Blend 4, votre icône TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.png s'affiche dans la fenêtre Composants lorsque vous ajoutez une référence de projet à l'assembly TailspinToysControlLibrary.dll.
Vous pouvez déployer vos assemblys au moment de l'exécution et vos assemblys au moment du design à l'aide de la procédure d'inscription AssemblyFoldersEx. Pour plus d'informations, consultez Déploiement d'un contrôle personnalisé et d'assemblys au moment du design.

Voir aussi

Partager via