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

아티클
08/09/2011

이 연습에서는 데이터 바인딩된 컨트롤이 포함된 WPF 응용 프로그램을 만듭니다. 이 컨트롤은 데이터 집합으로 캡슐화되는 제품 레코드에 바인딩됩니다. 여기서는 제품을 찾고 제품 레코드에 대한 변경 내용을 저장하는 단추도 추가합니다.

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

AdventureWorksLT 샘플 데이터베이스의 데이터에서 생성되는 데이터 집합과 WPF 응용 프로그램 만들기
데이터 소스 창에서 WPF Designer의 창으로 데이터 테이블을 끌어 데이터 바인딩된 컨트롤 집합 만들기
제품 레코드를 앞뒤로 탐색하는 단추 만들기
데이터 테이블과 내부 데이터 소스에 제품 레코드에 대한 변경 내용을 저장하는 단추 만들기

참고

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

사전 요구 사항

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

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

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

데이터 집합 및 TableAdapter. 자세한 내용은 Visual Studio에서 데이터 집합 작업 및 TableAdapter 개요를 참조하십시오.
WPF Designer 작업. 자세한 내용은 WPF 및 Silverlight 디자이너 개요를 참조하십시오.
WPF 데이터 바인딩. 자세한 내용은 데이터 바인딩 개요를 참조하십시오.

프로젝트 만들기

새 WPF 프로젝트를 만듭니다. 이 프로젝트에서는 제품 레코드를 표시합니다.

프로젝트를 만들려면

Visual Studio를 시작합니다.
파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다.
Visual Basic이나 **Visual C#**을 확장한 다음 Windows를 선택합니다.
WPF 응용 프로그램 프로젝트 템플릿을 선택합니다.
이름 상자에 AdventureWorksProductsEditor를 입력한 다음 확인을 클릭합니다.

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

응용 프로그램에 사용할 데이터 집합 만들기

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

데이터 집합을 만들려면

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

데이터 소스 창이 열립니다.
데이터 소스 창에서 새 데이터 소스 추가를 클릭합니다.

데이터 소스 구성 마법사가 열립니다.
데이터 소스 형식 선택 페이지에서 데이터베이스를 선택하고 다음을 클릭합니다.
데이터베이스 모델 선택 페이지에서 데이터 집합을 선택하고 다음을 클릭합니다.
데이터 연결 선택 페이지에서 다음 옵션 중 하나를 선택합니다.
- AdventureWorksLT 샘플 데이터베이스에 대한 데이터 연결이 드롭다운 목록에 표시되면 해당 연결을 선택하고 다음을 클릭합니다.
  
  또는
- 새 연결을 클릭하고 AdventureWorksLT 데이터베이스에 대한 연결을 만듭니다.
응용 프로그램 구성 파일에 연결 문자열 저장 페이지에서 예, 다음으로 연결을 저장합니다. 확인란을 선택하고 다음을 클릭합니다.
데이터베이스 개체 선택 페이지에서 테이블을 확장한 다음 Product (SalesLT) 테이블을 선택합니다.
마침을 클릭합니다.

새 AdventureWorksLTDataSet.xsd 파일이 프로젝트에 추가되고 해당 AdventureWorksLTDataSet 항목이 데이터 소스 창에 추가됩니다. AdventureWorksLTDataSet.xsd 파일은 이름이 AdventureWorksLTDataSet인 형식화된 데이터 집합과 이름이 ProductTableAdapter인 TableAdapter를 정의합니다. 이 연습의 뒷부분에서는 ProductTableAdapter를 사용하여 데이터 집합을 데이터로 채우고 변경 내용을 데이터베이스에 다시 저장합니다.
프로젝트를 빌드합니다.

TableAdapter의 기본 Fill 메서드 편집

데이터 집합을 데이터로 채우려면 ProductTableAdapter의 Fill 메서드를 사용합니다. 기본적으로 Fill 메서드는 AdventureWorksLTDataSet의 ProductDataTable을 Product 테이블의 모든 데이터 행으로 채우지만 행의 하위 집합만 반환하도록 이 메서드를 수정할 수 있습니다. 이 연습의 경우 사진이 있는 제품의 행만 반환하도록 Fill 메서드를 수정합니다.

사진이 있는 제품 행을 로드하려면

솔루션 탐색기에서 AdventureWorksLTDataSet.xsd 파일을 두 번 클릭합니다.

데이터 집합 디자이너가 열립니다.
디자이너에서 Fill,GetData() 쿼리를 마우스 오른쪽 단추로 클릭하고 구성을 선택합니다.

TableAdapter 구성 마법사가 열립니다.
SQL 문을 입력하십시오. 페이지의 텍스트 상자에서 SELECT 문 뒤에 다음 WHERE 절을 추가합니다.
```
WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
```
마침을 클릭합니다.

사용자 인터페이스 정의

WPF Designer에서 XAML을 수정하여 여러 개의 단추를 창에 추가합니다. 이 연습의 뒷부분에서는 사용자가 이러한 단추를 사용하여 제품 레코드에 대한 변경 내용을 스크롤하고 저장할 수 있게 하는 코드를 추가합니다.

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

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

WPF Designer에서 창이 열립니다.

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

<Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="625" />
</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>

프로젝트를 빌드합니다.

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

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

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

데이터 소스 창에서 Product 노드의 드롭다운 메뉴를 클릭하고 자세히를 선택합니다.
Product 노드를 확장합니다.
이 예제의 경우 일부 필드가 표시되지 않으므로 다음 노드 옆의 드롭다운 메뉴를 클릭하고 없음을 선택합니다.
- ProductCategoryID
- ProductModelID
- ThumbnailPhotoFileName
- rowguid
- ModifiedDate
ThumbNailPhoto 노드 옆의 드롭다운 메뉴를 클릭하고 Image를 선택합니다.

참고

기본적으로 데이터 소스 창에서 그림을 나타내는 항목에는 없음으로 설정된 기본 컨트롤이 있습니다. 이는 그림이 데이터베이스에 바이트 배열로 저장되고 바이트 배열은 간단한 바이트 배열에서부터 큰 응용 프로그램의 실행 파일까지 모든 내용을 포함할 수 있기 때문입니다.
데이터 소스 창에서 단추가 들어 있는 행 아래의 표 형태 행으로 Product 노드를 끕니다.

Products 테이블의 데이터에 바인딩된 컨트롤 집합을 정의하는 XAML이 생성되고 데이터를 로드하는 코드도 생성됩니다. 생성된 XAML 및 코드에 대한 자세한 내용은 Visual Studio에서 데이터에 WPF 컨트롤 바인딩을 참조하십시오.
디자이너에서 제품 ID 레이블 옆의 텍스트 상자를 클릭합니다.
속성 창에서 IsReadOnly 속성 옆의 확인란을 선택합니다.

제품 레코드 탐색

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

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

디자이너의 창 화면에서 < 단추를 두 번 클릭합니다.

코드 숨김 파일이 열리고 Click 이벤트에 대한 새 backButton_Click 이벤트 처리기가 만들어집니다.

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

Dim ProductViewSource As System.Windows.Data.CollectionViewSource
Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
    'Load data into the table Product. You can modify this code as needed.
    AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
    AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
    ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
    ProductViewSource.View.MoveCurrentToFirst()
End Sub

private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
private System.Windows.Data.CollectionViewSource productViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
    // Load data into the table Product. You can modify this code as needed.
    adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
    adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
    productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
    productViewSource.View.MoveCurrentToFirst();
}

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

If ProductViewSource.View.CurrentPosition > 0 Then
    ProductViewSource.View.MoveCurrentToPrevious()
End If

if (productViewSource.View.CurrentPosition > 0)
{
    productViewSource.View.MoveCurrentToPrevious();
}

디자이너로 돌아가서 > 단추를 두 번 클릭합니다.

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

If ProductViewSource.View.CurrentPosition < CType(ProductViewSource.View, CollectionView).Count - 1 Then
    ProductViewSource.View.MoveCurrentToNext()
End If

if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
{
    productViewSource.View.MoveCurrentToNext();
}

제품 레코드에 대한 변경 내용 저장

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

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

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

코드 숨김 파일이 열리고 Click 이벤트에 대한 새 saveButton_Click 이벤트 처리기가 만들어집니다.
다음 코드를 saveButton_Click 이벤트 처리기에 추가합니다.
```
AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
```
```
adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
```
참고

이 예제에서는 TableAdapter의 Save 메서드를 사용하여 변경 내용을 저장합니다. 이 연습에서는 하나의 데이터 테이블만 변경하기 때문에 이 메서드를 사용하지만 여러 데이터 테이블에 대한 변경 내용을 저장해야 하는 경우에는 Visual Studio에서 데이터 집합을 사용하여 생성하는 TableAdapterManager의 UpdateAll 메서드를 사용할 수도 있습니다. 자세한 내용은 TableAdapterManager 개요를 참조하십시오.

응용 프로그램 테스트

응용 프로그램을 빌드하고 실행합니다. 제품 레코드를 보고 업데이트할 수 있는지 확인합니다.

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

F5 키를 누릅니다.

응용 프로그램이 빌드되고 실행됩니다. 다음을 확인합니다.
- 텍스트 상자에 사진이 있는 첫 번째 제품 레코드의 데이터가 표시됩니다. 이 제품의 제품 ID는 713이고 이름은 Long-Sleeve Logo Jersey, S입니다.
- > 또는 < 단추를 클릭하여 다른 제품 레코드를 탐색할 수 있습니다.
제품 레코드 중 하나에서 크기 값을 변경한 다음 변경 내용 저장을 클릭합니다.
Visual Studio에서 응용 프로그램을 닫은 다음 F5 키를 눌러 응용 프로그램을 다시 시작합니다.
변경한 제품 레코드로 이동하고 변경 내용이 유지되었는지 확인합니다.
응용 프로그램을 닫습니다.

다음 단계

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

Visual Studio에서 데이터 소스 창을 사용하여 다른 형식의 데이터 소스에 WPF 컨트롤 바인딩. 자세한 내용은 연습: WCF 데이터 서비스에 WPF 컨트롤 바인딩 및 연습: 엔터티 데이터 모델에 WPF 컨트롤 바인딩을 참조하십시오.
Visual Studio에서 데이터 소스 창을 사용하여 WPF 컨트롤에서 관련 데이터(즉, 부모-자식 관계의 데이터) 표시. 자세한 내용은 연습: WPF 응용 프로그램에서 관련 데이터 표시를 참조하십시오.