Compartir a través de


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

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.

Nota importanteImportante

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

  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 .

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

  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
    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
    
  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(GetType(Button), "Content")
        Properties.Add(GetType(Button), "Background")
    End Sub
    
    
    public CustomButtonDesignModeValueProvider()
    {
        Properties.Add( typeof(Button), "Content");
        Properties.Add(typeof(Button), "Background");
    }
    
  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 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);
    }
    
  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 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

  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.

    MainWindow.xaml se abre en 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 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>
    
  2. 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.

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

Proporcionar metadatos en tiempo de diseño