실습 정보: 사용자 지정 속성으로 사용자 지정 컨트롤 만들기

  • 아티클

Microsoft Expression Blend는 응용 프로그램에서 사용할 수 있는 다양한 시스템 컨트롤과 단순한 스타일(simple style)을 제공합니다. 만약 이러한 컨트롤 또는 스타일이 사용자의 구체적인 요구에 부합하지 않을 경우 System.Windows.Controls 클래스 중 하나에서 상속되는 Microsoft .NET 클래스를 만들어 사용자 지정 컨트롤을 만들 수 있습니다.

다음 절차에서는 이미지 파일의 경로를 포함하는 새 속성을 갖는 사용자 지정 단추 컨트롤을 만들어 이미지를 표시하는 방법을 설명합니다.

코드를 사용하지 않아서 사용자 지정 속성이 없는 사용자 정의 컨트롤을 만드는 방법에 대한 예는 빈 사용자 컨트롤 만들기를 참조하십시오.

XAML 및 코드 예제를 포함하여 사용자 지정 컨트롤에 대한 자세한 내용은 MSDN의 Windows Presentation Foundation Ff723977.xtlink_newWindow(ko-kr,Expression.40).png 섹션에서 컨트롤 제작 개요 Ff723977.xtlink_newWindow(ko-kr,Expression.40).png 및 DependencyProperty 클래스 Ff723977.xtlink_newWindow(ko-kr,Expression.40).png를 참조하십시오.

사용자 지정 컨트롤 정의

  1. 프로젝트 패널에서 Window1.xaml 파일을 찾은 다음 확장하여 프로젝트의 코드 숨김 파일 Window1.xaml.cs를 표시합니다. 프로젝트를 만들 때 Microsoft Visual Basic을 언어로 선택한 경우 코드 숨김 파일의 이름은 Window1.xaml.vb입니다. 편집할 수 있도록 코드 숨김 파일을 두 번 클릭하여 엽니다.

  2. Window1.xaml.cs 파일에서 마지막 닫는 중괄호(}) 바로 앞에 다음 클래스 정의 원본 코드를 붙여 넣습니다. Visual Basic에서는 End Namespace 바로 앞이나 마지막 End Class 바로 뒤에 해당 코드를 붙여 넣습니다.

    public class ImageButton : Button 
{ 
  public ImageSource Source 
  { 
    get { return base.GetValue(SourceProperty) as ImageSource; } 
    set { base.SetValue(SourceProperty, value); } 
  } 
  public static readonly DependencyProperty SourceProperty = 
    DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton), null); 
}

    Class ImageButton
  Inherits Button
  Public Property Source() As ImageSource
    Get
      Return CType(MyBase.GetValue(SourceProperty), ImageSource)
    End Get
    Set(ByVal value As ImageSource)
      MyBase.SetValue(SourceProperty, value)
    End Set
  End Property
  Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton), nothing)
End Class

  3. 수정한 코드 숨김 파일을 저장한 다음 닫습니다.

    tip note팁:

    ImageButton 클래스는 종속성 속성 패턴을 보여 줍니다. 외부적으로 클래스는 ImageSource 형식의 Source 라는 일반적인 CLR(공용 언어 런타임, 즉 .NET) 속성을 표시합니다. 또한 이 클래스는 SourceProperty 라는 읽기 전용 종속성 속성 필드를 등록하고 표시하며 종속성 속성의 측면에서 Source 속성에 대한 CLR 접근자를 구현합니다. 등록된 종속성 속성이 있는 속성을 지원하는 것은 WPF 또는 Silverlight가 스타일 지정, 데이터 바인딩, 값 상속, 기본값 및 애니메이션과 같은 풍부한 기능의 서비스를 속성에 제공할 수 있음을 의미합니다. 컨트롤 템플릿 내에서 속성 값에 바인딩되는 템플릿 바인딩이라는 기능도 갖추고 있습니다. 이 자습서에서는 템플릿 바인딩을 실제로 보여 줍니다.
    tip note팁:

    사용자 지정 컨트롤 클래스 정의 원본 코드는 별도의 원본 코드 파일에 저장할 수 있습니다. 위의 두 단계와 달리, 원하는 경우 ImageButton.cs라는 새 파일을 만들고 문서의 코드 숨김 파일에서 네임스페이스 선언 및 동일한 using 지시문 세트와 함께 원본 코드를 이 파일에 붙여 넣은 다음 프로젝트에 새 파일을 추가할 수 있습니다(프로젝트 메뉴에서 항목 추가 클릭).

  4. 이제 새 ImageButton 컨트롤이 자산 패널에 나타나도록 프로젝트를 빌드해야 합니다. Expression Blend의 프로젝트 메뉴에서 프로젝트 빌드를 클릭하거나 Ctrl+Shift+B를 누릅니다. 오류 없이 빌드가 완료되었는지 확인합니다.

  5. Expression Blend의 Window1.xaml 편집으로 다시 전환합니다.

  6. Expression Blend의 왼쪽에 있는 도구 패널에서 자산Ff723977.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,Expression.40).png을 클릭합니다.

    자산 패널이 열리고 문서에 넣을 수 있는 모든 컨트롤, 패널 및 개체가 표시됩니다.

  7. 프로젝트 탭의 목록에서 ImageButton 컨트롤을 선택합니다.

    이제 자산 단추 아래에 있는 도구 패널 아이콘이 ImageButton 컨트롤로 설정됩니다. 이 아이콘은 이미 선택된 상태이므로 아트보드에 컨트롤을 그릴 수 있습니다.

    [!참고]

    프로젝트에 원본 코드를 추가하고 빌드를 수행(Ctrl+Shift+B)해야만 사용자 지정 컨트롤이 자산 패널의 프로젝트 범주에 나타납니다.

  8. 도구 패널에서 ImageButton 아이콘을 선택한 다음 아트보드를 클릭하고 문서 내에 경계 상자를 그려서 ImageButton 을 그립니다.

    ImageButton 은 아트보드에서 렌더링되고 [ImageButton] "ImageButton" 이라는 ImageButton 개체는 LayoutRoot 의 자식 개체로 개체 및 타임라인 패널에 나열됩니다.

사용자 지정 컨트롤의 스타일 수정

  1. 모든 ImageButton 개체에 대한 컨트롤 템플릿을 만들려면 새 ImageButton 을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 복사본 편집을 클릭합니다.

    Style 리소스 만들기 대화 상자가 나타납니다.

  2. Style 리소스 만들기 대화 상자의 리소스 이름(키) 필드에서 첫 번째 라디오 단추 옆에 있는 텍스트 상자에 ImageButtonStyle을 입력합니다.

    이렇게 하면 템플릿 이름이 리소스 사전에 설정되므로 모든 ImageButton 개체의 템플릿으로 설정할 수 있습니다.

    [!참고]

    컨트롤 템플릿은 스타일 내에서 래핑되므로 컨트롤에 적용되는 스타일에는 컨트롤의 모양(파트) 및 동작이 모두 포함됩니다.

  3. 정의 위치 필드에서 이 문서 라디오 단추를 선택하고 드롭다운 목록에서 Window: Window를 선택해야 합니다.

    정의 위치 필드는 새 템플릿을 정의할 리소스 사전을 나타냅니다. Window: Window를 선택하면 템플릿이 창에 있는 모든 ImageButton 컨트롤에 표시됩니다.

  4. 확인을 클릭합니다.

    이제 모든 ImageButton 개체의 기본 컨트롤 템플릿이 복사되고 ImageButtonStyle 이라는 새 ControlTemplate 으로 복사본이 저장되었습니다. 새 템플릿이 리소스 사전에 저장되었으므로 리소스 패널의 Window 노드에서 볼 수 있습니다.

    새 템플릿을 만들면 Expression Blend에서 새 템플릿을 보고 편집할 수 있는 모드로 전환됩니다. 개체 및 타임라인 패널에서 새 개체 트리 위에 있는 Template이라는 단어는 현재 편집하고 있는 범위를 나타냅니다. 템플릿에는 이 템플릿을 사용하는 ImageButton 의 Content 속성 값을 자동으로 표시할 ContentPresenter 개체가 포함되어 있습니다.

    tip note팁:

    템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 범위를 {0}(으)로 되돌립니다.Ff723977.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,Expression.40).png를 클릭합니다. 이 단추는 ImageButtonStyle 이라는 단어 옆의 개체 트리 위에 있습니다.

    기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인 패널에서 템플릿을 편집할 개체(이 예에서는 [ImageButton] "ImageButton" 개체)를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 현재 항목 편집을 클릭합니다.

  5. 개체 및 타임라인 패널에서 ContentPresenter 개체를 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 가리킨 다음 Grid 를 클릭합니다.

    ContentPresenter 개체가 새 Grid 개체의 자식 개체로 만들어집니다. 크롬(Chrome) 개체에는 자식 개체를 하나만 넣을 수 있으므로 모눈(Grid) 개체가 없으면 두 번째 자식 개체를 추가할 수 없습니다.

  6. 개체 및 타임라인 패널에서 Grid 개체를 선택한 다음 속성 패널의 레이아웃 범주에서 Width 및 Height 속성을 찾습니다. 각 속성 옆에 있는 고급 옵션Ff723977.12e06962-5d8a-480d-a837-e06b84c545bb(ko-kr,Expression.40).png을 클릭하고 다시 설정을 클릭합니다.

  7. 모눈(Grid)을 두 개 열로 구분하려면 개체 및 타임라인 패널에서 모눈(Grid) 개체를 두 번 클릭하여 모눈을 활성화한 다음 도구 패널에서 선택 도구Ff723977.2ff91340-477e-4efa-a0f7-af20851e4daa(ko-kr,Expression.40).png를 선택하고 아트보드에서 Grid 의 위쪽에 있는 파란색의 두꺼운 눈금자 영역으로 마우스 포인터를 이동합니다. 주황색 열 눈금자가 마우스 포인터를 따라 이동하여 클릭할 경우 새로운 열 구분선이 배치될 위치를 나타냅니다.

    Grid 가운데를 클릭하여 새로운 열 구분선을 만듭니다.

    파란색 열 구분선이 Grid 내에 나타납니다.

  8. 자산 패널의 컨트롤 범주에서 ImageFf723977.adb61060-da5f-4279-8c0d-3681bfeb145c(ko-kr,Expression.40).png를 선택합니다. 이 도구는 모두 하위 범주를 클릭해야 표시됩니다. 개체 및 타임라인 패널에서 Grid 개체를 활성화한 다음 Grid 의 오른쪽 열 안에 새 Image 를 그립니다.

  9. 개체 및 타임라인 패널에서 Image 개체를 선택한 다음 속성 패널의 공용 속성 아래를 확인합니다. Source 속성의 오른쪽에 있는 고급 옵션Ff723977.12e06962-5d8a-480d-a837-e06b84c545bb(ko-kr,Expression.40).png을 클릭하고 템플릿 바인딩을 가리킨 다음 Source 를 클릭합니다.

    이렇게 하면 Image 의 Source 속성이 이 템플릿을 사용하는 ImageButton 의 Source 속성으로 템플릿 바인딩됩니다.

  10. 이제 템플릿 편집이 완료되었습니다. 종료하고 루트 개체의 범위로 돌아가려면 개체 및 타임라인 패널에서 상위 범위로 이동을 클릭합니다.

  11. 개체 및 타임라인 패널에서 ImageButton 을 선택하고 속성 패널의 기타 범주에서 Source 속성을 찾은 다음 컴퓨터에 있는 이미지 파일의 경로로 설정합니다.

    이미지가 ImageButton 컨트롤의 오른쪽에 표시됩니다.

다른 사용자 지정 컨트롤에 스타일 적용

  1. 자산 패널의 프로젝트 범주에서 ImageButton 컨트롤을 선택합니다. 아트보드에 새 ImageButton 컨트롤을 그립니다.

  2. 새 ImageButton 을 마우스 오른쪽 단추로 클릭하고 템플릿 편집, 리소스 적용을 차례로 클릭한 다음 스타일 이름 ImageButtonStyle 을 클릭합니다.

    ImageButtonStyle 이 새 ImageButton 컨트롤에 적용됩니다. 속성 패널의 기타 범주에서 Source 속성을 찾은 다음 컴퓨터에 있는 이미지 파일의 경로로 설정합니다.

    [!참고]

    또는 템플릿을 사용하여 스타일이 이미 적용된 ImageButton 을 아트보드에 추가할 수 있습니다. 자산 패널의 스타일 범주에서 ImageButtonStyle 을 선택한 다음 스타일이 적용된 ImageButton 을 아트보드에 그립니다.

고급: 사용자 지정 속성에 대한 설명 적용

  1. 코드 숨김 파일(Window1.xaml.cs)의 맨 위에서 System.ComponentModel 네임스페이스에 참조를 추가합니다.

    아래에 사용된 Description 및 Category 특성이 해당 네임스페이스에 정의되어 있습니다.

  2. 클래스 정의 앞에 다음 줄(굵게 표시)을 붙여 넣습니다.

    [Description("Represents a custom button control that responds to a 
Click event. Displays an image using a custom Source property if the 
Source property is bound to an Image in the template.")]

public class ImageButton : Button

    <Description("Represents a custom button control that responds to a 
Click event. Displays an image using a custom Source property if the 
Source property is bound to an Image in the template.")> _

Class ImageButton

  3. 사용자 지정 속성 정의 앞에 다음 줄(굵게 표시)을 붙여 넣습니다.

    [Description("The image displayed in the button if there is an Image 
control in the template whose Source property is template-bound to 
the ImageButton Source property."), Category("Common Properties")]

    public ImageSource Source

    
    <Description("The image displayed in the button if there is an Image 
control in the template whose Source property is template-bound to 
the ImageButton Source property."), Category("Common Properties")> _

    Public Property Source() As ImageSource

    Category 특성은 속성 패널에서 속성이 표시될 위치를 구성합니다.

  4. 프로젝트를 다시 빌드합니다(Ctrl+Shift+B).

    이제 ImageButton 의 Source 속성이 속성 패널의 공용 속성 범주에 나타나고 자산 패널에 있는 컨트롤 및 속성 위로 마우스 포인터를 이동하면 위 설명(Description)이 도구 설명으로 나타납니다.

고급: 기본 이미지를 표시하도록 컨트롤 구성

아트보드에서 컨트롤을 그릴 때 즉, 디자인 모드에서 속성을 기본값으로 설정할 모든 사용자 지정 컨트롤의 생성자에 코드를 추가할 수 있습니다. 다음 절차를 사용하여 속성을 설정하면 아트보드에 표시되는 내용에만 영향을 주게 되며 응용 프로그램이 실행될 때 표시되는 내용에는 영향을 주지 않습니다. 따라서 콘텐츠의 원본이 데이터베이스 또는 웹 서비스인 경우처럼 디자인 모드에 있을 때는 컨트롤에 콘텐츠를 사용할 수 없지만 응용 프로그램이 실행될 때는 사용할 수 있는 경우 유용합니다. 이런 경우 아트보드에 있는 ImageButton 의 Source 속성은 명시적으로 설정될 때까지 프로젝트의 이미지 파일 이름에 설정됩니다.

  1. 코드 숨김 파일(Window1.xaml.cs)에서 속성 정의 뒤에 다음 코드 줄(굵게 표시)을 붙여 넣습니다.

    [!참고]

    다음 코드에서 파일 이름(Sunset.jpg)을 프로젝트의 이미지 파일 이름으로 변경합니다. 프로젝트에 이미지 파일을 추가하려면 프로젝트 패널에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 기존 항목 추가를 클릭합니다.

    public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton));


    // Constructor:  
public ImageButton()  
{  
   if (DesignerProperties.GetIsInDesignMode(this))  
   {  
      this.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));  
   }  
}  

    Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))


    Public Sub New()  
    If DesignerProperties.GetIsInDesignMode(Me) Then  
        Me.Source = New BitmapImage(New Uri("Sunset.jpg", UriKind.Relative))  
    End If  
End Sub  

  2. 프로젝트를 다시 빌드합니다(Ctrl+Shift+B).

    이제 이미 만들어진 스타일을 사용하는 ImageButton 을 아트보드에 추가하면 기본 이미지가 단추에 나타납니다.

    [!참고]

    디자인 모드에서는 Source 속성을 다른 값에 설정할 수 없습니다.

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.