Tutorial: Proporcionar metadatos para los iconos del cuadro de herramientas

Artículo
08/10/2011

En este tutorial se muestra cómo proporcionar iconos de cuadro de herramientas para distintos diseñadores, por ejemplo en Visual Studio y Expression Blend, en una biblioteca de controles personalizados de Windows Presentation Foundation (WPF). Al agregar el control personalizado al cuadro de herramientas de un diseñador, el icono correspondiente aparece junto al nombre del control.

WPF Designer for Visual Studio permite proporcionar iconos personalizados de cuadro de herramientas para distintos diseñadores. Por ejemplo, puede establecer distintos iconos para el control personalizado en Visual Studio y Expression Blend. Los iconos proporcionados por la implementación en tiempo de diseño invalidan el icono predeterminado en el ensamblado en tiempo de ejecución del control.

En este tutorial realizará las siguientes tareas:

Crear un proyecto de biblioteca de controles personalizados de WPF con un mapa de bits de icono incrustado.
Crear un ensamblado independiente para los metadatos en tiempo de diseño que invalida el icono predeterminado del cuadro de herramientas.
Probar el icono del control en tiempo de diseño.

Cuando termine, sabrá cómo reemplazar el icono predeterminado en tiempo de ejecución por un control personalizado en tiempo de diseño.

Nota

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Visual Studio 2010.

Crear un control personalizado con un icono de cuadro de herramientas

Para crear un icono de cuadro de herramientas personalizado para un control, se agrega una imagen como recurso incrustado al proyecto del control.

Para crear un control personalizado con un icono de cuadro de herramientas

Cree un nuevo proyecto de biblioteca de controles personalizados de WPF en Visual Basic o Visual C# denominado TailspinToysControlLibrary.
Cambie el nombre del archivo de código CustomControl1 a TailspinToysControl.
Agregue un icono de cuadro de herramientas denominado TailspinToysControl.icon.bmp como recurso incrustado. Para obtener más información, vea Tutorial: Crear un icono de cuadro de herramientas personalizado para un control.
Use la Herramienta de texto para escribir PREDETERMINADO en el mapa de bits, que indica cuándo carga el cuadro de herramientas el icono predeterminado del ensamblado del control.
Establezca la ruta de acceso de salida del proyecto en ".. \TailspinToysControlLibrary\bin\".
Compile la solución.

Crear el ensamblado de metadatos en tiempo de diseño

El código en tiempo de diseño se implementa en ensamblados de metadatos especiales. Para este tutorial, los metadatos personalizados son compatibles con Visual Studio y Expression Blend y se implementan en un ensamblado denominado TailspinToysControlLibrary.Design.

Para crear el ensamblado de metadatos en tiempo de diseño

Cree un ensamblado en tiempo de diseño denominado TailspinToysControlLibrary.Design. Para obtener más información, vea Tutorial: Proporcionar metadatos personalizados en tiempo de diseño.
Abra el archivo de código RegisterMetadata en el editor de código.

Reemplace el código generado automáticamente por el código siguiente. Este código crea un objeto AttributeTable que asocia los atributos personalizados en tiempo de diseño a la clase 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();
            }
        }
    }
}

Guarde la solución.

Crear los iconos de cuadro de herramientas en tiempo de diseño

Ahora que tiene un ensamblado en tiempo de diseño, puede crear iconos personalizados de cuadro de herramientas y agregarlos al proyecto como recursos incrustados. Se crearán dos iconos, uno para Visual Studio y otro para Expression Blend.

Para crear el icono de cuadro de herramientas en tiempo de diseño para Visual Studio

Agregue un nuevo archivo de mapa de bits al proyecto TailspinToysControlLibrary.Design. Asigne el nombre TailspinToysControlLibrary.TailspinToysControl.VisualStudio.24bit.48x48.bmp al archivo de mapa de bits.
En la ventana Propiedades, establezca la propiedad Colors del mapa de bits en 24 bit.
Use la Herramienta de texto para escribir METADATOS en el mapa de bits, que indica cuándo se establece el icono desde los metadatos del diseñador.
En el Explorador de soluciones, seleccione el mapa de bits.
En la ventana Propiedades, establezca la propiedad Build Action en Recurso incrustado.
Agregue un nuevo archivo de mapa de bits al proyecto TailspinToysControlLibrary.Design. Asigne el nombre TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.bmp al archivo de mapa de bits.

Nota

Blend solo carga archivos .png como iconos, por lo que se debe usar el programa Paint externo para crear el icono de Blend.
Haga clic con el botón secundario del mouse en el Editor de imágenes y seleccione Abrir editor externo en el menú contextual.

Se abre la aplicación Paint.
Use la Herramienta de texto para escribir BLEND en el mapa de bits, que indica que el icono se va a usar en la ventana Activos de Expression Blend.
Guarde la imagen como archivo .png.
En el Explorador de soluciones, haga clic con el botón secundario en el proyecto TailspinToysControlLibrary.Design, elija Agregar y seleccione Elemento existente en el menú contextual.
En el cuadro de diálogo Agregar elemento existente, seleccione TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.png y, a continuación, haga clic en Agregar.
En el Explorador de soluciones, seleccione el archivo de imagen .png.
En la ventana Propiedades, establezca la propiedad Build Action en Recurso incrustado.
Elimine el archivo de mapa de bits vacío TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.bmp.
Compile la solución.

Probar los iconos de cuadro de herramientas

Pruebe el icono de cuadro de herramientas personalizado agregando TailspinToysControl al cuadro de herramientas.

Para probar el icono de cuadro de herramientas

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

MainWindow.xaml se abre en WPF Designer. En el cuadro de herramientas, TailspinToysControl aparece en la pestaña Controles TailspinToysControlLibrary. Se muestra el icono de control predeterminado.

Nota

El icono incrustado en el ensamblado en tiempo de ejecución del control no se muestra. Se trata de una limitación de la característica de relleno automático del cuadro de herramientas.
En el cuadro de herramientas, haga clic con el botón secundario en TailspinToysControl, seleccione Eliminar en el menú contextual y, a continuación, haga clic en Aceptar.

TailspinToysControl se quita del cuadro de herramientas.
En el cuadro de herramientas, haga clic con el botón secundario en la pestaña Controles TailspinToysControlLibrary y, a continuación, seleccione Elegir elementos en el menú contextual.

Se abrirá el cuadro de diálogo Elegir elementos del cuadro de herramientas.
Haga clic en la pestaña Componentes WPF. Para obtener más información, vea Componentes WPF (Pestaña), Elegir elementos del cuadro de herramientas (Cuadro de diálogo).
Haga clic en Examinar y navegue hasta la carpeta TailspinToysControlLibrary\TailspinToysControlLibrary\bin.
Haga doble clic en TailspinToysControlLibrary.dll para seleccionarlo.

En el cuadro de diálogo Elegir elementos del cuadro de herramientas aparecen detalles del ensamblado TailspinToysControlLibrary. El icono en tiempo de diseño personalizado aparece en el cuadro de grupo TailspinToysControl.
Haga clic en Aceptar.

TailspinToysControl aparece en el cuadro de herramientas con el icono TailspinToysControlLibrary.TailspinToysControl.VisualStudio.24bit.48x48.bmp, que invalida el icono en el ensamblado en tiempo de ejecución.

Pasos siguientes

También puede cargar el control personalizado y el ensamblado en tiempo de diseño en Expression Blend. A partir de Expression Blend 4, el icono TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.png aparece en la ventana Activos al agregar una referencia de proyecto al ensamblado TailspinToysControlLibrary.dll.
Para implementar los ensamblados en tiempo de ejecución y de diseño, use el procedimiento de registro de AssemblyFoldersEx. Para obtener más información, vea Implementar un control personalizado y ensamblados en tiempo de diseño.

Vea también

Compartir a través de