演练：实现内联值编辑器

项目
05/28/2012

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

适用于 Visual Studio 的 WPF 设计器的扩展性模型在 " 属性 " 窗口允许您创建属性的自定义值编辑器在设计时。编辑器可以是内联编辑器，可以直接编辑值在 " 属性 " 窗口或扩展编辑器，使您能够编辑属性提供其他用户在 " 属性 " 窗口外部。为了演示如何创建内联编辑器，本演练提供了为控件的 background 属性创建内联值编辑器的分步过程。

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

创建 WPF 自定义控件项目。
创建可用来在 " 属性 " 窗口中编辑属性值的内联编辑器。
创建从继承 PropertyValueEditor 用于连接内联编辑器到类希望提供自定义编辑的类。
创建实现接口 IProvideAttributeTable 以注册新的内联编辑器的类。
测试内联值编辑器在设计时。

系统必备

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

Visual Studio 2012 RC.

创建自定义控件

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

创建自定义控件

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

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

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

将项目的输出路径设置为 “bin \”。
生成解决方案。

为内联编辑器创建模板

内联编辑器可以用 XAML 数据模板创建。这将显示颜色选项列表背景属性的简单下拉列表。

为内联编辑器创建模板

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

CustomControl1 的代码在代码编辑器中打开。
在 解决方案资源管理器，从 CustomControlLibrary.Design 项目中删除 CustomControl1 文件。
添加对以下程 WPF Designer 程序集。
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
添加对 CustomControlLibrary 项目。
将项目的输出路径设置为 “ \ CustomControlLibrary \ bin \”。这在同一文件夹使控件的程序集和元数据程序集，使设计器的元数据发现。
将名为 EditorResources 的新类向 CustomControlLibrary.Design 项目。

在 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();
        }
    }
}

从项目菜单上，单击 添加资源字典。
将该文件命名为 EditorResources.xaml 并单击 add。

在 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">
    <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>

生成解决方案。

封装模板并注册内联编辑器

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

封装并注册内联编辑器

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

在 BrushInlineEditor的代码编辑器中，用以下代码替换自动生成的代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using Microsoft.Windows.Design.PropertyEditing;

namespace CustomControlLibrary.Design
{
    public class BrushInlineEditor : PropertyValueEditor
    {
        private EditorResources res = new EditorResources();

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

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

在 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),
                    "Background",
                    PropertyValueEditor.CreateEditorAttribute(
                        typeof(BrushInlineEditor)));

                return builder.CreateTable();
            }
        }
    }
}

生成解决方案。

测试内联值编辑器

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

测试内联值编辑器

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

在 MainWindow.xaml WPF Designer打开。
添加对 CustomControlLibrary 项目。

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

在 " 设计 " 视图中，选择控件。
在属性窗口，请在背景单击属性旁边的下拉按钮。小的颜色选择，表示新的内联编辑器，将显示而不是默认的颜色。颜色选择为红色，蓝色和绿色。
选择一种颜色从下拉列表。您的自定义控件背景变成该颜色。

后续步骤

对于更复杂的属性编辑器，请演练：实现颜色编辑器参见，演示如何创建扩展编辑器。

请参见

任务

演练：实现颜色编辑器

如何：创建值编辑器

其他资源

创建自定义编辑器

WPF 设计器扩展性

通过

演练：实现内联值编辑器

系统必备

创建自定义控件

创建自定义控件

为内联编辑器创建模板

为内联编辑器创建模板

封装模板并注册内联编辑器

封装并注册内联编辑器

测试内联值编辑器

测试内联值编辑器

后续步骤

请参见

任务

其他资源

其他资源