Procedura dettagliata: implementazione di un editor di valori inline

Articolo
08/11/2011

Il modello di estensibilità per WPF Designer per Visual Studio consente di creare in fase di progettazione editor di valori personalizzati per le proprietà nella finestra Proprietà. Gli editor possono essere editor in linea, che consentono di modificare i valori direttamente nella finestra Proprietà, o editor estesi, che consentono di fornire un'interfaccia utente aggiuntiva per modificare una proprietà al di fuori della finestra Proprietà. Per dimostrare come creare un editor in linea, in questa procedura dettagliata vengono forniti i passaggi per la creazione di un editor di valori in linea per la proprietà Background di un controllo.

Questa procedura dettagliata prevede l'esecuzione delle attività seguenti:

Creare il progetto di controllo personalizzato WPF.
Creare un editor in linea che può essere utilizzato per modificare il valore di proprietà nella finestra Proprietà.
Creare una classe che eredita da PropertyValueEditor utilizzata per connettere l'editor in linea alla classe per la quale si desidera fornire funzionalità di modifica personalizzate.
Creare una classe che implementa l'interfaccia IProvideAttributeTable per registrare il nuovo editor inline.
Testare l'editor di valori in linea in fase di progettazione.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

Visual Studio 2010.

Creazione del controllo personalizzato

Il primo passaggio consiste nella creazione del progetto per il controllo personalizzato. Il controllo è un semplice pulsante con una piccola quantità di codice Design-Time che utilizza il metodo GetIsInDesignMode per implementare un comportamento in fase di progettazione.

Per creare il controllo personalizzato

In Visual C# creare un nuovo progetto di libreria di controlli personalizzati WPF denominato CustomControlLibrary.

Il codice per CustomControl1 verrà aperto nell'editor di codice.

Nell'editor del codice per CustomControl1, sostituire il codice nello spazio dei nomi CustomControlLibrary con il codice seguente:

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

Impostare il percorso di output del progetto su "bin\".
Compilare la soluzione.

Creazione del modello per l'editor in linea

L'editor in linea può essere creato con un modello di dati XAML. Si tratterà di un semplice elenco a discesa che visualizza un elenco di scelte di colori per la proprietà Background.

Per creare un modello per l'editor in linea

In Visual C# aggiungere alla soluzione un nuovo progetto di libreria di controlli personalizzati WPF denominato CustomControlLibrary.Design.

Il codice per CustomControl1 verrà aperto nell'editor del codice.
In Esplora soluzioni eliminare il file CustomControl1 dal progetto CustomControlLibrary.Design.
Aggiungere un riferimento ai seguenti assembly di WPF Designer.
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
Aggiungere un riferimento al progetto CustomControlLibrary.
Impostare il percorso di output del progetto su ".. \CustomControlLibrary\bin\". In questo modo l'assembly del controllo e l'assembly dei metadati verranno mantenuti nella stessa cartella, consentendo l'individuazione di metadati per le finestre di progettazione.
Aggiungere una nuova classe denominata EditorResources al progetto CustomControlLibrary.Design.

Nell'editor del codice per EditorResources sostituire il codice generato automaticamente con il codice seguente.

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

Scegliere Aggiungi dizionario risorse dal menu Progetto.
Denominare il file EditorResources.xaml e fare clic su Aggiungi.

In visualizzazione XAML per EditorResources, sostituire il codice XAML generato automaticamente con il codice XAML seguente.

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

Compilare la soluzione.

Incapsulamento del modello e registrazione dell'editor in linea

Una volta creato il modello per l'editor in linea, è necessario creare una classe che eredita da PropertyValueEditor per utilizzare il modello come editor personalizzato, quindi occorre registrare il nuovo editor in linea.

Per incapsulare e registrare l'editor in linea

Aggiungere una nuova classe denominata BrushInlineEditor al progetto CustomControlLibrary.Design.

Nell'editor del codice per BrushInlineEditor sostituire il codice generato automaticamente con il codice seguente.

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

Aggiungere una nuova classe denominata Metadata al progetto CustomControlLibrary.Design.

Nell'editor del codice per Metadata sostituire il codice generato automaticamente con il codice seguente.

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

Compilare la soluzione.

Verifica dell'editor di valori in linea

L'editor di valori in linea è a questo punto completo e pronto per l'utilizzo. Resta solo da verificarne il funzionamento. Per verificare l'editor in linea, verrà aggiunta un'applicazione WPF al progetto, verrà aggiunto il controllo personalizzato all'applicazione WPF e sarà possibile visualizzare l'editor in linea in azione.

Per verificare l'editor di valori in linea

In Visual C# aggiungere alla soluzione un nuovo progetto di applicazione WPF denominato DemoApplication.

MainWindow.xaml viene aperto in WPF Designer.
Aggiungere un riferimento al progetto CustomControlLibrary.
In visualizzazione XAML per MainWindow.xaml sostituire il codice XAML generato automaticamente con il codice XAML seguente. Con questo codice XAML viene aggiunto un riferimento allo spazio dei nomi CustomControlLibrary e viene aggiunto il controllo personalizzato CustomControl1. Il pulsante appare in visualizzazione Progettazione con lo sfondo rosso a indicare che il controllo è nella modalità progettazione. Se il pulsante non viene visualizzato, può essere necessario fare clic sulla barra informazioni nella parte superiore della finestra di progettazione per ricaricare la visualizzazione.
```
    <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>
```
In visualizzazione Progettazione, selezionare il controllo.
Nella finestra Proprietà fare clic sul pulsante a discesa posto accanto alla proprietà Background. Un breve elenco di scelte di colori, rappresentante il nuovo editor in linea, viene visualizzato al posto dell'elenco predefinito dei colori. Le scelte di colori sono Rosso, Blu e Verde.
Selezionare un colore dall'elenco a discesa. Il colore di sfondo del controllo personalizzato cambierà in base al colore selezionato.

Passaggi successivi

Per un editor della proprietà più coinvolto, vedere Procedura dettagliata: implementazione di un editor di colori nel quale viene mostrato come creare un editor esteso.