Exemplarische Vorgehensweise: Implementieren eines Inlinewert-Editors

Artikel
08/10/2011

Das Erweiterbarkeitsmodell für den WPF Designer für Visual Studio ermöglicht es Ihnen, benutzerdefinierte Wert-Editoren für Eigenschaften im Eigenschaftenfenster zur Entwurfszeit zu erstellen. Bei diesen Editoren kann es sich entweder um Inline-Editoren handeln, die es Ihnen ermöglichen, Werte direkt im Eigenschaftenfenster zu bearbeiten, oder um erweiterte Editoren, mit denen Sie eine zusätzliche Benutzeroberfläche für das Bearbeiten einer Eigenschaft außerhalb des Eigenschaftenfensters bereitstellen können. In dieser exemplarischen Vorgehensweise wird anhand von schrittweisen Anleitungen für das Erstellen eines Inlinewert-Editors für die Background-Eigenschaft eines Steuerelements veranschaulicht, wie Sie einen Inline-Editor erstellen.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

Erstellen eines benutzerdefinierten WPF-Steuerelementbibliothek-Projekts
Erstellen eines Inline-Editors, den Sie zum Bearbeiten des Eigenschaftswerts im Eigenschaftenfenster verwenden können
Erstellen einer Klasse, die von dem PropertyValueEditor-Element erbt, welches verwendet wird, um den Inline-Editor mit der Klasse zu verbinden, für die Sie die benutzerdefinierte Bearbeitung bereitstellen möchten
Erstellen Sie eine Klasse, die die IProvideAttributeTable-Schnittstelle implementiert, um den neuen Inline-Editor zu registrieren.
Testen des Inlinewert-Editors zur Entwurfszeit

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

Visual Studio 2010.

Erstellen des benutzerdefinierten Steuerelements

Zuerst wird das Projekt für das benutzerdefinierte Steuerelement erstellt. Bei dem Steuerelement handelt es sich um eine einfache Schaltfläche mit wenig Entwurfszeitcode, für die eine GetIsInDesignMode-Methode zum Implementieren eines Entwurfszeitverhaltens verwendet wird.

So erstellen Sie das benutzerdefinierte Steuerelement

Erstellen Sie ein neues benutzerdefiniertes WPF-Steuerelementbibliothek-Projekt in Visual C# mit dem Namen CustomControlLibrary.

Der Code für CustomControl1 wird im Code-Editor geöffnet.

Ersetzen Sie im Code-Editor für CustomControl1 den Code im CustomControlLibrary-Namespace durch den folgenden Code:

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";
            }
        }
    }
}

Legen Sie den Ausgabepfad des Projekts auf "bin\" fest.
Erstellen Sie die Projektmappe.

Erstellen der Vorlage für den Inline-Editor

Der Inline-Editor kann mithilfe einer XAML-Datenvorlage erstellt werden. Es handelt sich dabei um eine einfache Dropdownliste, in der eine Anzahl von möglichen Farben für die Background-Eigenschaft angezeigt wird.

So erstellen Sie die Vorlage für den Inline-Editor

Fügen Sie in Visual C# der Projektmappe ein neues Projekt mit einer benutzerdefinierten WPF-Steuerelementbibliothek mit dem Namen CustomControlLibrary.Design hinzu.

Der Code für CustomControl1 wird im Code-Editor geöffnet.
Löschen Sie im Projektmappen-Explorer die Datei CustomControl1 aus dem CustomControlLibrary.Design-Projekt.
Fügen Sie einen Verweis auf die folgenden WPF-Designer-Assemblys hinzu.
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
Fügen Sie einen Verweis auf das CustomControlLibrary-Projekt hinzu.
Legen Sie den Ausgabepfad des Projekts auf folgenden Pfad fest: ".. \CustomControlLibrary\bin\". Dadurch wird die Assembly des Steuerelements im gleichen Ordner wie die Metadatenassembly gespeichert, wodurch Designern die Metadatensuche ermöglicht wird.
Fügen Sie dem CustomControlLibrary.Design-Projekt eine neue Klasse mit dem Namen EditorResources hinzu.

Ersetzen Sie im Code-Editor für EditorResources den automatisch generierten Code durch den folgenden Code.

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

Klicken Sie im Menü Projekt auf Ressourcenwörterbuch hinzufügen.
Nennen Sie die Datei EditorResources.xaml, und klicken Sie auf Hinzufügen.

Ersetzen Sie in der XAML-Ansicht für EditorResources den automatisch generierten XAML-Code durch den folgenden XAML-Code.

    <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>

Erstellen Sie die Projektmappe.

Kapseln der Vorlage und Registrieren des Inline-Editors

Nachdem Sie die Vorlage für den Inline-Editor erstellt haben, müssen Sie eine Klasse erstellen, die von PropertyValueEditor erbt, um die Vorlage als benutzerdefinierten Editor zu verwenden, und Sie müssen den neuen Inline-Editor registrieren.

So kapseln und registrieren Sie den Inline-Editor

Fügen Sie dem CustomControlLibrary.Design-Projekt eine neue Klasse mit dem Namen BrushInlineEditor hinzu.

Ersetzen Sie im Code-Editor für BrushInlineEditor den automatisch generierten Code durch den folgenden Code.

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;
        }
    }
}

Fügen Sie dem CustomControlLibrary.Design-Projekt eine neue Klasse mit dem Namen Metadata hinzu.

Ersetzen Sie im Code-Editor für Metadata den automatisch generierten Code durch den folgenden Code.

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();
            }
        }
    }
}

Erstellen Sie die Projektmappe.

Testen des Inlinewert-Editors

Der Inlinewert-Editor ist nun vollständig und einsatzbereit. Jetzt muss er nur noch getestet werden. Um den Inline-Editor zu testen, fügen Sie eine WPF-Anwendung zu Ihrem Projekt hinzu, fügen das benutzerdefinierte Steuerelement zur WPF-Anwendung hinzu und sehen sich den Inline-Editor in Aktion an.

So testen Sie den Inlinewert-Editor

Fügen Sie der Projektmappe ein neues WPF-Anwendungsprojekt in Visual C# mit dem Namen DemoApplication hinzu.

Die Datei MainWindow.xaml wird im WPF-Designer geöffnet.
Fügen Sie einen Verweis auf das CustomControlLibrary-Projekt hinzu.
Ersetzen Sie in der XAML-Ansicht für MainWindow.xaml den automatisch generierten XAML-Code durch folgenden XAML-Code. Mit diesem XAML-Code werden ein Verweis auf den CustomControlLibrary-Namespace sowie das benutzerdefinierte CustomControl1-Steuerelement hinzugefügt. Die Schaltfläche wird in der Entwurfsansicht mit einem roten Hintergrund angezeigt, was darauf hinweist, dass sich das Steuerelement im Entwurfsmodus befindet. Wenn die Schaltfläche nicht angezeigt wird, müssen Sie möglicherweise auf die Informationsleiste am oberen Rand des Designers klicken, um die Ansicht zu aktualisieren.
```
    <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>
```
Wählen Sie das Steuerelement in der Entwurfsansicht aus.
Klicken Sie im Eigenschaftenfenster neben der Background-Eigenschaft auf die Dropdown-Schaltfläche. Statt der Standardliste der Farben wird eine kleine Liste der möglichen Farben angezeigt. Dies ist der neue Inline-Editor. Die Farben, die zur Auswahl stehen, sind Rot, Blau und Grün.
Wählen Sie in der Dropdownliste eine Farbe aus. Die Hintergrundfarbe des benutzerdefinierten Steuerelements ändert sich entsprechend.

Nächste Schritte

Informationen zu einem komplexeren Eigenschaften-Editor finden Sie in Exemplarische Vorgehensweise: Implementieren eines Farb-Editors. Hier wird veranschaulicht, wie ein erweiterter Editor erstellt wird.