Demonstra Passo a passo: Implementando um editor de valores em linha

Artigo
08/25/2010

O modelo de extensibilidade para o Windows Presentation Foundation (WPF) Designer for Visual Studio permite que você crie editores de valor personalizado para propriedades na Janela de Propriedades em tempo de design.Editores podem ser editores embutidos, que permitem que você edite valores diretamente na Janela de Propriedades, ou editores estendidos, que permitem que você forneça uma interface do usuário adicional para editar uma propriedade fora da Janela de Propriedades.Para demonstrar como criar um editor estendido, essa explicação passo a passo fornece procedimentos passo a passo para criar um editor de cores para a propriedade de plano de fundo de um controle.

Nesta explicação passo a passo, você executa as seguintes tarefas:

Criar um projeto de controle personalizado WPF.
Crie um editor embutido que pode ser usado para editar o valor da propriedade na janela Propriedades.
Criar uma classe que herda de PropertyValueEditor que é usada para conectar os editores à classe para qual você deseja fornecer edição personalizada.
Criar uma classe que herda de IRegisterMetadata para registrar seu novo editor estendido.
Teste o editor valor embutido no tempo de design.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

Visual Studio 2008.

Criando o Controle Personalizado

A primeira etapa é criar o projeto para o controle personalizado.O controle é um botão simples com pequena quantidade de código em tempo de design, que usa o método GetIsInDesignMode para implementar um comportamento de tempo de design.

Para criar o controle personalizado

Crie um novo projeto da biblioteca de controle personalizado WPF no Visual C# denominado CustomControlLibrary .

O código de CustomControl1 abre no Editor de Códigos.
Adicione uma referência ao seguinte conjunto de módulos (assembly) WPF Designer.
- Microsoft.Windows.Design

No Editor de Códigos de CustomControl1, substitua o código no namespace CustomControlLibrary com o seguinte código:

public class CustomControl1 : Button
{
    public CustomControl1()
    {
        if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
        {
            Background = Brushes.Red;
        }
    }
}

Defina o caminho de saída do projeto para "bin\".
Crie a solução.

Criando o modelo para o editor in-line

O editor embutido pode ser criado com um modelo de dados XAML.Esse será um drop-down list simples que exibe uma lista de opções de cores para a propriedade de plano de fundo.

Para criar o modelo para o editor de cores

Adicione um novo projeto da biblioteca de controle personalizado WPF no Visual C# denominado CustomControlLibrary.Design à solução.

O código de CustomControl1 abre no Editor de Códigos.
Em Gerenciador de Soluções, exclua o arquivo CustomControl1 do projeto CustomControlLibrary.Design.
Adicione uma referência ao seguinte conjunto de módulos (assembly) WPF Designer.
- Microsoft.Windows.Design
Adicione uma referência ao projeto CustomControlLibrary.
conjunto caminho de saída do projeto para "..\CustomControlLibrary\bin\ ".Isso mantém o conjunto de módulos (assembly) do controle e o conjunto de módulos (assembly) de metadados na mesma pasta, o que permite a descoberta de metadados para os designers.
Adicione uma nova classe denominada EditorResources ao projeto CustomControlLibrary.Design.

No Editor de Códigos de EditorResources, substitua o código gerado automaticamente pelo código a seguir.

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

No menu Project, clique em Add Resource Dictionary.
Nomeie o arquivo EditorResources.xaml e clique em Adicionar.

No modo de exibição XAML para EditorResources.xaml, substitua o XAML gerado automaticamente pelo seguinte XAML.

<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"
    xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:Class="InlineEditorNamespace.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>

Crie a solução.

Encapsulando os Modelos e Registrando os Editores

Agora que você criou o modelo para o editor embutido, você deve criar uma classe que herda PropertyValueEditor Para usar o modelo como um editor personalizado, e você deverá registrar o novo editor embutido.

Para encapsular e registrar seu editor embutido.

Adicione uma nova classe denominada BrushInlineEditor ao projeto CustomControlLibrary.Design.

No Editor de Códigos de BrushInlineEditor, substitua o código gerado automaticamente pelo código a seguir.

namespace InlineEditorNamespace
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using Microsoft.Windows.Design.PropertyEditing;
    using System.Windows;
    using InlineEditorNamespace;

    public class BrushInlineEditor : PropertyValueEditor
    {
        private EditorResources res = new EditorResources();

        public BrushInlineEditor()
        {
            this.InlineEditorTemplate = res["BrushInlineEditorTemplate"] as DataTemplate;
        }
    }
}

Adicione uma nova classe denominada Metadata ao projeto CustomControlLibrary.Design.

No Editor de Códigos de Metadata, substitua o código gerado automaticamente pelo código a seguir.

namespace InlineEditorNamespace
{
    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;

    // Container for any general design-time metadata that we want to initialize.
    // Designers will look for a type in the design-time assembly that implements IRegisterMetadata.
    // If found, they will instantiate it and call its Register() method automatically.
    internal class Metadata : IRegisterMetadata
    {

        // Called by Cider to register any design-time metadata
        public void Register()
        {
            AttributeTableBuilder builder = new AttributeTableBuilder();
            builder.AddCustomAttributes
                (typeof(CustomControl1), 
                Control.BackgroundProperty,
                PropertyValueEditor.CreateEditorAttribute(
                    typeof(BrushInlineEditor)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

Crie a solução.

Teste o editor valor in-line

Agora seu editor de valor in-line está concluído e pronto para usar.Tudo que resta agora é testá-lo.Para testar o editor embutido, você adicionará um aplicativo WPF para seu projeto, adicionar o controle personalizado a seu aplicativo WPF e exibir o editor embutido em ação.

Teste o editor de valor in-line

Adicione um novo projeto de aplicativo WPF no Visual C# denominado DemoApplication à solução.

Window1.xaml é aberto no WPF Designer.
Adicione uma referência ao projeto CustomControlLibrary.
No modo de exibição XAML para Window1.xaml, substitua o XAML gerado automaticamente pelo seguinte XAML.Este XAML adiciona uma referência ao namespace CustomControlLibrary e adiciona o controle personalizado CustomControl1.O botão aparece no modo Design com um plano de fundo vermelho, indicando que o controle está no modo de design.Se o botão não for exibido, talvez você precise clicar na Barra de Informações na parte superior do designer para recarregar o modo de exibição.
```
<Window x:Class="DemoApplication.Window1"
    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">Button</my:CustomControl1>
    </Grid>
</Window>
```
Selecione o controle no modo de design.
Na janela Propriedades, clique no botão suspenso próximo à propriedade de Plano de Fundo.Uma pequena lista de opções de cores, que representa o novo editor embutido, é exibida em vez da lista de cores padrão.As opções de cores são vermelho, verde e azul.
Selecione uma tabela a partir da lista suspensa.O plano de fundo de seu controle personalizado muda para aquela cor.

Próximas etapas

Para um editor de propriedades mais envolvido, consulte Demonstra Passo a passo: Implementando um editor de cor, que demonstra como criar um editor estendido.