콘텐츠 컨트롤 만들기

콘텐츠 컨트롤에는 컨트롤에 표시될 내용을 정의하는 콘텐츠(Content) 속성이 하나만 포함되어 있습니다. 콘텐츠(Content) 속성은 텍스트 문자열처럼 단순하거나 Microsoft .NET Framework 개체처럼 복잡할 수 있습니다. 콘텐츠 컨트롤에 레이아웃 패널 컨트롤을 추가하면 패널 컨트롤이 여러 자식 요소를 추가할 수 있는 콘텐츠로 바뀌어 콘텐츠 요소를 여러 개 포함할 수 있습니다.

다음 절차는 콘텐츠 컨트롤(Button)을 만들고 해당 콘텐츠 속성을 레이아웃 패널(StackPanel)로 설정하는 방법을 설명합니다. 이 절차는 MSDN의 ContentControl 형식 항목에서 "형식" 아래 나와 있는 다른 콘텐츠 컨트롤에도 사용할 수 있습니다.

[!참고]

Microsoft Silverlight 1.0 프로젝트에서는 콘텐츠 컨트롤을 사용할 수 없습니다. 그러나 Canvas 레이아웃 패널에서 개체를 배치한 다음 TextBlock 개체를 맨 위에 놓고 JavaScript 이벤트 처리기를 연결하여 Canvas 요소가 단추나 기타 콘텐츠 컨트롤처럼 동작하도록 만들 수 있습니다. Silverlight 응용 프로그램에서 스토리보드를 제어하는 단추 만들기에서 예를 참조하십시오.

콘텐츠 컨트롤 만들기

1. Microsoft Expression Blend의 왼쪽에 있는 도구 상자에서 자산 라이브러리  단추를 클릭합니다. 컨트롤 탭에서 시스템 컨트롤을 클릭하고(아직 선택하지 않은 경우) 목록에서 Button 을 선택합니다.

   Button 컨트롤 아이콘이 자산 라이브러리 단추 위에 나타납니다. 이제 이 아이콘을 선택하여 아트보드에 Button을 추가할 수 있습니다.

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

2. 아트보드에 단추를 추가하려면 도구 상자에서 Button 컨트롤 아이콘을 두 번 클릭합니다. 기본 설정에서는 "Button"이라는 문자열이 Button의 콘텐츠로 표시됩니다.

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

   

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

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

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

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

4. 도구 상자의 자산 라이브러리나 공용 컨트롤 드롭다운 목록 중 하나에서 StackPanel  컨트롤을 선택합니다. StackPanel 컨트롤 아이콘을 두 번 클릭하여 단추에 자식 요소로 추가합니다.

   Button 개체의 콘텐츠 문자열이 StackPanel로 바뀝니다. 이는 개체 및 타임라인에서 **[Button]**을 선택한 다음 속성 패널의 공용속성 범주에서 Content 속성을 보면 확인할 수 있습니다.

   아트보드의 Button에 자식 요소로 추가된 StackPanel 개체

   

5. StackPanel의 높이와 너비는 100이고 최소 높이와 너비는 0으로, 기본 크기로 설정됩니다. StackPanel을 더 쉽게 사용하려면 개체 및 타임라인에서 **[StackPanel]**을 선택한 다음 속성 패널의 레이아웃 범주에서 Width는 150픽셀(또는 약 1/96인치의 장치 독립적 단위)로, Height는 75픽셀로 변경하십시오. 자식 요소(StackPanel)의 크기를 조정하면 단추의 크기도 자동으로 조정됩니다.

   팁:
   아트보드에서 경계 상자의 모퉁이에 있는 표시기를 끌어 개체의 크기를 조정할 수도 있습니다.

6. 개체 및 타임라인에서 **[StackPanel]**을 계속 선택한 상태로, 속성 패널의 레이아웃 범주에서 Orientation 속성을 Horizontal로 설정하면 StackPanel의 자식 요소가 가로 방향으로 배치됩니다. 이 속성 변경은 아트보드에 표시된 StackPanel에 항목이 추가되면 확인할 수 있습니다.

7. 자식 요소를 추가할 수 있도록 개체및 타임라인에서 [StackPanel] 개체를 두 번 클릭하여 활성화합니다.

   팁:
   대부분의 UI 요소와 달리 StackPanel 및 Grid 같은 일부 레이아웃 패널은 둘 이상의 자식 요소를 포함할 수 있으며, 이를 이용해서 응용 프로그램 디자인을 다양하게 구성하고 배치할 수 있습니다. 자세한 내용은 레이아웃 개요를 참조하십시오.

8. 도구 상자에서 타원  도구를 선택한 다음 아트보드의 StackPanel 안에 원을 그립니다. 그리고 도구 상자에서 TextBox  컨트롤을 선택하고 StackPanel 안에 그립니다. StackPanel의 방향이 가로로 설정되었으므로 자식 요소들은 왼쪽에서 오른쪽으로 나란히 배치됩니다. 자식 요소 사이에 공간을 두려면 속성 패널의 레이아웃 범주에서 해당 요소의 Margin 속성을 조정하면 됩니다.

   StackPanel 개체에 추가된 자식 개체

   

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