Share via

콘텐츠 컨트롤 그리기

  • 아티클

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

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

콘텐츠 컨트롤 만들기

  1. Microsoft Expression Blend 응용 프로그램 창의 왼쪽에 있는 도구 패널에서 자산Cc295336.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png을 클릭합니다. 자산 패널 컨트롤 범주의 목록에서 ButtonCc295336.05df1779-a68f-436b-b834-a91b7995a3ec(KO-KR,Expression.30).png을 선택합니다.

    Button 컨트롤 아이콘이 도구 패널의 자산 단추 아래에 나타납니다. 이제 이 아이콘을 선택하여 아트보드에 Button을 추가할 수 있습니다.

    Cc295336.alert_tip(KO-KR,Expression.30).gif팁:

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

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

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

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(KO-KR,Expression.30).png

    Cc295336.alert_tip(KO-KR,Expression.30).gif팁:

    도구 패널에서 컨트롤을 선택한 다음 아트보드를 클릭하고 마우스를 끌어 컨트롤의 경계 상자를 지정하는 방식으로 아트보드에 컨트롤을 추가할 수도 있습니다.
    Cc295336.alert_tip(KO-KR,Expression.30).gif팁:

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

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

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

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

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

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(KO-KR,Expression.30).png

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

    Cc295336.alert_tip(KO-KR,Expression.30).gif팁:

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

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

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

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

    Cc295336.alert_tip(KO-KR,Expression.30).gif팁:

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

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

    StackPanel 개체에 추가된 자식 개체

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(KO-KR,Expression.30).png

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