DataGrid 컨트롤 사용

  • 아티클

DataGrid 컨트롤은 데이터 컬렉션을 여러 개의 열과 행으로 표시할 수 있습니다. 또한 열을 기준으로 정렬하는 기능도 있습니다.

DataGrid 컨트롤에 대한 자세한 내용은 MSDN에서 DataGrid 클래스 (System.Windows.Controls)을 참조하십시오.

DataGrid 컨트롤에 표시할 예제 데이터 만들기

DataGrid 컨트롤에는 어떤 형식의 데이터도 사용할 수 있습니다. 이 주제의 뒷 부분에 있는 "DataGrid 컨트롤에 채우기" 절차에서 사용할 데이터가 준비되지 않은 경우 다음 절차에 따라 DataGrid 컨트롤의 기능을 완전히 설명하는 예제 데이터를 만듭니다.

DataGrid 컨트롤에 표시할 예제 데이터 만들기

  1. 데이터 패널이 표시되어 있지 않으면 창 메뉴에서 데이터를 클릭합니다.

  2. 데이터 패널에서 예제 데이터 만들기 JJ170738.30540d76-7256-43ce-b5d9-4b2edf3d339f(ko-kr,VS.120).png를 클릭한 다음 새 예제 데이터를 클릭합니다.

  3. 새 예제 데이터 대화 상자에서 데이터 집합의 기본 이름을 변경하고 데이터를 사용 가능 상태로 만들 프로젝트의 일부를 선택할 수 있습니다.

  4. 응용 프로그램 실행 시 예제 데이터 사용 상자를 선택합니다.

    팁

    응용 프로그램 실행 시 예제 데이터 사용 상자를 선택하면 응용 프로그램 실행 시 프로젝트에서 예제 데이터를 표시할 수 있습니다.이 상자를 선택하지 않은 경우에는 Blend for Visual Studio에서 예제 데이터를 아트보드에만 표시합니다.

    자세한 내용은 응용 프로그램 실행 시 예제 데이터를 표시하도록 설정을 참조하십시오.

  5. 확인을 클릭합니다.

    string JJ170738.0baebca0-a722-4aa2-ad58-a96325a0536d(ko-kr,VS.120).png 및 Boolean JJ170738.b09651ed-c8ae-4f66-b10c-d8478c5337c7(ko-kr,VS.120).png)과 같은 속성 컬렉션 JJ170738.B4_Data_CollectionIdentifier(ko-kr,VS.120).png이 포함된 예제 데이터 소스가 만들어집니다.

    JJ170738.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(ko-kr,VS.120).png

    예제 데이터 및 DataGrid 컨트롤의 전체 기능을 확인하려면 이미지 속성을 컬렉션에 추가합니다.

  6. 컬렉션 JJ170738.B4_Data_CollectionIdentifier(ko-kr,VS.120).png 옆에 있는 ** 단순 속성 추가**JJ170738.203a14a5-0db2-486e-9b94-4fdf658d531b(ko-kr,VS.120).png 를 클릭하여 새 속성을 컬렉션에 추가합니다.

    팁

    단순 속성 추가 단추 JJ170738.203a14a5-0db2-486e-9b94-4fdf658d531b(ko-kr,VS.120).png 옆에 있는 드롭다운 화살표를 클릭하여 단순, 복잡 및 컬렉션과 같은 추가할 속성 형식을 선택할 수 있습니다.

  7. 새 속성 옆에 있는 속성 형식 변경JJ170738.c4968582-0dae-407e-961b-80ffa2838f3b(ko-kr,VS.120).png을 클릭합니다. 편집기가 나타나면 형식 옆에 있는 드롭다운 화살표를 클릭한 다음 이미지를 클릭합니다.

  8. 편집기를 닫으려면 편집기 외부를 클릭합니다.

이제 DataGrid 컨트롤에 표시할 수 있는 예제 데이터 컬렉션이 만들어졌습니다.

예제 데이터 수정 및 데이터 속성 추가에 대한 자세한 내용은 예제 데이터 수정을 참조하십시오.

DataGrid 컨트롤에 채우기

여러 가지 방법으로 아트보드의 컨트롤에 데이터를 바인딩할 수 있습니다. 다음 절차에서는 DataGrid 컨트롤을 사용할 경우 데이터를 바인딩하는 가장 빠른 방법을 보여 줍니다.

다른 방법을 보려면 개체를 데이터에 바인딩을 참조하십시오.

DataGrid 컨트롤에 채우기

  1. 도구 패널에서 자산 JJ170738.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png을 클릭합니다.

    팁

    또는 창 메뉴에서 자산을 클릭하여 고정 패널에 자산 패널을 표시할 수 있습니다.

  2. 자산 패널에서 컨트롤을 확장하고 모두를 클릭한 다음 DataGrid JJ170738.55bfb0df-05d2-4b58-8312-24a3aed103e3(ko-kr,VS.120).png컨트롤을 클릭합니다.

    도구 패널의 자산JJ170738.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png 아래 있는 단추는 DataGrid 컨트롤 아이콘을 표시하며 선택된 상태입니다.

  3. 마우스를 사용하여 주 문서의 아트보드에 큰 DataGrid 개체를 그립니다.

  4. 데이터 패널에서 예제 데이터 컬렉션(JJ170738.B4_Data_CollectionIdentifier(ko-kr,VS.120).png컬렉션)을 새 데이터 그리드 개체로 드래그합니다.

    데이터 모눈은 예제 데이터 소스에 컬렉션을 표시하며 이미지 속성을 이미지 개체로, Boolean 속성을 확인란으로 변환합니다.

  5. F5 키를 눌러 응용 프로그램을 실행합니다.

    이전 절차의 예제 데이터를 사용하여 응용 프로그램 테스트 시 이 예제 데이터를 사용할 수 있도록 하면 다음과 같이 나타납니다.

    JJ170738.c5466ecc-fe83-4d23-96c0-ca058daa29d0(ko-kr,VS.120).png

    팁

    DataGrid 개체가 표시하는 예제 데이터를 수정한 후 아트보드에서 이 개체를 업데이트하려면 개별 데이터 속성을 컨트롤로 끌어 새 열을 추가하거나 전체 컬렉션을 다시 끌 수 있습니다.개체 및 타임라인 패널에서 DataGrid 개체의 열 노드를 확장하여 열을 삭제하거나 순서를 바꿀 수 있습니다.

DataGrid 컨트롤의 열 레이블 변경

데이터 컬렉션을 데이터 모눈 컨트롤로 끌 때 열 레이블은 속성 이름으로 설정됩니다. 그러나 열 레이블은 데이터 모눈 컨트롤을 채운 후 변경할 수 있습니다.

DataGrid 컨트롤의 열 레이블 변경

  1. 개체 및 타임라인 패널에서 [DataGrid] 개체를 확장하여 열 개체를 표시합니다.

  2. 첫 번째 열 개체([DataGridTemplateColumn] "Property1")를 선택합니다. 속성 패널에서 Header 속성 옆에 설명과 같은 설명이 포함된 이름을 입력한 다음 Enter 키를 누릅니다.

  3. 다른 두 열 개체를 선택하고 이름을 바꿉니다.

  4. F5 키를 눌러 응용 프로그램을 실행합니다.

    이전 절차의 예제 데이터를 사용하고 있고 응용 프로그램을 테스트할 때 예제 데이터를 사용하는 경우 다음 사항과 비슷할 수 있습니다.

    JJ170738.749194f0-94df-4ceb-bdcb-30b35c6ae56b(ko-kr,VS.120).png

DataGrid 컨트롤 모양 변경

컨트롤은 속성을 수정하거나 스타일 지정에 사용되는 템플릿을 수정하여 모양을 변경할 수 있습니다. 전체 템플릿, 빈 행 템플릿, 개별 셀, 머리글 템플릿 등을 수정할 수 있습니다.

자세한 내용은 Blend에서 템플릿 만들기 또는 수정을 참조하십시오.

열 머리글 모양 변경

  1. 개체 및 타임라인 패널 또는 아트보드에서 DataGrid 개체를 마우스 오른쪽 단추로 클릭하고 추가 템플릿 편집, ColumnHeaderStyle 편집을 차례로 가리킨 다음 복사본 편집을 클릭합니다.

    JJ170738.976995f7-d28e-4af7-8bba-4b1555eaff54(ko-kr,VS.120).png

  2. Style 리소스 만들기 대화 상자에서 확인을 클릭합니다.

    Blend에서 템플릿 편집 모드가 시작됩니다. 아트보드 위쪽의 이동 경로 탐색 막대는 현재 DataGrid 개체 내에서 템플릿을 편집하고 있음을 나타냅니다.

  3. 개체 및 타임라인 패널에서 템플릿에 다른 개체를 추가하거나 속성 패널에서 기존 개체의 속성을 수정합니다. 예를 들어 [Grid] 개체에는 정렬 단추 아이콘을 나타내는 SortIcon이라는 패스가 있습니다. 이 패스를 이미지로 바꾸거나 수정할 수 있습니다. 정렬 단추는 응용 프로그램을 실행하고 열 머리글을 클릭하면 나타납니다.

    팁

    일부 속성에는 데이터에 바운딩되었거나, 템플릿을 사용(템플릿 바운딩)하는 컨트롤의 속성에 바운딩되었음을 나타내기 위해 노란색의 경계 상자가 표시될 수 있습니다.

    템플릿 바운딩에 대한 자세한 내용은 Blend에서 개체 스타일 지정를 참조하십시오.

이미지가 포함된 셀 모양 변경

  1. 아트보드에서 이미지를 표시하는 데이터 모눈 개체 내의 셀을 마우스 오른쪽 단추로 클릭하고 열 템플릿 편집, CellTemplate 편집을 차례로 가리킨 다음 현재 편집을 클릭합니다.

  2. 개체 및 타임라인 패널에서 다른 개체를 [StackPanel] 레이아웃 컨테이너(예: 저작권 기호)에 추가하거나 [Image] 개체를 선택하고 속성 패널에서 해당 속성을 수정합니다.

    변경한 내용은 이미지가 포함된 셀에 적용됩니다.

대체 행의 색 변경

  1. 개체 및 타임라인 패널에서 [DataGrid] 개체를 선택합니다.

  2. 속성 패널의 행 아래에서 AlternatingRowBackground 속성 옆의 사각형 내부를 클릭합니다.

    브러시 편집기가 나타납니다.

  3. 색 편집기의 위에 있는 탭 중 하나를 클릭하여 브러시 형식을 선택합니다. 기존 브러시(단색 브러시 JJ170738.b62aabb4-fad4-4a9b-a84c-16c98012cf27(ko-kr,VS.120).png)를 사용하고 색을 변경하는 경우 Alpha 속성을 증가시켜 색이 투명하지 않도록 해야 합니다.

  4. RowBackground 속성을 수정하여 다른 행의 색을 변경할 수 있습니다.

    브러시 수정에 대한 자세한 내용은 Blend에서 색, 브러시 및 마스크 설정을 참조하십시오.

참고 항목

기타 리소스

예제 데이터 만들기

라이브 데이터에 연결

컨트롤의 데이터 표시