Tutorial: Implementar un editor de valores insertados

Artículo
08/10/2011

El modelo de extensibilidad de WPF Designer for Visual Studio le permite crear editores de valores personalizados para propiedades en la ventana Propiedades en tiempo de diseño. Los editores pueden ser editores insertados, que permiten modificar valores directamente en la ventana Propiedades o editores extendidos, que permiten proporcionar una interfaz de usuario adicional para modificar una propiedad fuera de la ventana Propiedades. Para mostrar cómo se crea un editor insertado, en este tutorial se ofrecen los procedimientos paso a paso para crear un editor de valores insertados para la propiedad Background de un control.

En este tutorial realizará las siguientes tareas:

Crear un proyecto de control personalizado de WPF.
Cree un editor insertado que se pueda utilizar para modificar el valor de la propiedad en la ventana Propiedades.
Cree una clase que herede de PropertyValueEditor que se utiliza para conectar el editor insertado con la clase para la que desea proporcionar la edición personalizada.
Cree una clase que implemente la interfaz IProvideAttributeTable para registrar el nuevo editor insertado.
Pruebe el editor de valores insertados en tiempo de diseño.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Visual Studio 2010.

Crear el control personalizado

El primer paso consiste en crear el proyecto para el control personalizado. El control es un botón simple con poco código en tiempo de diseño, que utiliza el método GetIsInDesignMode para implementar un comportamiento en tiempo de diseño.

Para crear el control personalizado

Cree un nuevo proyecto de biblioteca de controles personalizados de WPF en Visual C# denominado CustomControlLibrary.

El código de CustomControl1 se abre en el editor de código.

En el editor de código para CustomControl1, reemplace el código del espacio de nombres CustomControlLibrary por el siguiente código:

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

Establezca la ruta de acceso de los resultados del proyecto en "bin\".
Genere la solución.

Crear la plantilla para el editor insertado

El editor insertado se puede crear con una plantilla de datos XAML. Ésta será una lista desplegable simple que muestra una lista de opciones de color para la propiedad Background.

Para crear la plantilla para el editor insertado

Agregue a la solución un nuevo proyecto de biblioteca de controles personalizados de WPF en Visual C# denominado CustomControlLibrary.Design.

El código de CustomControl1 se abre en el editor de código.
En el Explorador de soluciones, elimine el archivo CustomControl1 del proyecto CustomControlLibrary.Design.
Agregue una referencia a los siguientes ensamblados de WPF Designer.
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
Agregue una referencia al proyecto CustomControlLibrary.
Establezca la ruta de acceso de salida del proyecto en ".. \CustomControlLibrary\bin\". De este modo, el ensamblado del control y el ensamblado de metadatos permanecen en la misma carpeta, lo que permite que los diseñadores detecten los metadatos.
Agregue al proyecto CustomControlLibrary.Design una nueva clase denominada EditorResources.

En el editor de código para EditorResources, reemplace el código generado automáticamente por el código siguiente.

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

En el menú Proyecto, haga clic en Agregar diccionario de recursos.
Asigne al archivo el nombre de EditorResources.xaml y haga clic en Agregar.

En la vista XAML de EditorResources, reemplace el XAML generado automáticamente por el XAML siguiente.

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

Compile la solución.

Encapsular la plantilla y registrar el editor insertado

Ahora que ha creado la plantilla del editor insertado, debe crear una clase que hereda PropertyValueEditor para utilizar la plantilla como un editor personalizado y debe registrar el nuevo editor insertado.

Para encapsular y registrar el editor insertado

Agregue al proyecto CustomControlLibrary.Design una nueva clase denominada BrushInlineEditor.

En el editor de código para BrushInlineEditor, reemplace el código generado automáticamente por el código siguiente.

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

Agregue al proyecto CustomControlLibrary.Design una nueva clase denominada Metadata.

En el editor de código para Metadata, reemplace el código generado automáticamente por el código siguiente.

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

Compile la solución.

Probar el editor de valores insertados

El editor de valores insertados ya está terminado y listo para su uso. Sólo queda probarlo. Para probar el editor insertado, agregará al proyecto una aplicación de WPF, agregará el control personalizado a la aplicación de WPF y verá el editor insertado en acción.

Para probar el editor de valores insertados

Agregue a la solución un nuevo proyecto de aplicación de WPF en Visual C# denominado DemoApplication.

MainWindow.xaml se abre en WPF Designer.
Agregue una referencia al proyecto CustomControlLibrary.
En la vista XAML de MainWindow.xaml, reemplace el XAML generado automáticamente por el XAML siguiente. Este XAML agrega una referencia al espacio de nombres CustomControlLibrary y agrega el control personalizado CustomControl1. El botón aparece en la Vista de diseño con un fondo rojo, que indica que el control se encuentra en modo de diseño. Si el botón no aparece, es posible que tenga que hacer clic en la barra de información situada en la parte superior del diseñador para volver a cargar la vista.
```
    <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>
```
Seleccione el control en la Vista de diseño.
En la ventana Propiedades, haga clic en el botón de lista desplegable situado junto a la propiedad Background. En lugar de la lista de colores predeterminada, se mostrará una pequeña lista de opciones de color, que representa al nuevo editor insertado. Las opciones de color son Rojo, Azul y Verde.
Seleccione un color de la lista desplegable. El color de fondo del control personalizado cambiará a ese color.

Pasos siguientes

Para obtener información sobre un editor de propiedades más completo, vea Tutorial: Implementar un editor de colores, que muestra cómo crear un editor extendido.