연습: XAML 디자이너의 데이터 바인딩Walkthrough: Binding to data in XAML Designer

XAML 디자이너에서 아트보드와 속성 창을 사용하여 데이터 바인딩 속성을 설정할 수 있습니다.In XAML Designer, you can set data binding properties by using the artboard and the Properties window. 이 연습의 예제에서는 데이터를 컨트롤에 바인딩하는 방법을 보여줍니다.The example in this walkthrough shows how to bind data to a control. 특히 이 연습에서는 ItemCount라는 DependencyProperty가 포함된 간단한 쇼핑 카트 클래스를 만든 다음, TextBlock 컨트롤의 Text 속성에 ItemCount 속성을 바인딩하는 방법을 보여 줍니다.Specifically, the walkthrough shows how to create a simple shopping cart class that has a DependencyProperty named ItemCount, and then bind the ItemCount property to the Text property of a TextBlock control.

데이터 원본으로 사용할 클래스를 만들려면To create a class to use as a data source

  1. 파일 메뉴에서 새로 만들기, 프로젝트를 차례로 선택합니다.On the File menu, choose New, Project.

  2. 새 프로젝트 대화 상자에서 Visual C# 또는 Visual Basic 노드를 선택하고, Windows 바탕 화면 노드를 펼친 다음, WPF 응용 프로그램 템플릿을 선택합니다.In the New Project dialog box, choose either the Visual C# or Visual Basic node, expand the Windows Desktop node, and then choose the WPF Application template.

  3. BindingTest 프로젝트 이름을 지정한 다음 확인 단추를 선택합니다.Name the project BindingTest, and then choose the OK button.

  4. MainWindow.xaml.cs(또는 MainWindow.xaml.vb) 파일을 열고 다음 코드를 추가합니다.Open the MainWindow.xaml.cs (or MainWindow.xaml.vb) file and add the following code. C#에서 BindingTest 네임스페이스에(파일의 마지막 닫는 괄호 앞에) 코드를 추가합니다.In C#, add the code in the BindingTest namespace (before the final closing parenthesis in the file). Visual Basic에서, 새 클래스를 추가합니다.In Visual Basic, just add the new class.

    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을 설정합니다.This code sets a value of 0 as the default item count by using the PropertyMetadata object.

  5. 파일 메뉴에서 빌드, 솔루션 빌드를 차례로 선택합니다.On the File menu, choose Build, Build Solution.

ItemCount 속성을 TextBlock 컨트롤에 바인딩하려면To bind the ItemCount property to a TextBlock control

  1. [솔루션 탐색기]에서 MainWindow.xaml에 대한 바로 가기 메뉴를 연 다음 뷰 디자이너를 선택합니다.In Solution Explorer, open the shortcut menu for MainWindow.xaml and choose View Designer.

  2. 도구 상자에서 그리드 컨트롤을 선택하여 양식에 추가합니다.In the Toolbox, choose a Grid control and add it to the form.

  3. Grid를 선택하고, [속성] 창에서 DataContext 속성 옆에 있는 새로 만들기 단추를 선택합니다.With the Grid selected, in the Properties window, choose the New button next to the DataContext property.

  4. 개체 선택 대화 상자에서, 모든 어셈블리 표시 확인란을 선택 취소하고, BindingTest 네임스페이스 아래에서 ShoppingCart를 선택한 다음, 확인 단추를 선택합니다.In the Select Object dialog box, make sure that Show all assemblies checkbox is cleared, choose ShoppingCart under the BindingTest namespace, and then choose the OK button.

    다음 그림에서는 ShoppingCart가 선택된 개체 선택 대화 상자를 보여 줍니다.The following illustration shows the Select Object dialog box with ShoppingCart selected.

    개체 선택 대화 상자The Select Object dialog box

  5. 도구 상자에서, TextBlock 컨트롤을 선택하여 양식에 추가합니다.In the Toolbox, choose a TextBlock control to add it to the form.

  6. TextBlock 컨트롤을 선택하고, [속성] 창에서 Text 속성의 오른쪽에 속성 마커를 선택한 다음, 데이터 바인딩 만들기를 선택합니다.With the TextBlock control selected, in the Properties window, choose the property marker to the right of the Text property, and then choose Create Data Binding. (속성 표식은 작은 상자처럼 보입니다.)(The property marker looks like a small box.)

  7. [데이터 바인딩 만들기] 대화 상자의 경로 상자에서 ItemCount : (int32) 속성을 선택한 다음 확인 단추를 선택합니다.In the Create Data Binding dialog box, in the Path box, choose the ItemCount : (int32) property and then choose the OK button.

    다음 그림에서는 ItemCount 속성이 선택된 데이터 바인딩 만들기 대화 상자를 보여 줍니다.The following illustration shows the Create Data Binding dialog box with the ItemCount property selected.

    데이터 바인딩 만들기 대화 상자Create Data Binding dialog box

  8. F5 키를 눌러 앱을 실행합니다.Press F5 to run the app.

    TextBlock 컨트롤은 0의 기본값을 텍스트로 표시해야 합니다.The TextBlock control should show the default value of 0 as text.

참고 항목See Also

XAML 디자이너를 사용하여 UI 만들기 Creating a UI by using XAML Designer
값 변환기 추가 대화 상자Add Value Converter dialog box