다음을 통해 공유

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

  • 아티클

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

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

중요

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

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

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

  • 사용자 지정 DesignModeValueProvider를 만듭니다.

  • 사용자 지정 단추 컨트롤을 만듭니다.

  • 사용자 지정 컨트롤에 DesignModeValueProvider를 연결합니다.

  • 테스트 응용 프로그램을 만듭니다.

  • 사용자 지정 컨트롤을 테스트합니다.

참고

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

사전 요구 사항

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

  • Visual Studio 2010

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

프로젝트를 만들려면

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

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

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

    • Microsoft.Windows.Design.Extensibility

  3. 솔루션 탐색기에서 코드 파일의 이름을 CustomButton.cs 또는 CustomButton.vb로 변경합니다.

    이 프로젝트의 모든 참조에서 이름을 바꿀지 묻는 메시지 상자가 표시되면 예를 클릭합니다.

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

사용자 지정 DesignModeValueProvider 만들기

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

참고

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

사용자 지정 DesignModeValueProvider를 만들려면

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

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

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

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


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

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

    
Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class

    
class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

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

    
Public Sub New()
    Properties.Add(GetType(Button), "Content")
    Properties.Add(GetType(Button), "Background")
End Sub

    
public CustomButtonDesignModeValueProvider()
{
    Properties.Add( typeof(Button), "Content");
    Properties.Add(typeof(Button), "Background");
}

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

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

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Content" Then

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

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Background" Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(item, identifier, value)
End Function

    
public override object TranslatePropertyValue(ModelItem item, PropertyIdentifier identifier, object value)
{
    if (identifier.DeclaringType == typeof( Button ) &&
        identifier.Name == "Content" )
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DeclaringType == typeof(Button) &&
        identifier.Name == "Background")
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(item, identifier, value);
}

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

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

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

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

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

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

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

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

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

    
Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class

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

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

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

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

참고

사용자 지정 디자인 타임 메타데이터 제공을 통해 DesignModeValueProvider를 사용자 지정 컨트롤에 연결할 수도 있습니다. 자세한 내용은 디자인 타임 메타데이터 제공을 참조하십시오.

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

  1. 코드 편집기에서 CustomButton 클래스의 선언을 찾습니다. 코드가 다음과 같아야 합니다.

    
Public Class CustomButton
    Inherits Button

    
public class CustomButton : Button

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

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

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

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

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

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

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

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

  2. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 시작 프로젝트로 설정을 클릭합니다.

  3. 프로젝트 메뉴에서 참조 추가를 클릭하고 프로젝트 탭을 사용하여 CustomButton 프로젝트에 대한 참조를 추가합니다.

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

사용자 지정 컨트롤 테스트

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

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

    <Window x:Class="CustomButtonTestApplication.MainWindow"
    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="MainWindow" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

  2. 디자인 뷰에서 단추를 선택합니다. 필요하면 디자이너 위쪽의 정보 표시줄을 클릭하여 뷰를 다시 로드합니다.

  3. 속성 창에서 Background 속성을 찾습니다.

  4. Red를 입력하고 Enter 키를 누릅니다.

    XAML이 Background="Red" 코드로 업데이트되지만 디자인 뷰에서는 단추의 색이 변경되지 않습니다.

  5. 속성 창에서 Content 속성을 찾습니다.

  6. Hello World를 입력하고 Enter 키를 누릅니다.

    XAML이 Hello World 콘텐츠로 업데이트되지만 디자인 뷰에서는 단추에 HELLO WORLD라는 텍스트가 표시됩니다.

  7. 디버그 메뉴에서 디버깅 시작을 클릭합니다.

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

  8. 창을 닫습니다.

참고 항목

작업

방법: 디자인 타임에 속성 동작 변경

방법: 사용자 지정 컨트롤이 디자인 타임에 있는지 런타임에 있는지 확인

기타 리소스

디자인 타임 동작과 런타임 동작 비교

WPF Designer 확장성 이해

WPF Designer 확장성

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