연습: 엔터티 데이터 모델에 WPF 컨트롤 바인딩

이 연습에서는 데이터 바인딩된 컨트롤이 포함된 WPF 응용 프로그램을 만듭니다. 이 컨트롤은 엔터티 데이터 모델으로 캡슐화되는 고객 레코드에 바인딩됩니다. 여기서는 고객이 고객 레코드를 탐색하고 레코드에 대한 변경 내용을 저장하는 데 사용할 수 있는 단추도 추가합니다.

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

  • AdventureWorksLT 샘플 데이터베이스의 데이터에서 생성되는 엔터티 데이터 모델과 WPF 응용 프로그램 만들기

  • 데이터 소스 창에서 WPF Designer의 창으로 엔터티를 끌어 데이터 바인딩된 컨트롤 집합 만들기

  • 고객 레코드를 앞뒤로 탐색하는 단추 만들기

  • 엔터티 데이터 모델과 내부 데이터 소스에 컨트롤의 변경 내용을 저장하는 단추 만들기

    참고

    일부 Visual Studio 사용자 인터페이스 요소의 경우 다음 지침에 설명된 것과 다른 이름 또는 위치가 시스템에 표시될 수 있습니다. 이러한 요소는 사용하는 Visual Studio 버전 및 설정에 따라 결정됩니다. 자세한 내용은 Visual Studio 설정을 참조하십시오.

사전 요구 사항

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

  • Visual Studio

  • AdventureWorksLT 샘플 데이터베이스가 연결되어 있는 SQL Server 또는 SQL Server Express의 실행 중인 인스턴스에 액세스. AdventureWorksLT 데이터베이스는 CodePlex 웹 사이트에서 다운로드할 수 있습니다.

연습을 완료하려면 다음 개념에 대한 사전 지식이 유용하지만 반드시 필요하지는 않습니다.

프로젝트 만들기

고객 레코드를 표시하는 새 WPF 프로젝트를 만듭니다.

프로젝트를 만들려면

  1. Visual Studio를 시작합니다.

  2. 파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다.

  3. Visual Basic이나 **Visual C#**을 확장한 다음 Windows를 선택합니다.

  4. WPF 응용 프로그램 프로젝트 템플릿을 선택합니다.

  5. 이름 상자에 AdventureWorksCustomerEditor를 입력한 다음 확인을 클릭합니다.

    AdventureWorksCustomerEditor 프로젝트가 만들어집니다.

응용 프로그램의 엔터티 데이터 모델 만들기

데이터 바인딩된 컨트롤을 만들려면 먼저 응용 프로그램의 데이터 모델을 정의하여 데이터 소스 창에 추가해야 합니다. 이 연습에서는 엔터티 데이터 모델을 만듭니다.

엔터티 데이터 모델을 만들려면

  1. 데이터 메뉴에서 새 데이터 소스 추가를 클릭하여 데이터 소스 구성 마법사를 엽니다.

  2. 데이터 소스 형식 선택 페이지에서 데이터베이스를 클릭하고 다음을 클릭합니다.

  3. 데이터베이스 모델 선택 페이지에서 엔터티 데이터 모델을 클릭하고 다음을 클릭합니다.

  4. 모델 콘텐츠 선택 페이지에서 데이터베이스에서 생성을 클릭하고 다음을 클릭합니다.

  5. 데이터 연결 선택 페이지에서 다음 중 하나를 수행합니다.

    • AdventureWorksLT 샘플 데이터베이스에 대한 데이터 연결이 드롭다운 목록에 표시되면 해당 연결을 선택합니다.

      또는

    • 새 연결을 클릭하고 AdventureWorksLT 데이터베이스에 대한 연결을 만듭니다.

    App.Config의 엔터티 연결 설정을 다음으로 저장 옵션이 선택되어 있는지 확인하고 다음을 클릭합니다.

  6. 데이터베이스 개체 선택 페이지에서 테이블을 확장한 다음 Customer 테이블을 선택합니다.

  7. 마침을 클릭합니다.

    디자이너에서 Model1.edmx 파일이 열립니다.

  8. 프로젝트를 빌드합니다.

창의 사용자 인터페이스 정의

WPF Designer에서 XAML을 수정하여 여러 개의 단추를 창에 추가합니다.

창의 사용자 인터페이스를 정의하려면

  1. 솔루션 탐색기에서 MainWindow.xaml을 두 번 클릭합니다.

    WPF Designer에서 창이 열립니다.

  2. 디자이너의 XAML 뷰에서 <Grid> 태그 사이에 다음 코드를 추가합니다.

    <Grid.RowDefinitions>
         <RowDefinition Height="75" />
         <RowDefinition Height="425" />
    </Grid.RowDefinitions>
    <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
    <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
    <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
    
  3. 프로젝트를 빌드합니다.

데이터 바인딩된 컨트롤 만들기

데이터 소스 창에서 WPF Designer로 개체를 끌어 고객 레코드를 표시하는 컨트롤을 만듭니다.

데이터 바인딩된 컨트롤을 만들려면

  1. 데이터 메뉴에서 데이터 소스 표시를 클릭합니다.

  2. 데이터 소스 창에서 Customers 노드의 드롭다운 메뉴를 클릭하고 자세히를 선택합니다.

  3. Customers 노드를 확장합니다.

  4. 이 예제의 경우 일부 필드가 표시되지 않으므로 다음 노드 옆의 드롭다운 메뉴를 클릭하고 없음을 선택합니다.

    • NameStyle

    • PasswordHash

    • PasswordSalt

    • rowGuid

    • ModifiedDate

  5. 데이터 소스 창에서 단추 아래의 영역으로 Customers 노드를 끕니다.

  6. 디자이너에서 고객 ID 레이블 옆의 텍스트 상자를 클릭합니다.

  7. 속성 창에서 IsReadOnly 속성 옆의 확인란을 선택합니다.

  8. 프로젝트를 빌드합니다.

고객 레코드 탐색

사용자가 <> 단추를 사용하여 고객 레코드를 스크롤할 수 있게 하는 코드를 추가합니다.

사용자가 고객 레코드를 탐색할 수 있게 하려면

  1. 디자이너에서 < 단추를 두 번 클릭합니다.

    Visual Studio에서 코드 숨김 파일을 열고 Click 이벤트에 대한 새 backButton_Click 이벤트 처리기를 만듭니다.

  2. CustomersViewSource 및 AdventureWorksLTEntities가 메서드 외부에 놓이고 전체 폼에 액세스할 수 있도록 Window_Loaded 이벤트 처리기를 수정합니다. 이러한 제품 코드는 폼에 대해서만 전역으로 선언하고 다음과 유사한 Window_Loaded 이벤트 처리기 내에서 할당합니다.

    Dim CustomersViewSource As System.Windows.Data.CollectionViewSource
    Dim AdventureWorksLTEntities As AdventureWorksCustomerEditor.AdventureWorksLTEntities
    
    
    Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        CustomersViewSource = CType(Me.FindResource("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
        AdventureWorksLTEntities = New AdventureWorksCustomerEditor.AdventureWorksLTEntities()
        'Load data into Customers. You can modify this code as needed.
        Dim CustomersQuery As System.Data.Objects.ObjectQuery(Of AdventureWorksCustomerEditor.Customer) = Me.GetCustomersQuery(AdventureWorksLTEntities)
        CustomersViewSource.Source = CustomersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly)
    End Sub
    
    private System.Windows.Data.CollectionViewSource customersViewSource;
    private AdventureWorksCustomerEditor.AdventureWorksLTEntities adventureWorksLTEntities;
    
    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        adventureWorksLTEntities = new AdventureWorksCustomerEditor.AdventureWorksLTEntities();
        // Load data into Customers. You can modify this code as needed.
        customersViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("customersViewSource")));
        System.Data.Objects.ObjectQuery<AdventureWorksCustomerEditor.Customer> customersQuery = this.GetCustomersQuery(adventureWorksLTEntities);
        customersViewSource.Source = customersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly);
    }
    
  3. 다음 코드를 backButton_Click 이벤트 처리기에 추가합니다.

    If CustomersViewSource.View.CurrentPosition > 0 Then
        CustomersViewSource.View.MoveCurrentToPrevious()
    End If
    
    if (customersViewSource.View.CurrentPosition > 0)
        customersViewSource.View.MoveCurrentToPrevious();
    
  4. 디자이너로 돌아가서 > 단추를 두 번 클릭합니다.

    Visual Studio에서 코드 숨김 파일을 열고 Click 이벤트에 대한 새 nextButton_Click 이벤트 처리기를 만듭니다.

  5. 다음 코드를 nextButton _Click 이벤트 처리기에 추가합니다.

    If CustomersViewSource.View.CurrentPosition < CType(CustomersViewSource.View, CollectionView).Count - 1 Then
        CustomersViewSource.View.MoveCurrentToNext()
    End If
    
    if (customersViewSource.View.CurrentPosition < ((CollectionView)customersViewSource.View).Count - 1)
        customersViewSource.View.MoveCurrentToNext();
    

검사점

프로젝트를 빌드하고 실행하여 코드가 컴파일되었고 고객 레코드를 탐색할 수 있는지 확인합니다.

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

  • F5 키를 누릅니다.

    응용 프로그램이 빌드되고 실행됩니다. 다음을 확인합니다.

    • 고객 데이터가 표시됩니다.

    • > 또는 < 단추를 클릭하여 다른 고객 레코드를 탐색할 수 있습니다.

고객 레코드에 대한 변경 내용 저장

사용자가 변경 내용 저장 단추를 사용하여 고객 레코드에 대한 변경 내용을 저장할 수 있게 하는 코드를 추가합니다.

고객 레코드에 대한 변경 내용을 저장할 수 있는 기능을 추가하려면

  1. 디자이너에서 변경 내용 저장 단추를 두 번 클릭합니다.

    Visual Studio에서 코드 숨김 파일을 열고 새 saveButton_Click 이벤트 처리기를 만듭니다.

  2. 다음 코드를 saveButton_Click 이벤트 처리기에 추가합니다.

    AdventureWorksLTEntities.SaveChanges()
    
    adventureWorksLTEntities.SaveChanges();
    

응용 프로그램 테스트

응용 프로그램을 빌드하고 실행하여 응용 프로그램에서 고객 레코드를 표시하고 고객 레코드에 대한 변경 내용을 저장할 수 있는지 확인합니다.

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

  1. F5 키를 누릅니다.

  2. 고객 레코드 중 하나를 편집하고 변경 내용 저장을 클릭합니다.

  3. 응용 프로그램을 닫은 다음 F5 키를 눌러 응용 프로그램을 다시 시작합니다.

  4. 변경한 고객 레코드로 이동하고 변경 내용이 유지되었는지 확인합니다.

  5. 응용 프로그램을 닫습니다.

다음 단계

이 연습을 완료하면 다음과 같은 관련 작업을 수행할 수 있습니다.

참고 항목

작업

방법: Visual Studio에서 데이터에 WPF 컨트롤 바인딩

연습: 데이터 집합에 WPF 컨트롤 바인딩

연습: WCF 데이터 서비스에 WPF 컨트롤 바인딩

개념

Visual Studio에서 데이터에 WPF 컨트롤 바인딩

Entity Framework 개요

WPF 및 Silverlight 디자이너 개요

데이터 바인딩 개요