연습: 내부 편집 기능 구현

아티클
08/10/2011

이 연습에서는 WPF(Windows Presentation Foundation) 사용자 지정 컨트롤에 대한 내부 편집 기능을 구현하는 방법을 보여 줍니다. WPF Designer for Visual Studio에서 이 디자인 타임 기능을 사용하면 사용자 지정 단추 컨트롤의 Content 속성 값을 설정할 수 있습니다. 이 연습에서 컨트롤은 단순한 단추이고 표시기(Adorner)는 단추의 콘텐츠를 변경하는 데 사용할 수 있는 텍스트 상자입니다.

이 연습에서는 다음 작업을 수행합니다.

WPF 사용자 지정 컨트롤 라이브러리 프로젝트를 만듭니다.
디자인 타임 메타데이터를 위한 별도의 어셈블리를 만듭니다.
내부 편집 기능에 대한 표시기 공급자를 구현합니다.
디자인 타임에 컨트롤을 테스트합니다.

이 연습을 마치면 사용자 지정 컨트롤에 대한 표시기 공급자를 만드는 방법을 이해하게 됩니다.

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

Visual Studio 2010.

사용자 지정 컨트롤 만들기

첫 번째 단계로 사용자 지정 컨트롤에 대한 프로젝트를 만듭니다. 이 컨트롤은 디자인 타임 코드가 약간 사용되는 간단한 단추이며, 이 코드에서는 GetIsInDesignMode 메서드를 사용하여 디자인 타임 동작을 구현합니다.

사용자 지정 컨트롤을 만들려면

Visual C#에서 CustomControlLibrary라는 새 WPF 사용자 지정 컨트롤 라이브러리 프로젝트를 만듭니다.

코드 편집기에 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이라는 어셈블리에 배포됩니다. 자세한 내용은 디자인 타임 메타데이터 제공을 참조하십시오.

디자인 타임 메타데이터 어셈블리를 만들려면

Visual C#에서 CustomControlLibrary.VisualStudio.Design이라는 새 클래스 라이브러리 프로젝트를 솔루션에 추가합니다.
프로젝트의 출력 경로를 ".. \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 속성을 설정할 수 있습니다.

표시기 공급자를 구현하려면

CustomControlLibrary.VisualStudio.Design 프로젝트에 InplaceButtonAdorners라는 새 클래스를 추가합니다.

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

}

솔루션을 빌드합니다.

디자인 타임 구현 테스트

DemoControl 클래스를 다른 WPF 컨트롤과 같은 방식으로 사용할 수 있습니다. WPF Designer에서는 모든 디자인 타임 개체의 생성을 처리합니다.

디자인 타임 구현을 테스트하려면

Visual C#에서 DemoApplication이라는 새 WPF 응용 프로그램 프로젝트를 솔루션에 추가합니다.

WPF Designer에 MainWindow.xaml이 열립니다.
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 문자 모양을 클릭하여 내부 편집을 활성화합니다.

DemoControl의 Content를 보여 주는 텍스트 상자가 나타납니다. 현재는 콘텐츠가 비어 있으므로 단추 가운데에 커서만 표시됩니다.
텍스트 콘텐츠의 새 값을 입력하고 Enter 키를 누릅니다.

XAML 뷰에서 Content 속성이 앞서 디자인 뷰에서 입력한 텍스트 값으로 설정됩니다.
DemoApplication 프로젝트를 시작 프로젝트로 설정하고 솔루션을 실행합니다.

런타임에 표시기를 사용하여 설정한 텍스트 값이 단추에 표시됩니다.

다음 단계

사용자 지정 컨트롤에 사용자 지정 디자인 타임 기능을 더 추가할 수 있습니다.

사용자 지정 디자인 타임에 MenuAction을 추가합니다. 자세한 내용은 연습: 메뉴 공급자 만들기를 참조하십시오.
속성 창에서 사용할 수 있는 사용자 지정 색 편집기를 만듭니다. 자세한 내용은 연습: 색 편집기 구현을 참조하십시오.
컨트롤의 투명도를 설정하는 데 사용할 사용자 지정 표시기를 만듭니다. 자세한 내용은 연습: 디자인 타임 표시기 만들기를 참조하십시오.

참고 항목

기타 리소스

사용자 지정 편집기 만들기

WPF Designer 확장성

디자인 타임 메타데이터 제공

다음을 통해 공유