演练：实现就地编辑

项目
05/28/2012

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

本演练演示如何实现就地编辑 windows presentation foundation 自定义控件的 (WPF)。在适用于 Visual Studio 的 WPF 设计器可以使用此设计时功能设置 Content 属性的值在自定义按钮控件上。对于本演练，控件是一个简单的按钮，装饰器是一个用来更改按钮的内容的文本框。

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

创建一个 WPF 自定义控件库项目。
创建设计时元数据的一个单独的程序集。
实现就地编辑的装饰器提供程序。
在设计时测试控件。

完成后，您将知道如何为自定义控件创建装饰器提供程序。

备注

您看到的对话框和菜单命令可能会与 " 帮助 " 中的描述不同具体取决于您现用的设置或版本。若要更改设置，请选择在工具菜单的 导入和导出设置 。有关更多信息，请参见 Visual Studio 设置。

系统必备

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

Visual Studio 2012 RC.

创建自定义控件

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

创建自定义控件

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

CustomControl1 的代码在代码编辑器中打开。
在 解决方案资源管理器，将代码文件的名称改为 DemoControl.cs。如果此项目请求的出现消息框是要执行重命名所有引用，单击是。
在代码编辑器中打开 DemoControl.cs。

用下面的代码替换自动生成的代码。 DemoControl 自定义控件从 Button继承

using System;
using System.Windows;
using System.Windows.Controls;

namespace CustomControlLibrary
{
    public class DemoControl : Button
    {   
    }
}

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

创建设计时元数据程序集

设计时代码在特定元数据程序集中部署。对于本演练，自定义装饰器 Visual Studio 在名为 CustomControlLibrary.VisualStudio.Design 的程序集仅支持和部署。有关更多信息，请参见提供设计时元数据。

创建设计时元数据程序集

添加一个名为 CustomControlLibrary.VisualStudio.Design 的 Visual C# 的新类库项目添加到解决方案。
将项目的输出路径设置为 “ \ CustomControlLibrary \ bin \”。这在同一文件夹使控件的程序集和元数据程序集，使设计器的元数据发现。
添加对下列 WPF 程序集。
- PresentationCore
- PresentationFramework
- System.Xaml
- WindowsBase
添加对以下 WPF Designer 程序集。
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
添加对 CustomControlLibrary 项目。
在 解决方案资源管理器，将 Class1 代码文件的名称改为 Metadata.cs。

用下面的代码替换自动生成的代码。将自定义设计时实现附加到 DemoControl 类的此代码创建 AttributeTable 。

using System;
using Microsoft.Windows.Design.Features;
using Microsoft.Windows.Design.Metadata;

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

namespace CustomControlLibrary.VisualStudio.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();

                // Add the adorner provider to the design-time metadata.
                builder.AddCustomAttributes(
                    typeof(DemoControl),
                    new FeatureAttribute(typeof(InplaceButtonAdorners)));

                return builder.CreateTable();
            }
        }
    }
}

保存解决方案。

实现装饰器提供程序

装饰器提供程序是在名为 InplaceButtonAdorners的类型中实现的。此装饰器提供程序使用户可以设置控件的 Content 属性在设计时。

实现装饰器提供程序

将名为 InplaceButtonAdorners 的新类添加到 CustomControlLibrary.VisualStudio.Design 项目。

在 InplaceButtonAdorners的代码编辑器中，用以下代码替换自动生成的代码。提供基于 TextBox 控件的装饰器的此代码实现 PrimarySelectionAdornerProvider 。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using Microsoft.Windows.Design.Interaction;
using System.Windows.Data;
using System.Windows.Input;
using System.ComponentModel;
using Microsoft.Windows.Design.Model;
//using SampleControls.Designer;
using System.Windows.Media;
using Microsoft.Windows.Design.Metadata;
using System.Globalization;


namespace CustomControlLibrary.VisualStudio.Design
{

    // The InplaceButtonAdorners class provides two adorners:  
    // an activate glyph that, when clicked, activates in-place 
    // editing, and an in-place edit control, which is a text box.
    internal class InplaceButtonAdorners : PrimarySelectionAdornerProvider
    {
        private Rectangle activateGlyph;
        private TextBox editGlyph;
        private AdornerPanel adornersPanel;
        private ModelItem _editedItem;

        public InplaceButtonAdorners()
        {
            adornersPanel = new AdornerPanel();
            adornersPanel.IsContentFocusable = true;
            adornersPanel.Children.Add(ActivateGlyph);

            Adorners.Add(adornersPanel);
        }

        protected override void Activate(ModelItem item)
        {
            _editedItem = item;
            _editedItem.PropertyChanged += new PropertyChangedEventHandler(OnEditedItemPropertyChanged);
            base.Activate(item);
        }


        protected override void Deactivate()
        {
            if (_editedItem != null)
            {
                _editedItem.PropertyChanged -= new PropertyChangedEventHandler(OnEditedItemPropertyChanged);
                _editedItem = null;
            }
            base.Deactivate();
        }

        private ModelItem EditedItem
        {
            get
            {
                return _editedItem;
            }
        }
        private UIElement ActivateGlyph
        {
            get
            {
                if (activateGlyph == null)
                {
                    // The following code specifies the shape of the activate 
                    // glyph. This can also be implemented by using a XAML template.
                    Rectangle glyph = new Rectangle();
                    glyph.Fill = AdornerColors.HandleFillBrush;
                    glyph.Stroke = AdornerColors.HandleBorderBrush;
                    glyph.RadiusX = glyph.RadiusY = 2;
                    glyph.Width = 20;
                    glyph.Height = 15;
                    glyph.Cursor = Cursors.Hand;

                    ToolTipService.SetToolTip(
                        glyph,
                        "Click to edit the text of the button.  " +
                        "Enter to commit, ESC to cancel.");

                    // Position the glyph to the upper left of the DemoControl, 
                    // and slightly inside.
                    AdornerPanel.SetAdornerHorizontalAlignment(glyph, AdornerHorizontalAlignment.Left);
                    AdornerPanel.SetAdornerVerticalAlignment(glyph, AdornerVerticalAlignment.Top);
                    AdornerPanel.SetAdornerMargin(glyph, new Thickness(5, 5, 0, 0));

                    // Add interaction to the glyph.  A click starts in-place editing.
                    ToolCommand command = new ToolCommand("ActivateEdit");
                    Task task = new Task();
                    task.InputBindings.Add(new InputBinding(command, new ToolGesture(ToolAction.Click)));
                    task.ToolCommandBindings.Add(new ToolCommandBinding(command, OnActivateEdit));
                    AdornerProperties.SetTask(glyph, task);
                    activateGlyph = glyph;
                }

                return activateGlyph;
            }
        }
        // When in-place editing is activated, a text box is placed 
        // over the control and focus is set to its input task. 
        // Its task commits itself when the user presses enter or clicks 
        // outside the control.
        private void OnActivateEdit(object sender, ExecutedToolEventArgs args)
        {
            adornersPanel.Children.Remove(ActivateGlyph);
            adornersPanel.Children.Add(EditGlyph);

            // Once added, the databindings activate. 
            // All the text can now be selected.
            EditGlyph.SelectAll();
            EditGlyph.Focus();

            GestureData data = GestureData.FromEventArgs(args);
            Task task = AdornerProperties.GetTask(EditGlyph);
            task.Description = "Edit text";
            task.BeginFocus(data);
        }

        // The EditGlyph utility property creates a TextBox to use as 
        // the in-place editing control. This property centers the TextBox
        // inside the target control and sets up data bindings between 
        // the TextBox and the target control.
        private TextBox EditGlyph
        {
            get
            {
                if (editGlyph == null && EditedItem != null)
                {
                    TextBox glyph = new TextBox();
                    glyph.Padding = new Thickness(0);
                    glyph.BorderThickness = new Thickness(0);

                    UpdateTextBlockLocation(glyph);

                    // Make the background white to draw over the existing text.
                    glyph.Background = SystemColors.WindowBrush;


                    // Two-way data bind the text box's text property to content.
                    Binding binding = new Binding();
                    binding.Source = EditedItem;
                    binding.Path = new PropertyPath("Content");
                    binding.Mode = BindingMode.TwoWay;
                    binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
                    binding.Converter = new ContentConverter();
                    glyph.SetBinding(TextBox.TextProperty, binding);


                    // Create a task that describes the UI interaction.
                    ToolCommand commitCommand = new ToolCommand("Commit Edit");
                    Task task = new Task();
                    task.InputBindings.Add(
                        new InputBinding(
                            commitCommand,
                            new KeyGesture(Key.Enter)));

                    task.ToolCommandBindings.Add(
                        new ToolCommandBinding(commitCommand, delegate
                        {
                            task.Complete();
                        }));

                    task.FocusDeactivated += delegate
                    {
                        adornersPanel.Children.Remove(EditGlyph);
                        adornersPanel.Children.Add(ActivateGlyph);
                    };

                    AdornerProperties.SetTask(glyph, task);

                    editGlyph = glyph;
                }

                return editGlyph;
            }
        }

        private void UpdateTextBlockLocation(TextBox glyph)
        {
            Point textBlockLocation = FindTextBlock();
            AdornerPanel.SetAdornerMargin(glyph, new Thickness(textBlockLocation.X, textBlockLocation.Y, 0, 0));
        }


        /// <summary>
        /// iterate through the visual tree and look for TextBlocks to position the glyph
        /// </summary>
        /// <returns></returns>
        private Point FindTextBlock()
        {
            // use ModelFactory to figure out what the type of text block is - works for SL and WPF.
            Type textBlockType = ModelFactory.ResolveType(Context, new TypeIdentifier(typeof(TextBlock).FullName));

            ViewItem textBlock = FindTextBlock(textBlockType, EditedItem.View);
            if (textBlock != null)
            {
                // transform the top left of the textblock to the view coordinate system.
                return textBlock.TransformToView(EditedItem.View).Transform(new Point(0, 0));
            }

            // couldn't find a text block in the visual tree.  Return a default position.
            return new Point();
        }
        private ViewItem FindTextBlock(Type textBlockType, ViewItem view)
        {
            if (view == null)
            {
                return null;
            }

            if (textBlockType.IsAssignableFrom(view.ItemType))
            {
                return view;
            }
            else
            {
                // walk through the child tree recursively looking for it.
                foreach (ViewItem child in view.VisualChildren)
                {
                    return FindTextBlock(textBlockType, child);
                }
            }
            return null;
        }
        void OnEditedItemPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Content")
            {
                if (EditGlyph != null)
                {
                    UpdateTextBlockLocation(EditGlyph);
                }
            }
        }


        // The ContentConverter class ensures that only strings
        // are assigned to the Text property of EditGlyph.
        private class ContentConverter : IValueConverter
        {
            public object Convert(
                object value,
                Type targetType,
                object parameter,
                System.Globalization.CultureInfo culture)
            {
                if (value is ModelItem)
                {
                    return ((ModelItem)value).GetCurrentValue();
                }
                else if (value != null)
                {
                    return value.ToString();
                }

                return string.Empty;
            }

            public object ConvertBack(
                object value,
                Type targetType,
                object parameter,
                System.Globalization.CultureInfo culture)
            {
                return value;
            }
        }
    }

}

生成解决方案。

测试设计时实现

代码，就象使用任何其他 WPF 控件，可以使用 DemoControl 类。 WPF Designer 处理所有设计时对象的创建。

测试设计时实现

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

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

在 XAML 视图中，用以下 XAML 替换自动生成的 XAML。此 XAML 将添加对 CustomControlLibrary 命名空间并添加 DemoControl 自定义控件。如果控件未出现，可能需要单击设计器顶部的信息栏以重新加载视图。

<Window x:Class="DemoApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ccl="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ccl:DemoControl></ccl:DemoControl>
    </Grid>
</Window>

重新生成解决方案。
在设计视图中，单击 DemoControl 选择控件。

小 Rectangle 标志符号出现在 DemoControl 控件的左上角。
单击 Rectangle 标志符号激活就地编辑。

文本框突出显示 DemoControlContent 。因为该目录当前为空，则在看到按钮中心的光标。
输入文本内容的新值，然后按 enter 键。

在 XAML 视图中， Content 属性设置为在 " 设计 " 视图中键入的文本值。
将 DemoApplication 项目设置为启动项目并运行解决方案。

在运行时，该按钮具有该文本的值您用装饰器设置。

后续步骤

可以添加更多的自定义设计时功能。您的自定义控件。

添加 MenuAction 到自定义设计时。有关更多信息，请参见演练：创建菜单提供程序。
创建自定义颜色编辑器，可在 " 属性 " 窗口中使用。有关更多信息，请参见演练：实现颜色编辑器。
创建一组控件的不透明度的自定义装饰器。有关更多信息，请参见演练：创建设计时装饰器。

请参见

概念

提供设计时元数据

其他资源

创建自定义编辑器

WPF 设计器扩展性

通过

演练：实现就地编辑

系统必备

创建自定义控件

创建自定义控件

创建设计时元数据程序集

创建设计时元数据程序集

实现装饰器提供程序

实现装饰器提供程序

测试设计时实现

测试设计时实现

后续步骤

请参见

概念

其他资源

其他资源