Demonstra Passo a passo: Criando um editor de categoria

Artigo
08/25/2010

O modelo de extensibilidade para o Windows Presentation Foundation (WPF) Designer for Visual Studio permite que você criar editores personalizados para categorias de propriedades conhecidas sistema autônomo editores de categoria. Editores de categoria que você fornecer uma interface de usuário personalizado que permite que sistema autônomo usuários editem propriedades relacionadas que pertencem a uma única categoria, sistema autônomo sistema autônomo propriedades relacionadas a texto.Nesta explicação passo a passo, você irá compilação um editor de categoria que permite aos usuários edição as propriedades relacionadas a texto de um controle.

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

Criar um projeto de controle personalizado WPF.
Crie uma categoria editor que pode ser usado para edição as propriedades relacionadas a texto desse controle.
Criar uma classe que herda de CategoryEditor que representa o editor de categoria para o controle.
Criar uma classe que herda de IRegisterMetadata para registrar seu novo editor estendido.
Teste o editor de categoria em time 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))
        {
            Content = "I'm in design mode";
        }
    }
}

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

Criando uma classe para encapsular informações de propriedade

O editor de categoria que você irá criar requer algumas informações sobre as fontes e propriedades associadas, para que você irá criar uma classe que encapsula as informações.Essa classe será usada sistema autônomo uma fonte de dados pelo seu editor de categoria.

Para criar uma classe que encapsula as informações de propriedade da fonte

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.
No gerenciador de soluções, exclua a pasta de temas 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 FontList ao projeto CustomControlLibrary.Design.

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

using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;
using System.Windows.Media;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Data;
using System.Globalization;

namespace CustomControlLibrary.Design
{
    public class FontList : ObservableCollection<FontFamily>
    {
        public FontList()
        {
            foreach (FontFamily ff in Fonts.SystemFontFamilies)
            {
                Add(ff);
            }
        }
    }

    public class FontSizeList : ObservableCollection<double>
    {
        public FontSizeList()
        {
            Add(8);
            Add(9);
            Add(10);
            Add(11);
            Add(12);
            Add(14);
            Add(16);
            Add(18);
            Add(20);
        }
    }

    public class FontStyleConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            FontStyle fs = (FontStyle)value;
            return fs == FontStyles.Italic;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                bool isSet = (bool)value;

                if (isSet)
                {
                    return FontStyles.Italic;
                }
            }

            return FontStyles.Normal;
        }
    }

    public class FontWeightConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            FontWeight fs = (FontWeight)value;
            return fs == FontWeights.Bold;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                bool isSet = (bool)value;

                if (isSet)
                {
                    return FontWeights.Bold;
                }
            }

            return FontWeights.Normal;
        }
    }

}

Criando o modelo para o Editor de categoria

O editor de categoria será criado usando um modelo de dados XAML.Essa será uma interface do usuário simples que vincula à várias propriedades relacionadas a texto.

Para criar o modelo para a categoria editor

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 CustomControlLibrary.Design
{
    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:Local="clr-namespace:CustomControlLibrary.Design"
    xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:Class="CustomControlLibrary.Design.EditorResources">
    <Local:FontList x:Key="FontFamilyList"/>
    <Local:FontSizeList x:Key="FontSizeList"/>
    <Local:FontStyleConverter x:Key="FontStyleConverter"/>
    <Local:FontWeightConverter x:Key="FontWeightConverter"/>
    <DataTemplate x:Key="TextCategoryEditorTemplate">
        <StackPanel Margin="5">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <ComboBox 
                    Grid.Column="0"
                    Margin="2"
                    ItemsSource="{Binding Source={StaticResource FontFamilyList}}" 
                    DisplayMemberPath="FamilyNames.Values[0]"
                    SelectedItem="{Binding [FontFamily].PropertyValue.Value}"/>
                <ComboBox 
                    Grid.Column="1"
                    Margin="2"
                    ItemsSource="{Binding Source={StaticResource FontSizeList}}"
                    SelectedItem="{Binding [FontSize].PropertyValue.Value}"/>
            </Grid>
            <StackPanel Orientation="Horizontal">
                <CheckBox 
                    Margin="2"
                    Content="Bold"
                    IsChecked="{Binding Path=[FontWeight].PropertyValue.Value, Converter={StaticResource FontWeightConverter}}"/>
                <CheckBox 
                    Margin="2"
                    Content="Italic"
                    IsChecked="{Binding Path=[FontStyle].PropertyValue.Value, Converter={StaticResource FontStyleConverter}}"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

Crie a solução.

Encapsular o modelo e registrando o Editor de categoria

Agora que você criou o modelo para o seu editor de categoria, você deve criar uma classe que herda CategoryEditor Para usar o modelo sistema autônomo um editor personalizado e você deve registrar o novo editor de categoria.

Para encapsular e registrar o editor de categoria

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

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

namespace CustomControlLibrary.Design {
    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using Microsoft.Windows.Design.PropertyEditing;

    public class TextCategoryEditor : CategoryEditor {

        private EditorResources res = new EditorResources();
        public TextCategoryEditor()
        {
        }

        public override bool ConsumesProperty(PropertyEntry property)
        {
            return true;
        }

        public override DataTemplate EditorTemplate
        {
            get {
                return res["TextCategoryEditorTemplate"] as DataTemplate;
            }
        }

        public override object GetImage(Size desiredSize)
        {
            return null;
        }

        public override string TargetCategory
        {
            get { return "Text"; }
        }
    }
}

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 CustomControlLibrary.Design
{
    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 the WPF Designer to register any design-time metadata
        public void Register()
        {
            AttributeTableBuilder builder = new AttributeTableBuilder();
            builder.AddCustomAttributes
                (typeof( CustomControl1), 
                "Enter text",
                PropertyValueEditor.CreateEditorAttribute(
                    typeof(TextCategoryEditor)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

Crie a solução.

Teste o Editor de categoria

Editor de categoria agora está concluído e pronto para ser usado.Tudo que resta agora é testá-lo.Para teste editor de categoria, você irá adicionar um aplicativo do WPF ao seu projeto, adicionar o controle personalizado ao seu aplicativo do WPF e exibir o editor de categoria em ação.

Para testar o editor de categoria

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 de exibição de Design com texto indicando que está no modo de exibição 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"></my:CustomControl1>
    </Grid>
</Window>
```
Selecione o controle no modo de design.
No Propriedades janela, localize a categoria de texto.

Você deve ver uma interface do usuário para especificar propriedades de texto que é diferente de outros controles.Você pode selecionar um nome de fonte e um dimensionar de fonte nas listas suspensas.Você pode especificar em negrito e itálico, marcando caixas de seleção.
Alterar propriedades representadas nessa categoria.Observe que eles altera são refletidas no controle.

Consulte também

Tarefas

Demonstra Passo a passo: Implementando um editor de cor

Como: Criar um editor de valores

Outros recursos

Criando personalizados editores

Extensibilidade do WPF Designer

Partilhar via