演练:创建类别编辑器

[本文档仅供预览,在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

适用于 Visual Studio 的 WPF 设计器 的扩展性模型允许您创建称为类别编辑器的特性类的自定义编辑器。 类别编辑器允许您提供允许用户编辑相关属性属于同一个类,如文本相关属性的自定义用户界面。 在本演练中,将生成允许用户编辑控件的文本相关属性的类别编辑器。

在本演练中,您将执行下列任务:

  • 创建 WPF 自定义控件项目。

  • 创建可用来编辑该控件的文本相关属性的类别编辑器。

  • 创建从 CategoryEditor 继承表示控件的类别编辑器的类。

  • 创建实现接口 IProvideAttributeTable 以注册新的扩展编辑器的类。

  • 测试类别编辑器在设计时。

系统必备

您需要以下组件来完成本演练:

  • Visual Studio 2012 RC.

创建自定义控件

第一步是为自定义控件创建项目。 该控件是带有少量设计时代码的一个简单的按钮,使用 GetIsInDesignMode 方法实现设计时行为。

创建自定义控件

  1. 创建新 WPF 自定义控件库项目。 CustomControlLibrary名为的 Visual C#。

    CustomControl1 的代码在代码编辑器中打开。

  2. 在 CustomControl1的代码编辑器中,用以下代码替换该 CustomControlLibrary 命名空间的代码:

    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. 将项目的输出路径设置为 “bin \”。

  4. 生成解决方案。

创建封装属性信息的类

将要创建的类别编辑器需要有关字体和关联属性的信息,因此,需要创建封装这些信息的类。 此类将用作数据源。您的类别编辑器。

创建封装字体属性信息的类

  1. 添加一个名为 CustomControlLibrary.Design 的 Visual C# 的新 WPF 自定义控件库项目添加到解决方案。

    CustomControl1 的代码在代码编辑器中打开。

  2. 解决方案资源管理器,从 CustomControlLibrary.Design 项目中删除 CustomControl1 文件。

  3. 在解决方案资源管理器中,从 CustomControlLibrary.Design 项目中删除主题文件夹。

  4. 添加对以下程 WPF Designer 程序集。

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  5. 添加对 CustomControlLibrary 项目。

  6. 将项目的输出路径设置为 “ \ CustomControlLibrary \ bin \”。 这在同一文件夹使控件的程序集和元数据程序集,使设计器的元数据发现。

  7. 将名为 FontList 的新类向 CustomControlLibrary.Design 项目。

  8. 在 FontList的代码编辑器中,用以下代码替换自动生成的代码。

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

为类别编辑器创建模板

使用 XAML 数据模板,类别编辑器将创建。 这将是绑定到多个文本相关属性的简单用户界面。

为类别编辑器创建模板

  1. 将名为 EditorResources 的新类向 CustomControlLibrary.Design 项目。

  2. 在 EditorResources的代码编辑器中,用以下代码替换自动生成的代码。

    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. 项目 菜单上,单击 添加资源字典

  4. 将该文件命名为 EditorResources.xaml 并单击 add

  5. 在 EditorResources 的 XAML 视图中,用以下 XAML 替换自动生成的 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. 生成解决方案。

封装模板并注册类别编辑器

既然已经为类别编辑器创建了模板,必须创建一个继承 CategoryEditor 将该模板用作自定义编辑器的类,因此,您必须注册新的类别编辑器。

封装并注册类别编辑器

  1. 将名为 TextCategoryEditor 的新类向 CustomControlLibrary.Design 项目。

  2. 在 TextCategoryEditor的代码编辑器中,用以下代码替换自动生成的代码。

    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. 将名为 Metadata 的新类向 CustomControlLibrary.Design 项目。

  4. 在 Metadata的代码编辑器中,用以下代码替换自动生成的代码。

    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. 生成解决方案。

测试类别编辑器

您的类别编辑器现在已经完成和供使用。 剩下的工作就是对其进行测试。 若要测试类别编辑器,您将添加一个 WPF 应用程序到项目中,将自定义控件添加到您的 WPF 应用程序,并查看操作中的类别编辑器。

测试类别编辑器

  1. 添加一个名为 DemoApplication 的 Visual C# 的新 WPF 应用程序项目添加到解决方案。

    在 MainWindow.xaml WPF Designer打开。

  2. 添加对 CustomControlLibrary 项目。

  3. 在 MainWindow.xaml 的 XAML 视图中,用以下 XAML 替换自动生成的 XAML。 此 XAML 将添加对 CustomControlLibrary 命名空间并添加 CustomControl1 自定义控件。 该按钮出现在与指示文本的设计 " 视图该按钮处于设计模式下。 如果该按钮未出现,可能需要单击设计器顶部的信息栏以重新加载视图。

        <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. 在 " 设计 " 视图中,选择控件。

  5. 属性 窗口中,找到 text 类别。

    应对与其他控件不同的指定文本属性显示用户界面。 可以选择字体名称,然后从的字号下拉列表。 可通过选择复选框来指定粗体和斜体。

  6. 对表示属性的更改此类别。 请注意这些更改控件上反映。

请参见

任务

演练:实现颜色编辑器

如何:创建值编辑器

其他资源

创建自定义编辑器

WPF 设计器扩展性