Share via

Procédure pas à pas : implémentation d'un éditeur de valeurs inline

  • Article

Le modèle d'extensibilité du Concepteur WPF pour Visual Studio permet de créer des éditeurs de valeurs personnalisés pour les propriétés dans la fenêtre Propriétés au moment du design. Les éditeurs peuvent être des éditeurs inline, qui vous permettent de modifier des valeurs directement dans la fenêtre Propriétés, ou des éditeurs étendus, qui vous permettent de fournir une interface utilisateur supplémentaire pour modifier une propriété en dehors de la fenêtre Propriétés. Pour montrer comment créer un éditeur inline, cette procédure pas à pas fournit les procédures détaillées à suivre pour créer un éditeur de valeurs inline pour la propriété Background d'un contrôle.

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

  • créer un projet de contrôle personnalisé WPF ;

  • créer un éditeur inline qui peut être utilisé pour modifier la valeur de propriété dans la fenêtre Propriétés ;

  • créer une classe qui hérite de PropertyValueEditor servant à connecter l'éditeur inline à la classe pour laquelle vous souhaitez fournir la modification personnalisée ;

  • créer une classe qui implémente l'interface IProvideAttributeTable pour enregistrer votre nouvel éditeur inline ;

  • tester l'éditeur de valeurs inline au moment du design.

Composants requis

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

  • Visual Studio 2010.

Création du contrôle personnalisé

La première étape consiste à créer le projet pour le contrôle personnalisé. Le contrôle est un bouton simple avec une petite portion de code au moment du design, qui utilise la méthode GetIsInDesignMode pour implémenter un comportement au moment du design.

Pour créer le contrôle personnalisé

  1. Créez un projet de bibliothèque de contrôles personnalisés WPF dans Visual C# nommé CustomControlLibrary.

    Le code pour CustomControl1 s'ouvre dans l'éditeur de code.

  2. Dans l'éditeur de code de CustomControl1, remplacez le code dans l'espace de noms CustomControlLibrary par le code suivant :

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CustomControlLibrary
{
    public class CustomControl1 : Button
    {
        public CustomControl1()
        {
            if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "In design mode";
            }
        }
    }
}

  3. Le chemin de sortie du projet doit être "bin\".

  4. Générez la solution.

Création du modèle pour l'éditeur inline

L'éditeur inline peut être créé avec un modèle de données XAML. Il s'agit d'une simple liste déroulante qui affiche la liste des couleurs disponibles pour la propriété Background.

Pour créer le modèle pour l'éditeur inline

  1. Ajoutez à la solution un nouveau projet de bibliothèque de contrôles personnalisés WPF dans Visual C# nommé CustomControlLibrary.Design.

    Le code de CustomControl1 s'ouvre dans l'éditeur de code.

  2. Dans l'Explorateur de solutions, supprimez le fichier CustomControl1 du projet CustomControlLibrary.Design.

  3. Ajoutez une référence aux assemblys Concepteur WPF suivants.

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  4. Ajoutez une référence au projet CustomControlLibrary.

  5. Affectez au chemin de sortie du projet la valeur \CustomControlLibrary\bin\". Cela permet de garder l'assembly du contrôle et l'assembly de métadonnées dans le même dossier, ce qui active la découverte de métadonnées pour les concepteurs.

  6. Ajoutez une nouvelle classe nommée EditorResources au projet CustomControlLibrary.Design.

  7. Dans l'éditeur de code pour EditorResources, remplacez le code généré automatiquement par le code suivant.

    namespace CustomControlLibrary.Design
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Windows;
    public partial class EditorResources : ResourceDictionary
    {
        public EditorResources()
            : base()
        {
            InitializeComponent();
        }
    }
}

  8. Dans le menu Projet, cliquez sur Ajouter un dictionnaire de ressources.

  9. Nommez le fichier EditorResources.xaml, puis cliquez sur Ajouter.

  10. Dans l'affichage de EditorResources en mode XAML, remplacez le code XAML généré automatiquement par le code XAML suivant.

        <ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:PropertyEditing="clr-namespace:Microsoft.Windows.Design.PropertyEditing;assembly=Microsoft.Windows.Design.Interaction"
    xmlns:Local="clr-namespace:CustomControlLibrary.Design"
    xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:Class="CustomControlLibrary.Design.EditorResources">
    <DataTemplate x:Key="BrushInlineEditorTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <ComboBox Grid.Column="0" Text="{Binding StringValue}">
                <ComboBoxItem>Red</ComboBoxItem>
                <ComboBoxItem>Blue</ComboBoxItem>
                <ComboBoxItem>Green</ComboBoxItem>
            </ComboBox>
        </Grid>
    </DataTemplate>
</ResourceDictionary>

  11. Générez la solution.

Encapsulation du modèle et inscription de l'éditeur inline

Après avoir créé le modèle de l'éditeur inline, vous devez créer une classe qui hérite de PropertyValueEditor pour utiliser le modèle en tant qu'éditeur personnalisé. Vous devez également inscrire le nouvel éditeur inline.

Pour encapsuler et inscrire votre éditeur inline

  1. Ajoutez une nouvelle classe nommée BrushInlineEditor au projet CustomControlLibrary.Design.

  2. Dans l'éditeur de code pour BrushInlineEditor, remplacez le code généré automatiquement par le code suivant.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using Microsoft.Windows.Design.PropertyEditing;

namespace CustomControlLibrary.Design
{
    public class BrushInlineEditor : PropertyValueEditor
    {
        private EditorResources res = new EditorResources();

        public BrushInlineEditor()
        {
            this.InlineEditorTemplate = res["BrushInlineEditorTemplate"] as DataTemplate;
        }
    }
}

  3. Ajoutez une nouvelle classe nommée Metadata au projet CustomControlLibrary.Design.

  4. Dans l'éditeur de code pour Metadata, remplacez le code généré automatiquement par le code suivant.

    using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.Windows.Design.Metadata;
using System.ComponentModel;
using Microsoft.Windows.Design.PropertyEditing;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows;
using CustomControlLibrary;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(CustomControlLibrary.Design.Metadata))]

namespace CustomControlLibrary.Design
{
    // Container for any general design-time metadata to initialize.
    // Designers look for a type in the design-time assembly that 
    // implements IProvideAttributeTable. If found, designers instantiate 
    // this class and access its AttributeTable property automatically.
    internal class Metadata : IProvideAttributeTable
    {
        // Accessed by the designer to register any design-time metadata.
        public AttributeTable AttributeTable
        {
            get
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();
                builder.AddCustomAttributes
                    (typeof(CustomControl1),
                    "Background",
                    PropertyValueEditor.CreateEditorAttribute(
                        typeof(BrushInlineEditor)));

                return builder.CreateTable();
            }
        }
    }
}

  5. Générez la solution.

Test de l'éditeur de valeurs inline

Votre éditeur de valeurs inline est à présent terminé et prêt à être utilisé. Il ne reste plus qu'à le tester. Pour tester l'éditeur inline, vous ajoutez une application WPF à votre projet, ajoutez le contrôle personnalisé à votre application WPF et affichez l'éditeur inline en action.

Pour tester l'éditeur de valeurs inline

  1. Ajoutez à la solution un nouveau projet d'application WPF dans Visual C# nommé DemoApplication.

    MainWindow.xaml s'ouvre dans le Concepteur WPF.

  2. Ajoutez une référence au projet CustomControlLibrary.

  3. Dans la vue XAML pour MainWindow.xaml, remplacez le code XAML généré automatiquement par le code XAML suivant. Ce code XAML ajoute une référence à l'espace de noms CustomControlLibrary ainsi que le contrôle personnalisé CustomControl1. Le bouton apparaît en mode Design avec un arrière-plan rouge, indiquant que le contrôle est en mode Design. Si le bouton ne s'affiche pas, il peut s'avérer nécessaire de cliquer sur la barre d'informations, située dans la partie supérieure du concepteur, pour recharger la vue.

        <Window x:Class="DemoApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary">
    <Grid>
        <my:CustomControl1 Margin="30,30,30,30" Name="customControl11"></my:CustomControl1>
    </Grid>
</Window>

  4. En mode Design, sélectionnez le contrôle.

  5. Dans la fenêtre Propriétés, cliquez sur le bouton de déroulement situé en regard de la propriété Background. Une petite liste de choix de couleurs, représentant votre nouvel éditeur inline, s'affiche à la place de la liste de couleurs par défaut. Les couleurs disponibles sont rouge, bleu et vert.

  6. Sélectionnez une couleur dans la liste déroulante. Cette couleur s'applique à l'arrière-plan du contrôle personnalisé.

Étapes suivantes

Pour un éditeur de propriétés plus impliqué, consultez la rubrique Procédure pas à pas : implémentation d'un éditeur de couleurs, qui montre comment créer un éditeur étendu.

Voir aussi

Tâches

Procédure pas à pas : implémentation d'un éditeur de couleurs

Comment : créer un éditeur de valeurs

Autres ressources

Création d'éditeurs personnalisés

Extensibilité du Concepteur WPF