데이터를 표시하는 컨트롤의 스타일 지정
데이터는 아트보드의 개체에 데이터 항목을 바인딩하여 표시됩니다. 사각형의 Background 속성에 대한 16진수 색상 값을 나타내는 문자열 값을 바인딩하거나 ListBox의 ItemsSource 속성에 데이터 항목 컬렉션을 바인딩하든지 상관 없이 임의의 개체 속성에 데이터 항목을 바인딩할 수 있습니다.
데이터를 표시하는 개체의 스타일을 지정하기 위해 개체의 속성을 수정하거나 개체가 템플릿을 지원하는 경우에는 개체에 적용된 템플릿 중 하나를 수정할 수 있습니다.
속성 패널에서 개체의 속성 수정
아트보드의 개체를 선택할 경우 개체의 모양 및 기타 항목을 변경하기 위해 속성 패널에서 값을 수정할 수 있습니다.
예를 들어 데이터에 개체를 바인딩한 후에 DataGrid 개체에서 각 열의 열 헤더를 수정할 수 있습니다.
DataGrid 개체에서 열 헤더 텍스트 변경
.png "Cc294682.a2cebe0b-dc3d-45d5-9a30-23639e4bef48(KO-KR,Expression.30).png")
또한 DataGrid 개체에서 AlternatingRowBackground 속성을 사용하여 교대로 반복되는 각 행의 색을 지정할 수 있습니다.
DataGrid 개체의 교대로 반복되는 행 색상 변경
.png "Cc294682.0547a4e7-d415-4589-99af-dbfdc369a793(KO-KR,Expression.30).png")
개체 수정에 대한 일반적인 내용은 개체 및 속성 사용을 참조하십시오.
개별 개체의 속성에 대한 자세한 내용은 MSDN의 Windows Presentation Foundation(System.Windows.Controls 네임스페이스에서 시작) 및 Microsoft Silverlight (System.Windows.Controls Namespace(System.Windows.Controls 네임스페이스)에서 시작)에 대한 클래스 라이브러리 항목을 참조하십시오.
개체에 적용되는 템플릿 중 하나 수정
개체가 템플릿을 사용하는 컨트롤일 경우 템플릿을 수정하여 해당 개체와 동일 템플릿을 사용하는 다른 모든 개체의 모양을 변경할 수 있습니다.
대부분의 컨트롤은 서로 다른 컨트롤에 대해 여러 템플릿을 사용합니다. 예를 들어 ListBox 컨트롤은 많은 중첩된 템플릿을 사용하여 스크롤 뷰어, 스크롤 막대, 스크롤 막대의 Thumb 및 페이징 단추와 같은 ListBox의 각 부분에 스타일을 지정합니다.
ListBox 컨트롤에서 템플릿 중첩
.png "Cc294682.b8a37dc0-a65e-4fe1-8a9f-df485bb1bbae(KO-KR,Expression.30).png")
.png "Cc294682.095c13e8-6ed8-4572-9bd2-b2d6bdfdf199(KO-KR,Expression.30).png") |
ListBox 컨트롤. ListBox 컨트롤은 항목 목록의 컨테이너이며 데이터 원본의 항목에 바운딩되었거나 개별적으로 바운딩되지 않은 개체를 표시합니다. |
.png "Cc294682.e1a62fcf-2f5c-4263-95fe-a9bf97616b85(KO-KR,Expression.30).png") |
ListBox 템플릿 내의 ScrollViewer 컨트롤입니다. |
.png "Cc294682.b36987f6-e914-4b58-99f2-a76c47128837(KO-KR,Expression.30).png") |
ListBox 컨트롤의 바인딩되지 않은 항목입니다. |
.png "Cc294682.41999197-e26c-42b9-8039-58ce07f5b5ba(KO-KR,Expression.30).png") |
ScrollViewer 템플릿 내의 세로 ScrollBar 컨트롤입니다. |
.png "Cc294682.a5d608f2-bba2-48c5-8b15-2c115db86acc(KO-KR,Expression.30).png") |
ScrollBar 템플릿 내의 세로 Thumb 컨트롤입니다. |
.png "Cc294682.15de085f-48f5-41dd-a286-e3dcb4cfd18b(KO-KR,Expression.30).png") |
ScrollBar 컨트롤의 값을 큰 폭으로 줄이는 ScrollBar 템플릿 내의 세로 RepeatButton 컨트롤입니다. |
.png "Cc294682.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(KO-KR,Expression.30).png") |
ScrollBar 컨트롤의 값을 작은 폭으로 줄이는 ScrollBar 템플릿 내의 세로 RepeatButton 컨트롤입니다. |
ListBox 컨트롤은 또한 개체의 각 행에 표시된 항목을 스타일 지정하는 데이터 템플릿을 포함하고 있습니다. 데이터 템플릿은 개체에 바인딩되는 항목과 관련되어 있습니다. 예를 들어 문자열 데이터 항목 및 이미지 데이터 항목을 데이터 패널에서 ListBox로 끌어 오면 데이터 템플릿은 문자열 표시하기 위해 TextBlock를 포함하고 이미지 파일을 표시하기 위해 Image를 포함합니다. 데이터 템플릿에서 이러한 개체의 스타일을 지정할 수 있습니다.
데이터에 바인딩되는 ListBox 개체의 데이터 템플릿
.png "Cc294682.25738f24-f008-4283-9172-de0a0fbd81bf(KO-KR,Expression.30).png")
컨트롤의 모양을 기본 모양과 매우 다르게 만들 수 있습니다. 예를 들어 ListBox 개체의 기본 모양은 다음과 같이 표시될 수 있습니다.
기본 템플릿을 사용한 ListBox 개체
.png "Cc294682.f3190de1-098e-4dc0-bc1d-4a44d091685f(KO-KR,Expression.30).png")
그러나 템플릿을 수정하여 ListBox 개체를 다음과 같이 표시할 수 있습니다(Microsoft Expression Blend에 포함된 ColorSwatchSL 예제).
두 개의 수정된 템플릿을 사용한 ListBox 개체(ItemContainerStyle 및 ItemsPanel)
.png "Cc294682.0a581ba0-08e1-4116-91bf-d1309c645ae0(KO-KR,Expression.30).png")
개체에 적용된 템플릿에 액세스하려면 개체를 마우스 오른쪽 단추로 클릭하거나 개체를 선택하여 아트보드 맨 위에 있는 이동 경로 탐색 막대를 사용합니다.
이동 경로 탐색 막대를 사용하여 템플릿 열기
.png "Cc294682.a7257528-6a90-47ac-8c31-ad3422395f38(KO-KR,Expression.30).png")
템플릿에서 템플릿 외부에서와 동일한 방법으로 개체를 추가, 제거 및 수정할 수 있습니다. ListBox 컨트롤의 기능은 동일하게 유지되며, 하나 또는 여러 개를 선택할 수 있는 항목 목록을 포함하고 있습니다.
데이터 템플릿 수정에 대한 구체적인 예는 DataGrid 컨트롤 사용 및 TreeView 컨트롤 사용을 참조하십시오.
컨트롤 스타일 지정에 대한 보다 자세한 내용은 개체 스타일 지정을 참조하십시오.
컨트롤 또는 템플릿의 파트에 대한 자세한 내용은 공통 Silverlight 컨트롤의 스타일 지정 팁을 참조하거나 MSDN의 Windows Presentation Foundation(System.Windows.Controls 네임스페이스에서 시작) 및 Silverlight(System.Windows.Controls Namespace(System.Windows.Controls 네임스페이스)에서 시작)에 대한 클래스 라이브러리 항목을 참조하십시오.
또한 Learn Expression Blend(Expression Blend 학습)에서 컨트롤 스타일 지정에 대한 자습서 및 비디오를 제공합니다.