연습: 디자인 타임에 속성 동작 변경

아티클
08/20/2008

업데이트: 2007년 11월

확장성을 사용하여 Windows Presentation Foundation(WPF) Designer for Visual Studio를 사용자 지정할 때 사용자 지정 컨트롤을 만드는 경우가 많습니다. 사용자가 계속 속성 값을 정상적으로 설정할 수 있게 하면서도 디자인 타임에 컨트롤 속성이 런타임과 다르게 동작하도록 해야 하는 경우가 있습니다. 예를 들어 사용자가 컨트롤의 visible 속성을 false로 설정할 수 있게 할 수 있지만 컨트롤은 디자인 타임에 여전히 볼 수 있어야 합니다.

이 연습에서는 사용자 지정 Button을 만들고 Background 및 Content 속성의 동작을 변경합니다. 이를 위해 DesignModeValueProvider를 만들고 사용자 지정 컨트롤에 연결합니다. DesignModeValueProvider는 사용자가 속성에서 변경하는 내용을 캡처합니다. 그리고 사용자가 TranslatePropertyValue 메서드에 고유의 논리를 삽입하면 DesignModeValueProvider는 새 값을 디자이너에 전달합니다.

중요:
이 방법을 사용하면 디자이너의 속성 동작이 XAML 뷰의 속성 값과 일치하지 않습니다. XAML 뷰에서는 사용자가 디자인 타임에 입력한 값을 표시합니다. XAML 뷰의 값은 런타임에 속성이 보일 동작을 나타냅니다.

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

WPF 사용자 지정 컨트롤 라이브러리 프로젝트를 만듭니다.
사용자 지정 DesignModeValueProvider를 만듭니다.
사용자 지정 단추 컨트롤을 만듭니다.
사용자 지정 컨트롤에 DesignModeValueProvider를 연결합니다.
테스트 응용 프로그램을 만듭니다.
사용자 지정 컨트롤을 테스트합니다.

참고:
실제 설정이나 버전에 따라서 화면에 나타나는 대화 상자와 메뉴 명령이 도움말의 설명과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 Visual Studio 설정을 참조하십시오.

사전 요구 사항

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

Visual Studio 2008

WPF 사용자 지정 컨트롤 라이브러리 프로젝트 만들기

프로젝트를 만들려면

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

코드 편집기에 CustomControl1의 코드가 열립니다.
다음 어셈블리에 대한 참조를 추가합니다.
- Microsoft.Windows.Design.Extensibility
솔루션 탐색기에서 코드 파일의 이름을 CustomButton.cs 또는 CustomButton.vb로 변경합니다.

이 프로젝트의 모든 참조에서 이름을 바꿀지 묻는 메시지 상자가 표시되면 예를 클릭합니다.
솔루션 탐색기에서 테마 폴더를 확장하고 Generic.xaml 파일을 엽니다.

WPF Designer에서 Generic.xaml이 열립니다.
Generic.xaml 파일의 XAML 뷰에서 발견되는 모든 "CustomControl1"을 "CustomButton"으로 바꿉니다.
빌드 메뉴에서 솔루션 빌드를 클릭합니다.

사용자 지정 DesignModeValueProvider 만들기

이 절차에서는 사용자 지정 DesignModeValueProvider를 만듭니다. TranslatePropertyValue 메서드에서 Button의 Content 속성을 변경하여 디자이너에서 대문자로 표시되도록 합니다. 또한 Button의 Background 속성을 변경하여 디자이너에서 기본 시스템 색으로 표시되도록 합니다. 이러한 변경은 디자이너에만 적용됩니다. 런타임에 Content 및 Background 속성은 사용자가 설정한 값으로 표시됩니다.

참고:
이 절차에서는 두 가지 다른 속성을 처리하는 하나의 DesignModeValueProvider를 만듭니다. 또한 서로 다른 속성을 처리하는 여러 DesignModeValueProvider 개체를 만들 수도 있습니다.

사용자 지정 DesignModeValueProvider를 만들려면

CustomButton 프로젝트에 CustomButtonDesignModeValueProvider.cs 또는 CustomButtonDesignModeValueProvider.vb라는 새 클래스를 추가합니다.

새 클래스가 코드 편집기에서 열립니다.

다음 네임스페이스를 파일의 맨 위에 추가합니다. 기존 네임스페이스가 있는 경우 이것으로 바꿉니다.

Imports System
Imports System.Windows                  'SystemColors
Imports System.Windows.Media            'SolidColorBrush
Imports System.Windows.Controls         'Button
Imports Microsoft.Windows.Design.Model  'DesignModeValueProvider

using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;   //DesignModeValueProvider

DesignModeValueProvider에서 상속되도록 CustomButtonDesignModeValueProvider 클래스를 편집합니다.

Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class

class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

클래스에 생성자를 추가합니다. 생성자에서 캡처할 속성을 식별합니다.

Public Sub New()

    Properties.Add(Button.ContentProperty)
    Properties.Add(Button.BackgroundProperty)
End Sub

public CustomButtonDesignModeValueProvider()
{
    Properties.Add(Button.ContentProperty);
    Properties.Add(Button.BackgroundProperty);
}

클래스에서 TranslatePropertyValue 메서드를 재정의합니다. 디자인 타임에 새 속성 동작을 여기에 지정합니다.

Public Overrides Function TranslatePropertyValue(ByVal identifier As PropertyIdentifier, ByVal value As Object) As Object

    If identifier.DependencyProperty Is Button.ContentProperty Then

        Return value.ToString().ToUpper()
    End If

    If identifier.DependencyProperty Is Button.BackgroundProperty Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(identifier, value)
End Function

public override object TranslatePropertyValue(PropertyIdentifier identifier, object value)
{
    if (identifier.DependencyProperty == Button.ContentProperty)
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DependencyProperty == Button.BackgroundProperty)
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(identifier, value);
}

빌드 메뉴에서 솔루션 빌드를 클릭합니다.

사용자 지정 단추 컨트롤 만들기

이 절차에서는 사용자 지정 컨트롤을 만듭니다. Button에서 상속하지만 추가 사용자 지정 기능이 없는 간단한 사용자 지정 컨트롤을 만듭니다.

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

코드 편집기에서 CustomButton 클래스를 엽니다.

다음 네임스페이스를 파일의 맨 위에 추가합니다. 기존 네임스페이스가 있는 경우 이것으로 바꿉니다.

Imports System.Windows.Controls             'Button
Imports Microsoft.Windows.Design.Features   'Feature

using System.Windows.Controls;              //Button
using Microsoft.Windows.Design.Features;    //Feature

기존 클래스를 다음으로 바꿉니다.

Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class

public class CustomButton : Button
{
    static CustomButton()
    {
    }
}

빌드 메뉴에서 솔루션 빌드를 클릭합니다.

사용자 지정 컨트롤에 DesignModeValueProvider 연결

이 절차에서는 FeatureAttribute 특성을 사용하여 DesignModeValueProvider를 사용자 지정 컨트롤에 연결합니다.

참고:
또한 메타데이터 저장소를 사용하여 DesignModeValueProvider를 사용자 지정 컨트롤에 연결할 수도 있습니다. 자세한 내용은 메타데이터 저장소 및 방법: 메타데이터 저장소 사용을 참조하십시오.

DesignModeValueProvider를 사용자 지정 컨트롤에 연결하려면

코드 편집기에서 CustomButton 클래스의 선언을 찾습니다. 코드가 다음과 같아야 합니다.
```
Public Class CustomButton
    Inherits Button
```
```
public class CustomButton : Button
```

클래스 선언에 Feature 특성을 추가하고 DesignModeValueProvider를 지정합니다.

<Feature(GetType(CustomButtonDesignModeValueProvider))> _
Public Class CustomButton
    Inherits Button

[Feature(typeof(CustomButtonDesignModeValueProvider))]
public class CustomButton : Button

빌드 메뉴에서 솔루션 빌드를 클릭합니다.

테스트 응용 프로그램 만들기

테스트 응용 프로그램을 만들려면

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

WPF Designer에 Window1.xaml이 열립니다.
솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 시작 프로젝트로 설정을 클릭합니다.
프로젝트 메뉴에서 참조 추가를 클릭하고 프로젝트 탭을 사용하여 CustomButton 프로젝트에 대한 참조를 추가합니다.
빌드 메뉴에서 솔루션 빌드를 클릭합니다.

사용자 지정 컨트롤 테스트

사용자 지정 컨트롤을 테스트하려면

Window1.xaml의 XAML 뷰에서 기존 XAML을 다음으로 바꿉니다.

<Window x:Class="CustomButtonTestApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cb="clr-namespace:CustomButton;assembly=CustomButton"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

디자인 뷰에서 단추를 선택합니다. 필요하면 디자이너 위쪽의 정보 표시줄을 클릭하여 뷰를 다시 로드합니다.
속성 창에서 Background 속성을 찾습니다.
Red를 입력하고 Enter 키를 누릅니다.

XAML이 Background="Red" 코드로 업데이트되지만 디자인 뷰에서는 단추의 색이 변경되지 않습니다.
속성 창에서 Content 속성을 찾습니다.
Hello World를 입력하고 Enter 키를 누릅니다.

XAML이 Hello World 콘텐츠로 업데이트되지만 디자인 뷰에서는 단추에 HELLO WORLD라는 텍스트가 표시됩니다.
디버그 메뉴에서 디버깅 시작을 클릭합니다.

응용 프로그램이 시작되고 창이 열립니다. 런타임에 단추는 빨간색이고 Hello World라는 텍스트를 포함합니다.
창을 닫습니다.