XAML 디자이너에서 데이터를 바인딩하는 방법

아티클
01/23/2014

XAML 디자이너에서 아트보드와 속성 창을 사용하여 데이터 바인딩 속성을 설정할 수 있습니다. 이 항목의 예제에서는 데이터를 컨트롤에 바인딩하는 방법을 보여 줍니다. 특히 절차에서는 ItemCount라는 이름의 DependencyProperty가 있는 간단한 쇼핑 카트 클래스를 만든 다음 ItemCount 속성을 TextBlock 컨트롤의 텍스트 속성에 바인딩하는 방법을 보여 줍니다.

데이터 소스로 사용할 클래스를 만들려면

새 응용 프로그램 템플릿에서 C# 또는 Visual Basic 프로젝트를 만듭니다.

MainPage.xaml.cs(또는 MainPage.xaml.vb)를 열고 다음 코드를 추가합니다. C#에서는 projectName 네임스페이스에 코드를 추가합니다(파일의 마지막 닫는 괄호 앞에 추가). Visual Basic에서는 새 클래스를 추가합니다.

public class ShoppingCart : DependencyObject
{
    public int ItemCount
    {
        get { return (int)GetValue(ItemCountProperty); }
        set { SetValue(ItemCountProperty, value); }
    }

    public static readonly DependencyProperty ItemCountProperty =
         DependencyProperty.Register("ItemCount", typeof(int),
         typeof(ShoppingCart), new PropertyMetadata(0));
}

Public Class ShoppingCart
    Inherits DependencyObject

    Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
        "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
    Public Property ItemCount As Integer
        Get
            ItemCount = CType(GetValue(ItemCountProperty), Integer)
        End Get
        Set(value As Integer)
            SetValue(ItemCountProperty, value)
        End Set
    End Property
End Class

이 코드는 PropertyMetadata 개체를 사용하여 기본 항목 수로 값 0을 설정합니다.

팁

Visual Studio에서는 ShoppingCart 클래스 안에 propdp를 입력한 다음 Tab 키를 눌러 종속성 속성에 대한 스텁 코드를 추가할 수 있습니다.

빌드 > 솔루션 빌드를 클릭합니다.

ItemCount 속성을 TextBlock 컨트롤에 바인딩하려면

MainPage.xaml을 마우스 오른쪽 단추로 클릭한 다음 뷰 디자이너를 클릭합니다.
문서 개요 창에서 **[모눈]**으로 표시되는 루트 모눈 패널을 선택합니다.
Grid가 선택된 상태에서 속성 창의 DataContext 속성 옆에 있는 새로 만들기 단추를 클릭합니다.
개체 선택 대화 상자에서 모든 어셈블리 표시의 선택이 취소되어 있는지 확인하고 projectName 네임스페이스 아래에서 ShoppingCart를 선택한 다음 확인을 클릭합니다.

다음 그림에서는 ShoppingCart가 선택된 개체 선택 대화 상자를 보여 줍니다.
도구 상자에서 TextBlock 컨트롤을 두 번 클릭하여 아트보드에 추가합니다.
TextBlock 컨트롤이 선택된 상태에서 속성 창의 공용 아래에 있는 Text 속성 오른쪽의 속성 표식을 클릭합니다. 속성 표식은 작은 상자 모양입니다.
나타나는 메뉴에서 데이터 바인딩 만들기를 클릭합니다.
바인딩 유형 목록의 기본값인 데이터 컨텍스트 바인딩 유형을 적용하고 경로 상자에서 ItemCount 속성을 선택한 다음 확인을 클릭합니다.

다음 그림에서는 ItemCount 속성이 선택된 데이터 바인딩 만들기 대화 상자를 보여 줍니다.
F5 키를 눌러 응용 프로그램을 시작합니다.

TextBlock 컨트롤이 기본값 0을 텍스트로 표시해야 합니다.

다음을 통해 공유

XAML 디자이너에서 데이터를 바인딩하는 방법

데이터 소스로 사용할 클래스를 만들려면

ItemCount 속성을 TextBlock 컨트롤에 바인딩하려면

참고 항목

참조

개념

추가 리소스