Tutorial: Cambiar el comportamiento de una propiedad en tiempo de diseño

Actualización: noviembre 2007

Cuando se usa la extensibilidad para personalizar Windows Presentation Foundation (WPF) Designer for Visual Studio, normalmente se crean controles personalizados. A veces necesitará que una propiedad del control se comporte de manera diferente en tiempo de diseño y en tiempo de ejecución, y que a la vez el usuario pueda establecer el valor de la propiedad normalmente. Por ejemplo, supongamos que desea que el usuario pueda establecer la propiedad visible de un control en false, pero que el control siga estando visible en tiempo de diseño.

En este tutorial va a crear un Button personalizado y va a cambiar el comportamiento de las propiedades Background y Content. Para llevarlo a cabo, creará un DesignModeValueProvider y lo asociará al control personalizado. DesignModeValueProvider captura los cambios en la propiedad que realiza el usuario, se inserta una lógica propia en el método TranslatePropertyValue y DesignModeValueProvider pasa los nuevos valores al diseñador.

Nota importante:

Cuando utilice esta técnica, el comportamiento de una propiedad en el diseñador no coincide con el valor de la propiedad en la vista XAML. La vista XAML muestra el valor que el usuario especificó en tiempo de diseño. El valor en la vista XAML representa el comportamiento que va a mostrar la propiedad en tiempo de ejecución.

En este tutorial realizará las siguientes tareas:

  • Crear un proyecto de biblioteca de controles personalizados de WPF.

  • Cree un DesignModeValueProvider personalizado.

  • Crear un control de botón personalizado.

  • Asocie DesignModeValueProvider al control personalizado.

  • Crear una aplicación de prueba.

  • Pruebe el control personalizado.

Nota:

Los cuadros de diálogo y los comandos de menú que se ven pueden diferenciarse 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 en el menú Herramientas. Para obtener más información, vea Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2008

Crear un proyecto de biblioteca de controles personalizados de WPF.

Para crear el proyecto

  1. Cree un nuevo proyecto de biblioteca de controles personalizados de WPF en Visual Basic o en Visual C# denominado CustomButton.

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

  2. Agregue una referencia al siguiente ensamblado.

    • Microsoft.Windows.Design.Extensibility

  3. En el Explorador de soluciones, cambie el nombre del archivo de código a CustomButton.cs o CustomButton.vb.

    Si se muestra un cuadro de mensaje que le pregunta si desea cambiar el nombre de todas las referencias de este proyecto, haga clic en Sí.

  4. En Explorador de soluciones expanda la carpeta Temas y abra el archivo Generic.xaml.

    Generic.xaml se abrirá en WPF Designer.

  5. En la vista XAML, reemplace todas las apariciones de "CustomControl1" por "CustomButton" en el archivo Generic.xaml.

  6. En el menú Generar, haga clic en Generar solución.

Crear un DesignModeValueProvider personalizado

En este procedimiento creará un objeto DesignModeValueProvider personalizado. En el método TranslatePropertyValue, cambie la propiedad Content de Button para que se muestre en mayúsculas en el diseñador. Puede cambiar también la propiedad Background de Button para que aparezca con el color predeterminado del sistema en el diseñador. Estos cambios afectan sólo al diseñador. En tiempo de ejecución, las propiedades Content y Background aparecen con los valores establecidos por el usuario.

Nota:

En este procedimiento creará un objeto DesignModeValueProvider que administra dos propiedades diferentes. También puede crear varios objetos DesignModeValueProvider para administrar diferentes propiedades.

Para crear un DesignModeValueProvider personalizado

  1. Agregue una nueva clase denominada CustomButtonDesignModeValueProvider.cs o CustomButtonDesignModeValueProvider.vb al proyecto CustomButton.

    La nueva clase se abre en el editor de código.

  2. Agregue los siguientes espacios de nombres a la parte superior del archivo. Reemplace los existentes si hubiese alguno.

    Imports System
Imports System.Windows                  'SystemColors
Imports System.Windows.Media            'SolidColorBrush
Imports System.Windows.Controls         'Button
Imports Microsoft.Windows.Design.Model  'DesignModeValueProvider

    using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;   //DesignModeValueProvider

  3. Modifique la clase CustomButtonDesignModeValueProvider para heredar de DesignModeValueProvider.

    Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class

    class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

  4. Agregue un constructor a la clase. En el constructor se identifican las propiedades que desea capturar.

    Public Sub New()

    Properties.Add(Button.ContentProperty)
    Properties.Add(Button.BackgroundProperty)
End Sub

    public CustomButtonDesignModeValueProvider()
{
    Properties.Add(Button.ContentProperty);
    Properties.Add(Button.BackgroundProperty);
}

  5. Invalide el método TranslatePropertyValue en la clase. Aquí es donde se especifica el nuevo comportamiento de las propiedades en tiempo de diseño.

    Public Overrides Function TranslatePropertyValue(ByVal identifier As PropertyIdentifier, ByVal value As Object) As Object

    If identifier.DependencyProperty Is Button.ContentProperty Then

        Return value.ToString().ToUpper()
    End If

    If identifier.DependencyProperty Is Button.BackgroundProperty Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(identifier, value)
End Function

    public override object TranslatePropertyValue(PropertyIdentifier identifier, object value)
{
    if (identifier.DependencyProperty == Button.ContentProperty)
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DependencyProperty == Button.BackgroundProperty)
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(identifier, value);
}

  6. En el menú Generar, haga clic en Generar solución.

Crear un control de botón personalizado.

En este procedimiento va a crear el control personalizado. Creará un control personalizado simple que hereda de Button, pero no contiene ninguna funcionalidad personalizada adicional.

Para crear un control de botón personalizado

  1. Abra la clase CustomButton en el editor de código.

  2. Agregue los siguientes espacios de nombres a la parte superior del archivo. Reemplace los existentes si hubiese alguno.

    Imports System.Windows.Controls             'Button
Imports Microsoft.Windows.Design.Features   'Feature

    using System.Windows.Controls;              //Button
using Microsoft.Windows.Design.Features;    //Feature

  3. Reemplace la clase existente por la siguiente.

    Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class

    public class CustomButton : Button
{
    static CustomButton()
    {
    }
}

  4. En el menú Generar, haga clic en Generar solución.

Asociar DesignModeValueProvider al control personalizado

En este procedimiento asociará DesignModeValueProvider al control personalizado utilizando el atributo FeatureAttribute.

Nota:

También puede asociar DesignModeValueProvider a un control personalizado utilizando el almacén de metadatos. Para obtener más información, vea Almacén de metadatos y Cómo: Utilizar el almacén de metadatos.

Para asociar DesignModeValueProvider al control personalizado

  1. En el editor de código, busque la declaración de la clase CustomButton. Debe tener este aspecto:

    Public Class CustomButton
    Inherits Button

    public class CustomButton : Button

  2. Agregue un atributo Feature a la declaración de clase y especifique DesignModeValueProvider.

    <Feature(GetType(CustomButtonDesignModeValueProvider))> _
Public Class CustomButton
    Inherits Button

    [Feature(typeof(CustomButtonDesignModeValueProvider))]
public class CustomButton : Button

  3. En el menú Generar, haga clic en Generar solución.

Crear una aplicación de prueba

Para crear una aplicación de prueba

  1. Agregue a la solución un nuevo proyecto de aplicación de WPF denominado CustomButtonTestApplication.

    Window1.xaml se abrirá en el WPF Designer.

  2. En el Explorador de soluciones, haga clic con el botón secundario en el proyecto y, a continuación, en Establecer como proyecto de inicio.

  3. En el menú Proyecto, haga clic en Agregar referencia y utilice la ficha Proyectos para agregar una referencia al proyecto CustomButton.

  4. En el menú Generar, haga clic en Generar solución.

Probar el control personalizado

Para probar el control personalizado

  1. En la vista XAML de Window1.xaml, reemplace el XAML existente por el siguiente:

    <Window x:Class="CustomButtonTestApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cb="clr-namespace:CustomButton;assembly=CustomButton"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

  2. En la vista Diseño, seleccione el botón. Si fuera necesario, haga clic en la barra de información situada en la parte superior del diseñador para volver a cargar la vista.

  3. En la ventana Propiedades, busque la propiedad Background.

  4. Escriba Rojo y presione Entrar.

    El XAML se actualiza con el código Background="Red", pero el color del botón no cambia en la vista Diseño.

  5. En la ventana Propiedades, busque la propiedad Content.

  6. Escriba Hola a todos y presione Entrar.

    El XAML se actualiza con el contenido Hello World, pero el botón muestra el texto HELLO WORLD en la vista Diseño.

  7. En el menú Depurar, haga clic en Iniciar depuración.

    La aplicación se inicia y aparece la ventana. El botón es rojo y contiene el texto Hello World en tiempo de ejecución.

  8. Cierre la ventana.

Vea también

Tareas

Cómo: Cambiar el comportamiento de una propiedad en tiempo de diseño

Cómo: Determinar si un control personalizado está en tiempo de diseño o en tiempo de ejecución

Otros recursos

Comportamiento en tiempo de diseño y comportamiento en tiempo de ejecución

Introducción a la extensibilidad de WPF Designer

Extensibilidad de WPF Designer

  • Last updated on