항목 컨트롤 만들기

항목 컨트롤에는 자식 요소 컬렉션이 들어 있는 Items 속성이 있습니다. 항목 컬렉션에 모든 형식의 자식 요소를 추가하거나 데이터 바인딩을 사용하여 데이터 원본의 항목 배열을 표시할 수 있습니다. 항목 컨트롤에는 콘텐츠(Content) 속성과 헤더(Header) 속성이 없습니다. 자식 요소는 항목 컨트롤의 항목 호스트에 추가됩니다. ListBox의 경우 항목 호스트는 항목을 세로로 정렬하는 스택 패널입니다. Microsoft Expression Blend에서는 항목 컨트롤의 템플릿을 편집하지 않는 한 개체 및 타임라인에 항목 호스트가 표시되지 않습니다.

다음 절차에서는 항목 컨트롤(ListBox)을 만들고 항목 컬렉션에 요소를 추가하는 방법을 설명합니다. 이 절차는 MSDN의 ItemsControl 형식 항목에서 "형식" 아래 나와 있는 다른 콘텐츠 컨트롤에도 사용할 수 있습니다. 데이터 원본의 항목 배열을 표시하려면 실습 정보: RSS 뉴스 수집기 만들기 항목을 참조하십시오.

[!참고]

Microsoft Silverlight 1.0 프로젝트에서는 항목 컨트롤을 사용할 수 없습니다. 그러나 Canvas 레이아웃 패널에 TextBlock 개체를 삽입한 다음 JavaScript 이벤트 처리기를 연결하여 항목을 표시하거나 표시하지 않을 수 있습니다. JavaScript에 대한 자세한 내용은 Silverlight 스크립팅 및 마우스 이벤트를 참조하십시오.

항목 컨트롤 만들기

1. Expression Blend의 왼쪽에 있는 도구 상자에서 자산 라이브러리  단추를 클릭합니다. 컨트롤 탭에서 시스템 컨트롤을 클릭하고(아직 선택하지 않은 경우) 목록에서 ListBox 를 선택합니다. ListBox 컨트롤 아이콘이 자산 라이브러리 단추 위에 나타납니다. 이제 이 아이콘을 선택하여 아트보드에 ListBox를 추가할 수 있습니다.

   팁:
   Button 컨트롤처럼 매우 일반적인 UI(사용자 인터페이스) 요소는 드롭다운 목록으로 자산 라이브러리 단추 위에 이미 표시되어 있으므로 빠르게 추가할 수 있습니다.

2. 아트보드에 단추를 추가하려면 도구 상자에서 ListBox 컨트롤 아이콘을 두 번 클릭합니다.

   아트보드의 기본 위치(왼쪽 위)에 기본 크기로 추가된 ListBox 개체

   

   팁:
   도구 상자에서 컨트롤을 선택한 다음 아트보드를 클릭하고 마우스를 끌어 컨트롤의 경계 상자를 지정하는 방식으로 아트보드에 컨트롤을 추가할 수도 있습니다.

   팁:
   ListBox 컨트롤과 같은 UI 디자인 요소를 아트보드에 추가하면 응용 프로그램의 개체가 됩니다.

3. 개체 및 타임라인에서 ListBox 개체를 두 번 클릭하여 요소를 활성화합니다. 요소를 둘러싸는 노란색 강조 표시가 나타납니다. 개체를 활성화하면 자식 요소를 추가할 수 있습니다.

   팁:
   도구 상자에서 선택  도구를 먼저 선택한 다음 아트보드에서 해당 개체를 두 번 클릭하는 방식으로 개체를 활성화할 수도 있습니다.

4. 도구 상자에서 TextBlock , Button , Rectangle  등의 요소를 사용하여 ListBox에 여러 가지 도형을 그립니다. 목록에 이들 자식 요소가 세로로 정렬되는 것을 확인할 수 있습니다.

   ListBox 개체에 추가된 자식 개체

   

   [!참고]

   항목 컨트롤의 크기를 넘는 요소를 추가하면 응용 프로그램을 실행할 때 스크롤 막대가 표시되어 추가 요소를 볼 수 있습니다.

   팁:
   개체 및 타임라인에서 개체를 끌어서 놓아 목록에서 요소의 순서를 바꾸거나 선택 도구를 선택하여 아트보드로 요소를 끌 수 있습니다.

5. ListBox에서 항목을 확인하고 컬렉션 편집기 창에서 다른 항목을 추가할 수 있습니다. 컬렉션 편집기를 열려면 속성 패널에서 Items (컬렉션) 속성 옆에 있는 이 컬렉션의 항목 편집  단추를 클릭합니다.

6. 프로젝트를 빌드(F5 키)하여 결과 응용 프로그램을 확인합니다.