Passo a passo: Criando um editor de categoria

  • Artigo

O modelo de extensibilidade para o WPF Designer for Visual Studio lhe permite criar editores personalizados para categorias de propriedades, conhecidas como editores de categoria . Editores de categoria permitem fornecer um personalizado de usuário interface que permite aos usuários edição relacionadas a propriedades que pertencem a uma única categoria, como, por exemplo,-de texto propriedades relacionadas. Esta explicação passo a passo, você criará uma categoria editor que permite que os usuários edição o texto-propriedades relacionadas de um controle.

In this walkthrough, you perform the following tasks:

  • Create a WPF custom control project.

  • Criar uma categoriadeeditor que pode ser usado para edição o texto-relacionadas a propriedades desse controle.

  • Criar uma classe que herda de CategoryEditor que representa a categoriadeeditor para o controle.

  • Criar uma classe que implementa o IProvideAttributeTable interface para registrar seu novo editorde extended.

  • Teste oeditor de categoriaem tempo de design.

Pré-requisitos

You need the following components to complete this walkthrough:

  • Visual Studio 2010.

Creating the Custom Control

The first step is to create the project for the custom control. The control is a simple button with small amount of design-time code, which uses the GetIsInDesignMode method to implement a design-time behavior.

To create the custom control

  1. Create a new WPF Custom Control Library project in Visual C# named CustomControlLibrary.

    The code for CustomControl1 opens in the Code Editor.

  2. In the Code Editor for CustomControl1, replace the code in the CustomControlLibrary namespace with the following code:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CustomControlLibrary
{
    public class CustomControl1 : Button
    {
        public CustomControl1()
        {
            if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "In design mode";
            }
        }
    }
}

  3. Set the project's output path to "bin\".

  4. Build the solution.

Criando uma classe para encapsular informações de propriedade

Oeditor de categoriaque você irá criar requer algumas informações sobre fontes e propriedades associadas, portanto, você irá criar uma classe que encapsula as informações. Essa classe será usado como uma fonte de dados pelo seueditorde categoria.

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

  1. Add a new WPF Custom Control Library project in Visual C# named CustomControlLibrary.Design to the solution.

    The code for CustomControl1 opens in the Code Editor.

  2. In Solution Explorer, delete the CustomControl1 file from the CustomControlLibrary.Design project.

  3. No Solution Explorer, excluir a pasta de temas do projetode CustomControlLibrary.Design.

  4. Adicionar uma referência ao seguinte WPF Designer assemblies.

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  5. Add a reference to the CustomControlLibrary project.

  6. Definir o caminho de saída do projeto"... \CustomControlLibrary\bin\ ". This keeps the control's assembly and the metadata assembly in the same folder, which enables metadata discovery for designers.

  7. Add a new class named FontList to the CustomControlLibrary.Design project.

  8. In the Code Editor for FontList, replace the automatically generated code with the following code.

    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;
        }
    }

}

Criação do modelo para o Editor de categoria

Oeditor de categoriaserá criada usando um modelode dados XAML . Esta será uma simples usuário interface que vincula ao texto de várias-propriedades relacionadas.

Para criar o modelo para oeditorde categoria

  1. Add a new class named EditorResources to the CustomControlLibrary.Design project.

  2. In the Code Editor for EditorResources, replace the automatically generated code with the following code.

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

  3. From the Project menu, click Add Resource Dictionary.

  4. Name the file EditorResources.xaml and click Add.

  5. In XAML view for EditorResources, replace the automatically generated XAML with the following 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.Interaction"
    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}}" 
                    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>

  6. Build the solution.

O modelo de encapsulamento e registrando o Editor de categoria

Agora que você criou o modelo para a sua categoriadeeditor, você deve criar uma classe que herda CategoryEditor usar o modelo como um editor personalizadoe você deve registrar o novoeditorde categoria.

Para encapsular e registrar o seueditorde categoria

  1. Add a new class named TextCategoryEditor to the CustomControlLibrary.Design project.

  2. In the Code Editor for TextCategoryEditor, replace the automatically generated code with the following code.

    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"; }
        }
    }
}

  3. Add a new class named Metadata to the CustomControlLibrary.Design project.

  4. In the Code Editor for Metadata, replace the automatically generated code with the following code.

    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;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(CustomControlLibrary.Design.Metadata))]

namespace CustomControlLibrary.Design
{
    // Container for any general design-time metadata to initialize.
    // Designers look for a type in the design-time assembly that 
    // implements IProvideAttributeTable. If found, designers instantiate 
    // this class and access its AttributeTable property automatically.
    internal class Metadata : IProvideAttributeTable
    {
        // Accessed by the designer to register any design-time metadata.
        public AttributeTable AttributeTable
        {
            get
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();
                builder.AddCustomAttributes
                    (typeof(CustomControl1),
                    new EditorAttribute(
                        typeof(TextCategoryEditor), 
                        typeof(TextCategoryEditor)));
                return builder.CreateTable();
            }
        }
    }
}

  5. Build the solution.

O Editor de categoria de teste.

Oeditor de categoriaagora está completo e pronto para usar. All that remains is to test it. Para teste oeditorde categoria, adicionar umaplicativo do WPFao seu projeto, adicione o controle personalizado ao seuaplicativodo WPFe exibir oeditor de categoriaem ação.

Para teste oeditorde categoria

  1. Add a new WPF Application project in Visual C# named DemoApplication to the solution.

    MainWindow. XAML é aberto no WPF Designer.

  2. Add a reference to the CustomControlLibrary project.

  3. Em XAML exiba para MainWindow. XAML, substituir o XAML gerado automaticamente com o seguinte XAML. This XAML adds a reference to the CustomControlLibrary namespace and adds the CustomControl1 custom control. O botão aparece no modo de exibição de Design com texto indicando que ele está no modo de design. If the button does not appear, you might have to click the Information bar at the top of the designer to reload the view.

        <Window x:Class="DemoApplication.MainWindow"
    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>

  4. In Design view, select the control.

  5. No Propriedades janela, localize o Texto categoria.

    Você deve ver um usuário interface para especificar propriedades de Texto que é diferente de outros controles. Você pode selecionar um nome de fonte e um tamanho da fonte de-de soltar listas. Você pode especificar o negrito e itálico, marcando as caixas de seleção.

  6. Faça as alterações às propriedades representadas nessa categoria. Observe que eles alterações são refletidas no controle.

Consulte também

Tarefas

Walkthrough: Implementando um editor de cores

Como: Criar um editor de valor

Outros recursos

Criando personalizados editores

Extensibilidade do WPF Designer