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

Artículo
08/10/2011

Cuando se usa la extensibilidad para personalizar 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 de propiedad realizados por el usuario, se inserta una lógica propia en el método TranslatePropertyValue y DesignModeValueProvider pasa los nuevos valores al diseñador.

Importante
Cuando se utiliza 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 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 proyecto de biblioteca de controles personalizados de WPF.

Para crear el proyecto

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.
Agregue una referencia al siguiente ensamblado.
- Microsoft.Windows.Design.Extensibility
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í.
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 sólo afectan 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

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

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

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
Imports Microsoft.Windows.Design.Metadata


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

Modifique la clase CustomButtonDesignModeValueProvider para heredar de DesignModeValueProvider.


Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class


class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

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


Public Sub New()
    Properties.Add(GetType(Button), "Content")
    Properties.Add(GetType(Button), "Background")
End Sub


public CustomButtonDesignModeValueProvider()
{
    Properties.Add( typeof(Button), "Content");
    Properties.Add(typeof(Button), "Background");
}

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 item As ModelItem, _
    ByVal identifier As PropertyIdentifier, _
    ByVal value As Object) As Object

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Content" Then

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

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Background" Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(item, identifier, value)
End Function


public override object TranslatePropertyValue(ModelItem item, PropertyIdentifier identifier, object value)
{
    if (identifier.DeclaringType == typeof( Button ) &&
        identifier.Name == "Content" )
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DeclaringType == typeof(Button) &&
        identifier.Name == "Background")
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(item, identifier, value);
}

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

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

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

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

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 un objeto DesignModeValueProvider a un control personalizado mediante los metadatos personalizados en tiempo de diseño proporcionados. Para obtener más información, vea Proporcionar metadatos en tiempo de diseño.

Para asociar DesignModeValueProvider al control personalizado

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

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

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

Crear una aplicación de prueba

Para crear una aplicación de prueba

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

MainWindow.xaml se abre en WPF Designer.
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.
En el menú Proyecto, haga clic en Agregar referencia y utilice la ficha Proyectos para agregar una referencia al proyecto CustomButton.
En el menú Generar, haga clic en Generar solución.

Probar el control personalizado

Para probar el control personalizado

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

<Window x:Class="CustomButtonTestApplication.MainWindow"
    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="MainWindow" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

En la Vista de 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.
En la ventana Propiedades, busque la propiedad Background.
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 de diseño.
En la ventana Propiedades, busque la propiedad Content.
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 de diseño.
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.
Cierre la ventana.