문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

콘텐츠 컨트롤 그리기

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

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

콘텐츠 컨트롤 만들기

  1. Blend for Visual Studio 응용 프로그램 창의 왼쪽에 있는 도구 패널에서 자산JJ170353.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png을 클릭합니다. 자산 패널의 컨트롤 범주에 있는 목록에서 ButtonJJ170353.05df1779-a68f-436b-b834-a91b7995a3ec(ko-kr,VS.120).png를 선택합니다.

    Button 컨트롤 아이콘이 도구 패널의 자산 단추 아래에 표시되며 아트보드에 Button을 추가할 수 있도록 선택되어 있습니다.

    팁

    Button 컨트롤과 같이 가장 일반적인 UI(사용자 인터페이스) 요소는 자산 단추 아래에 드롭다운 목록으로 표시되므로 요소를 빠르게 추가할 수 있습니다.

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



    아트보드의 기본 위치(왼쪽 위)에 기본 크기로 만들어진 Button 개체

    JJ170353.38211dc1-69d4-46bd-acd2-d7f9b48102bb(ko-kr,VS.120).png
    팁

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

    팁

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

  3. 자산 패널의 컨트롤 범주에 있는 패널 아래에서 StackPanelJJ170353.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ko-kr,VS.120).png을 선택합니다. StackPanel 컨트롤 아이콘을 두 번 클릭하여 아트보드에 컨트롤을 추가합니다.

  4. 개체 및 타임라인 패널에서 StackPanel 개체를 Button 개체로 끕니다.

    Button 개체의 콘텐츠 문자열이 StackPanel로 바뀝니다. 문자열이 변경되었는지 확인하려면 개체 및 타임라인 패널에서 [Button]을 선택한 다음 속성 패널의 공용속성 범주에서 Content 속성을 확인합니다.



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

    JJ170353.B4_controls_stackpanel_in_button(ko-kr,VS.120).png
  5. StackPanel 의 높이와 너비는 100이고 최소 높이와 너비는 0으로, 기본 크기로 설정됩니다. StackPanel 을 더욱 쉽게 사용하려면 개체 및 타임라인 패널에서 [StackPanel]을 선택한 다음 속성 패널의 레이아웃 범주에서 Width를 150픽셀(또는 약 1/96인치인 장치 독립적 단위)로 변경하고 Height를 75픽셀로 변경합니다.

    팁

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

  6. Button 개체의 자식 개체(StackPanel 개체) 크기를 조정할 때 Button 개체 크기도 자동으로 조정되도록 하려면 Button 개체를 선택한 다음 속성 패널의 레이아웃 범주에서 WidthHeight 속성을 자동으로 설정합니다.

  7. 개체 및 타임라인 패널에서 [StackPanel]을 선택한 다음 속성 패널의 레이아웃 범주에서 Orientation 속성을 Horizontal로 설정하여 StackPanel의 자식 개체를 가로 방향으로 배치합니다.

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

    팁

    대부분의 UI 요소와 달리 StackPanelGrid와 같은 일부 레이아웃 패널에는 둘 이상의 자식 개체를 넣을 수 있습니다. 이를 이용해서 응용 프로그램 디자인을 다양하게 구성하고 배치할 수 있습니다. 자세한 내용은 Blend에서 개체를 레이아웃 컨테이너로 구성을 참조하십시오.

  9. 도구 패널에서 타원JJ170353.d7a04618-e35a-44f9-b78c-1f22e38016c1(ko-kr,VS.120).png을 선택한 다음 아트보드의 StackPanel 안에 원을 그립니다. 그런 다음 도구 패널에서 TextBoxJJ170353.343296b4-5c7d-4145-84cc-91b08ba67a1b(ko-kr,VS.120).png를 선택하고 StackPanel 안에 그립니다. 포함된 StackPanel 개체의 방향이 가로로 설정되었으므로 자식 개체는 왼쪽에서 오른쪽으로 나란히 배치됩니다. 자식 개체 사이에 공간을 두려면 속성 패널의 레이아웃 범주에서 해당 개체의 Margin 속성을 조정하면 됩니다.



    StackPanel 개체에 추가된 자식 개체

    JJ170353.B4_controls_stackpanel_children(ko-kr,VS.120).png
  10. 프로젝트를 빌드(F5 키)하여 결과 응용 프로그램을 확인합니다.

표시: