다음을 통해 공유

연습: 컨트롤 내에 레일 구현

  • 아티클

이 연습에서는 WPF(Windows Presentation Foundation) 사용자 지정 컨트롤에 대한 레일 표시기(Adorner)를 만드는 방법을 보여 줍니다. 레일 표시기는 단일 축을 따라 크기가 조정되지 않는 컨트롤의 한쪽 가장자리에 표식이나 눈금자를 표시합니다. 표시기는 컨트롤 내에 배치되는 슬라이더입니다. 표시기를 사용하면 사용자 지정 단추 컨트롤에 RenderTransform 속성을 설정할 수 있습니다. RenderTransform 속성을 설정하면 컨트롤이 기울어집니다. 전체 코드 목록은 WPF and Silverlight Designer Extensibility Samples 사이트의 Skew Adorner 샘플을 참조하십시오. .

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

  • WPF 사용자 지정 컨트롤 라이브러리 프로젝트를 만듭니다.

  • 디자인 타임 메타데이터를 위한 별도의 어셈블리를 만듭니다.

  • 표시기 공급자를 구현합니다.

  • 디자인 타임에 컨트롤을 테스트합니다.

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

참고

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

사전 요구 사항

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

  • Visual Studio 2010.

사용자 지정 컨트롤 만들기

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

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

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

    코드 편집기에 CustomControl1의 코드가 열립니다.

  2. 솔루션 탐색기에서 코드 파일의 이름을 SkewButton.cs 또는 SkewButton.vb로 변경합니다. 이 프로젝트의 모든 참조에서 이름을 바꿀지 묻는 메시지 상자가 표시되면 예를 클릭합니다.

  3. 코드 편집기에서 SkewButton.cs 또는 SkewButton.vb를 엽니다.

  4. 자동으로 생성된 코드를 다음 코드로 바꿉니다. SkewButton 사용자 지정 컨트롤은 Button에서 상속되며 디자이너에서 단추가 나타날 때 "Design mode active"라는 텍스트를 표시합니다. GetIsInDesignMode 검사 및 다음 디자인 타임 코드는 선택적이며 데모 용도로만 표시됩니다.

    Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.ComponentModel


' The SkewButton control implements a button
' with a skew transformation applied.
Public Class SkewButton
    Inherits Button

    Public Sub New() 

        ' The following code enables custom design-mode logic.
        ' The GetIsInDesignMode check and the following design-time 
        ' code are optional and shown only for demonstration.
        If DesignerProperties.GetIsInDesignMode(Me) Then
            Content = "Design mode active"
        End If

    End Sub
End Class

    using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
using System.Windows.Media;
using System.ComponentModel;

namespace SkewButtonLibrary
{
    // The SkewButton control implements a button
    // with a skew transformation applied.
    public class SkewButton : Button
    {
        public SkewButton()
        {   
            // The following code enables custom design-mode logic.
            // The GetIsInDesignMode check and the following design-time 
            // code are optional and shown only for demonstration.
            if (DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "Design mode active";
            }
        }
    }
}

  5. 프로젝트의 출력 경로를 "bin\"으로 설정합니다.

  6. 솔루션을 빌드합니다.

디자인 타임 메타데이터 어셈블리 만들기

디자인 타임 코드는 특수 메타데이터 어셈블리에 배포됩니다. 이 연습에서 사용자 지정 표시기는 SkewButtonLibrary.VisualStudio.Design이라는 어셈블리에 배포됩니다. 자세한 내용은 디자인 타임 메타데이터 제공을 참조하십시오.

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

  1. Visual Basic 또는 Visual C#에서 SkewButtonLibrary.VisualStudio.Design이라는 새 클래스 라이브러리 프로젝트를 솔루션에 추가합니다.

  2. 프로젝트의 출력 경로를 ".. \SkewButtonLibrary\bin\"으로 설정합니다. 이렇게 하면 컨트롤의 어셈블리와 메타데이터 어셈블리가 같은 폴더에 유지되므로 디자이너에서 메타데이터를 검색할 수 있습니다.

  3. 다음 WPF 어셈블리에 대한 참조를 추가합니다.

    • PresentationCore

    • PresentationFramework

    • System.Xaml

    • WindowsBase

  4. 다음 WPF Designer 어셈블리에 대한 참조를 추가합니다.

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  5. SkewButtonLibrary 프로젝트에 참조를 추가하려면

  6. 솔루션 탐색기에서 Class1 코드 파일의 이름을 Metadata.cs 또는 Metadata.vb로 변경합니다. 이 프로젝트의 모든 참조에서 이름을 바꿀지 묻는 메시지 상자가 표시되면 예를 클릭합니다.

  7. 자동으로 생성된 코드를 다음 코드로 바꿉니다. 이 코드는 사용자 지정 디자인 타임 구현을 SkewButton 클래스에 연결하는 AttributeTable을 만듭니다.

    Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.ComponentModel
Imports System.Windows.Media
Imports System.Windows.Controls
Imports System.Windows

Imports Microsoft.Windows.Design.Features
Imports Microsoft.Windows.Design.Metadata
Imports SkewButtonLibrary.VisualStudio.Design

Imports SkewButtonLibrary

' The ProvideMetadata assembly-level attribute indicates to designers
' that this assembly contains a class that provides an attribute table. 
<Assembly: ProvideMetadata(GetType(SkewButtonLibrary.VisualStudio.Design.Metadata))> 

' 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.
Friend Class Metadata
    Implements IProvideAttributeTable

    ' Accessed by the designer to register any design-time metadata.
    Public ReadOnly Property AttributeTable() As AttributeTable _
        Implements IProvideAttributeTable.AttributeTable
        Get
            Dim builder As New AttributeTableBuilder()

            ' Add the adorner provider to the design-time metadata.
            builder.AddCustomAttributes( _
                GetType(SkewButton), _
                New FeatureAttribute(GetType(SkewButtonAdornerProvider)))

            Return builder.CreateTable()
        End Get
    End Property
End Class

    using System;
using System.Collections.Generic;
using System.Text;
using System.ComponentModel;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows;

using SkewButtonLibrary;
using Microsoft.Windows.Design.Features;
using Microsoft.Windows.Design.Metadata;
using SkewButtonLibrary.VisualStudio.Design;

[assembly: ProvideMetadata(typeof(SkewButtonLibrary.VisualStudio.Design.Metadata))]
namespace SkewButtonLibrary.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(SkewButton),
                    new FeatureAttribute(typeof(SkewButtonAdornerProvider)));

                return builder.CreateTable();
            }
        }
    }
}

  8. 솔루션을 저장합니다.

표시기 공급자 구현

표시기 공급자는 SkewButtonAdornerProvider라는 형식에 구현됩니다. 이 표시기 FeatureProvider를 통해 디자인 타임에 컨트롤의 RenderTransform 속성을 설정할 수 있습니다.

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

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

  2. SkewButtonAdornerProvider에 대한 코드 편집기에서 자동으로 생성된 코드를 다음 코드로 바꿉니다. 이 코드는 사용자 지정 표시기를 제공하는 PrimarySelectionAdornerProvider를 구현합니다.

    Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Input
Imports System.Windows
Imports System.Windows.Automation
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports Microsoft.Windows.Design.Interaction
Imports Microsoft.Windows.Design.Model


' The following class implements an adorner provider for the 
' SkewButton control. The adorner is a slider control, which 
' changes the SkewTransform of the SkewButton along the x-axis. 
' The adorner is placed inside the adorned control.
Class SkewButtonAdornerProvider
    Inherits PrimarySelectionAdornerProvider
    Private adornedControlModel As ModelItem
    Private batchedChange As ModelEditingScope
    Private skewSlider As Slider
    Private skewSliderAdornerPanel As AdornerPanel

    Public Sub New() 
        skewSlider = New Slider()
    End Sub

    ' The following method is called when the adorner is activated.
    ' It creates the adorner control, sets up the adorner panel,
    ' and attaches a ModelItem to the SkewButton.
    Protected Overrides Sub Activate(ByVal item As ModelItem)
        ' Save the ModelItem and hook into when it changes.
        ' This enables updating the slider position when 
        ' a new background value is set.
        adornedControlModel = item
        AddHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged

        ' Setup the slider's min and max values.
        skewSlider.Minimum = 0
        skewSlider.Maximum = 45

        ' Set the slider's background to the rail fill color.
        skewSlider.Background = AdornerColors.RailFillBrush

        ' All adorners are placed in an AdornerPanel
        ' for sizing and layout support.
        Dim panel As AdornerPanel = Me.Panel

        ' Position the slider as a rail inside the custom control.
        AdornerPanel.SetAdornerHorizontalAlignment(skewSlider, AdornerHorizontalAlignment.Stretch)
        AdornerPanel.SetAdornerVerticalAlignment(skewSlider, AdornerVerticalAlignment.Top)
        AdornerPanel.SetAdornerMargin(skewSlider, New Thickness(5, 5, 5, 0))

        ' Initialize the slider when it is loaded.
        AddHandler skewSlider.Loaded, AddressOf slider_Loaded

        ' Handle the value changes of the slider control.
        AddHandler skewSlider.ValueChanged, AddressOf slider_ValueChanged

        AddHandler skewSlider.PreviewMouseLeftButtonUp, AddressOf slider_MouseLeftButtonUp

        AddHandler skewSlider.PreviewMouseLeftButtonDown, AddressOf slider_MouseLeftButtonDown

        ' Run the base implementation.
        MyBase.Activate(item)

    End Sub

    ' The Panel utility property demand-creates the 
    ' adorner panel and adds it to the provider's 
    ' Adorners collection.
    Public ReadOnly Property Panel() As AdornerPanel
        Get
            If Me.skewSliderAdornerPanel Is Nothing Then
                Me.skewSliderAdornerPanel = New AdornerPanel()

                ' Add the adorner to the adorner panel.
                Me.skewSliderAdornerPanel.Children.Add(skewSlider)

                ' Add the panel to the Adorners collection.
                Adorners.Add(skewSliderAdornerPanel)
            End If

            Return Me.skewSliderAdornerPanel
        End Get
    End Property

    ' The following method deactivates the adorner.
    Protected Overrides Sub Deactivate() 

        RemoveHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged

        MyBase.Deactivate()

    End Sub


    ' The following method handles the Loaded event.
    ' It assigns the slider control's initial value.
    Sub slider_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) 
        skewSlider.Value = GetCurrentSkewAngle()

    End Sub


    ' The following method handles the PropertyChanged event.
    ' It updates the slider control's value if the SkewButton control's 
    ' RenderTransform property changed.
    Sub AdornedControlModel_PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) 
        If e.PropertyName = "RenderTransform" Then
            ' Assign the SkewButton control's skew angle to the slider.
            skewSlider.Value = GetCurrentSkewAngle()
        End If

    End Sub


    ' The following method handles the MouseLeftButtonDown event.
    ' It calls the BeginEdit method on the ModelItem which represents the
    ' Skewcontrol.
    Sub slider_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) 
        batchedChange = adornedControlModel.BeginEdit()

    End Sub


    ' The following method handles the MouseLeftButtonUp event.
    ' It commits any changes made to the ModelItem which represents the
    ' Skewcontrol.
    Sub slider_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) 
        If Not (batchedChange Is Nothing) Then
            batchedChange.Complete()
            batchedChange.Dispose()
            batchedChange = Nothing
        End If

    End Sub


    ' The following method handles the slider control's 
    ' ValueChanged event. It sets the value of the 
    ' RenderTransform property by using the ModelProperty
    ' type.
    Sub slider_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))

        Dim newSkewValue As Double = e.NewValue

        ' During setup, don't make a value local and set the skew angle.
        If newSkewValue = GetCurrentSkewAngle() Then
            Return
        End If

        ' Access the SkewButton control's RenderTransform property
        ' by using the ModelProperty type.
        Dim skewProperty As ModelProperty = adornedControlModel.Properties("RenderTransform")

        If Not skewProperty.IsSet Then
            ' If the value isn't local, make it local 
            ' before setting a sub-property value.
            skewProperty.SetValue(skewProperty.ComputedValue)
        End If

        ' Set the RenderTransform property on the SkewButton.
        skewProperty.SetValue(New SkewTransform(newSkewValue, 0))

    End Sub

    ' This utility method gets the SkewControl control's
    ' skew angle by using the ModelItem.
    Private Function GetCurrentSkewAngle()
        Dim skewXform As SkewTransform = adornedControlModel.Properties("RenderTransform").ComputedValue
        Return skewXform.AngleX
    End Function

End Class

    using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;
using System.Windows;
using System.Windows.Automation;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using Microsoft.Windows.Design.Interaction;
using Microsoft.Windows.Design.Model;

namespace SkewButtonLibrary.VisualStudio.Design
{
    // The following class implements an adorner provider for the 
    // SkewButton control. The adorner is a slider control, which 
    // changes the SkewTransform of the SkewButton along the x-axis. 
    // The adorner is placed inside the adorned control.
    class SkewButtonAdornerProvider : PrimarySelectionAdornerProvider
    {
        private ModelItem adornedControlModel;
        private ModelEditingScope batchedChange;
        private Slider skewSlider;
        private AdornerPanel skewButtonAdornerPanel;

        public SkewButtonAdornerProvider()
        {
            skewSlider = new Slider();
        }

        // The following method is called when the adorner is activated.
        // It creates the adorner control, sets up the adorner panel,
        // and attaches a ModelItem to the SkewButton.
        protected override void Activate(ModelItem item)
        {
            // Save the ModelItem and hook into when it changes.
            // This enables updating the slider position when 
            // a new background value is set.
            adornedControlModel = item;
            adornedControlModel.PropertyChanged += 
                new System.ComponentModel.PropertyChangedEventHandler(
                    AdornedControlModel_PropertyChanged);

            // Setup the slider's min and max values.
            skewSlider.Minimum = 0;
            skewSlider.Maximum = 45;

            // Set the slider's background to the rail fill color.
            skewSlider.Background = AdornerColors.RailFillBrush;

            // All adorners are placed in an AdornerPanel
            // for sizing and layout support.
            AdornerPanel panel = this.Panel;

            AdornerPanel.SetAdornerHorizontalAlignment(skewSlider, AdornerHorizontalAlignment.Stretch);
            AdornerPanel.SetAdornerVerticalAlignment(skewSlider, AdornerVerticalAlignment.Top);
            AdornerPanel.SetAdornerMargin(skewSlider, new Thickness(5, 5, 5, 0));

            // Initialize the slider when it is loaded.
            skewSlider.Loaded += new RoutedEventHandler(slider_Loaded);

            // Handle the value changes of the slider control.
            skewSlider.ValueChanged += 
                new RoutedPropertyChangedEventHandler<double>(
                    slider_ValueChanged);

            skewSlider.PreviewMouseLeftButtonUp += 
                new System.Windows.Input.MouseButtonEventHandler(
                    slider_MouseLeftButtonUp);

            skewSlider.PreviewMouseLeftButtonDown += 
                new System.Windows.Input.MouseButtonEventHandler(
                    slider_MouseLeftButtonDown);

            // Run the base implementation.
            base.Activate(item);
        }

        // The Panel utility property demand-creates the 
        // adorner panel and adds it to the provider's 
        // Adorners collection.
        public AdornerPanel Panel
        {
            get
            {
                if (this.skewButtonAdornerPanel == null)
                {
                    skewButtonAdornerPanel = new AdornerPanel();

                    skewButtonAdornerPanel.Children.Add(skewSlider);

                    // Add the panel to the Adorners collection.
                    Adorners.Add(skewButtonAdornerPanel);
                }

                return this.skewButtonAdornerPanel;
            }
        }

        // The following method deactivates the adorner.
        protected override void Deactivate()
        {
            adornedControlModel.PropertyChanged -= 
                new System.ComponentModel.PropertyChangedEventHandler(
                    AdornedControlModel_PropertyChanged);

            base.Deactivate();
        }

        // The following method handles the Loaded event.
        // It assigns the slider control's initial value.
        void slider_Loaded(object sender, RoutedEventArgs e)
        {   
            skewSlider.Value = GetCurrentSkewAngle();
        }

        // The following method handles the PropertyChanged event.
        // It updates the slider control's value if the SkewButton control's 
        // RenderTransform property changed.
        void AdornedControlModel_PropertyChanged(
            object sender, 
            System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "RenderTransform")
            {
                // Assign the SkewButton control's skew angle to the slider.
                skewSlider.Value = GetCurrentSkewAngle();
            }
        }

        // The following method handles the MouseLeftButtonDown event.
        // It calls the BeginEdit method on the ModelItem which represents the
        // Skewcontrol.
        void slider_MouseLeftButtonDown(
            object sender, 
            System.Windows.Input.MouseButtonEventArgs e)
        {
            batchedChange = adornedControlModel.BeginEdit();
        }

        // The following method handles the MouseLeftButtonUp event.
        // It commits any changes made to the ModelItem which represents the
        // Skewcontrol.
        void slider_MouseLeftButtonUp(
            object sender, 
            System.Windows.Input.MouseButtonEventArgs e)
        {
            if (batchedChange != null)
            {
                batchedChange.Complete();
                batchedChange.Dispose();
                batchedChange = null;
            }
        }

        // The following method handles the slider control's 
        // ValueChanged event. It sets the value of the 
        // RenderTransform property by using the ModelProperty
        // type.
        void slider_ValueChanged(
            object sender, 
            RoutedPropertyChangedEventArgs<double> e)
        {
            double newSkewValue = e.NewValue;

            // During setup, don't make a value local and set the skew angle.
            if (newSkewValue == GetCurrentSkewAngle())
            {
                return;
            }

            // Access the SkewButton control's RenderTransform property
            // by using the ModelProperty type.
            ModelProperty skewProperty = 
                adornedControlModel.Properties["RenderTransform"];

            if (!skewProperty.IsSet)
            {
                // If the value isn't local, make it local 
                // before setting a sub-property value.
                skewProperty.SetValue(skewProperty.ComputedValue);
            }

            // Set the RenderTransform property on the SkewButton.
            skewProperty.SetValue(new SkewTransform(newSkewValue, 0));
        }

        // This utility method gets the SkewControl control's
        // skew angle by using the ModelItem.
        private double GetCurrentSkewAngle()
        {   
            SkewTransform skewXform = adornedControlModel.Properties[
                "RenderTransform"].ComputedValue as SkewTransform;

            return skewXform.AngleX;
        }
    }
}

  3. 솔루션을 빌드합니다.

디자인 타임 구현 테스트

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

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

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

    WPF Designer에 MainWindow.xaml이 열립니다.

  2. SkewButtonLibrary 프로젝트에 참조를 추가합니다.

  3. XAML 뷰에서 자동으로 생성된 XAML을 다음 XAML로 바꿉니다. 이 XAML은 SkewButtonLibrary 네임스페이스에 대한 참조를 추가하고 SkewButton 사용자 지정 컨트롤을 추가합니다. 디자인 뷰에서 단추가 "Design mode active"라는 텍스트와 함께 표시되어 디자인 모드임을 나타냅니다. 단추가 표시되지 않는 경우 디자이너 위쪽의 정보 표시줄을 클릭하여 뷰를 다시 로드해야 할 수 있습니다.

    <Window x:Class="DemoApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cc="clr-namespace:SkewButtonLibrary;assembly=SkewButtonLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <cc:SkewButton Margin="30,30,30,30" Background="#FFD4D0C8">
            <cc:SkewButton.RenderTransform>
                <SkewTransform AngleX="0" AngleY="0" />
            </cc:SkewButton.RenderTransform>
        </cc:SkewButton>
    </Grid>
</Window>

  4. 디자인 뷰에서 SkewButton 컨트롤을 클릭하여 선택합니다.

    SkewButton 컨트롤 내에 Slider 컨트롤이 표시됩니다. 슬라이더 컨트롤이 표시되지 않으면 솔루션을 다시 빌드합니다.

  5. 슬라이더 컨트롤의 값을 변경합니다.

    슬라이더를 끌면 컨트롤이 기울어집니다. XAML 뷰에서 RenderTransform 속성이 표시기에 지정된 값으로 설정됩니다.

  6. DemoApplication 프로젝트를 실행합니다.

    런타임에 단추가 표시기를 사용하여 설정한 각도로 기울어집니다.

다음 단계

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

참고 항목

참조

PrimarySelectionAdornerProvider

SkewTransform

기타 리소스

WPF and Silverlight Designer Extensibility Samples

고급 확장성 개념

WPF Designer 확장성