ComponentOne은 사용자가 고급 응용 프로그램을 개발할 수 있도록 다양한 플랫폼에 대한 방대한 컨트롤 컬렉션을 제공합니다. 요즘 고급 응용 프로그램의 기능 중 하나는 필요에 따라 작업 영역을 사용자 정의할 수 있는 기능을 제공하는 것입니다. 여기에는 여러 창을 표시하면서 다른 창을 숨기거나 창을 적절한 위치에 고정하여 배치하거나 창 크기를 조정하는 것이 포함됩니다.

이 블로그를 보는 사람들을 고려할 때 Visual Studio IDE는 이러한 유형의 작업 영역을 설명하는 훌륭한 예가 될 수 있습니다. 사용자는 이를 통해 사용자 요구 사항에 따라 작업 영역을 완전히 사용자 정의할 수 있습니다.

아래 스크린샷은 여러 탭을 사용하여 응용 프로그램의 동일한 가장자리에 여러 창이 열려 있거나 고정되어 있는 Visual Studio에서 만든 Windows Form 응용 프로그램의 보기에 대해 보여줍니다. 여기에서 사용자는 편의에 따라 새 가장자리로 해당 탭을 자유롭게 이동하거나 필요한 경우 해당 보기를 닫거나 다시 열 수 있습니다.

이 블로그는 ComponentOne DockingTab 컨트롤을 사용하여 Windows Forms 응용 프로그램을 만들 때 작업 영역에서 고정 및 부동 기능을 구현하는 방법에 대해 보여줍니다. 이 컨트롤을 통해 응용 프로그램의 다양한 가장자리에 부동 창 또는 고정될 수 있는 탭을 사용하여 레이아웃을 구성할 수 있습니다.

아래 스크린샷에 표시된 대로 위의 Visual Studio 상태를 복제해 보겠습니다. 그러나 이는 단순히 고정 및 부동 작업에 초점을 맞춘 데모 보기일 뿐입니다. 따라서 편의상 모든 탭은 현재 비어 있습니다.

이제 데모 작업 영역의 실제 구현으로 빠르게 이동해 보겠습니다.
 

WinForms 응용 프로그램 만들기

최신 .NET Framework인 .NET 6.0으로 작업하겠습니다.

패키지를 모두 설치한 후 종속성 → 패키지 노드를 확장하여 설치된 모든 패키지를 찾습니다.

C1.Win.Command 패키지는 C1DockingTab 및 기타 컨트롤을 설치하며, 이러한 컨트롤은 위에 설명된 대로 사용자 정의 가능한 WinForms 작업 영역을 만드는 데 사용됩니다. C1.Win.Themes는 응용 프로그램의 모양과 느낌을 정의하는 테마를 응용 프로그램에 적용하는 데 사용되는 C1ThemeController를 제공합니다. 아래 이미지는 C1 Winforms Controls 탭 아래 도구 상자에 추가된 모든 ComponentOne WinForms 컨트롤을 보여줍니다.

Windows Form 구성

ComponentOne DockingTab 컨트롤에서 작동하도록 응용 프로그램을 구성했으므로 적합한 컨트롤을 사용하여 작업 영역 레이아웃을 만드는 데 중점을 두겠습니다.

먼저 프로젝트에 있는 기본 Windows Form(즉, Form1.cs)에 대한 설정을 아래와 같이 정의합니다.

이제 C1ThemeController를 양식에 끌어서 놓습니다. 양식 아래에 있는 컴포넌트 트레이에 추가되는 것을 볼 수 있습니다.

그런 다음 Form Load 이벤트를 처리하고 다음 코드를 추가하여 Windows 양식에 테마를 적용합니다.

private void Form1_Load(object sender, EventArgs e)
{
    //Get built-in theme
    var theme = C1ThemeController.GetThemeByName("Office2016Black", false);
    // Apply theme to all controls on the form
    C1ThemeController.ApplyThemeToControlTree(this, theme);
}

작업 영역 레이아웃 만들기

이제 C1.Win.Command 패키지에서 C1DockingTab 및 기타 컨트롤을 사용하여 Visual Studio 데모 작업 영역을 만드는 작업으로 이동해 보겠습니다.
 

메뉴 모음 구성

작업 영역의 메뉴 모음을 구성하여 시작해 보겠습니다. 메뉴 모음은 파일, 편집 및 보기 옵션을 비롯한 일부 기본 기능을 정의합니다. 파일 옵션은 작업 영역 레이아웃을 로드하고 저장하는 옵션이 있는 하위 메뉴를 제공합니다. 보기 옵션에는 작업 영역의 다양한 창을 숨기거나 보여주는 옵션이 있습니다.

1. 양식의 도구 상자에서 C1MainMenu 컨트롤을 끌어다 놓습니다. 양식 상단에 자동으로 고정되고 기본적으로 하나의 명령 링크가 추가되는지 확인합니다. C1CommandHolder도 양식에 추가하여 주 메뉴에 정의된 명령을 유지합니다.

2. 메뉴 모음의 파일 옵션을 정의하기 위해 기본적으로 제공되는 명령 링크를 편집합니다. 명령 링크를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 편집 옵션을 선택하면 명령에 연결 대화 상자가 열립니다.

3. 이 대화 상자를 사용해 텍스트 필드를 편집하여 메뉴 옵션 이름을 파일로 설정하고 아래 스크린샷에 표시된 대로 C1CommandMenu 유형의 새 명령을 만들어 옵션에 대한 하위 메뉴를 정의합니다.

확인을 클릭하여 새로 만든 이 명령을 명령 링크에 연결합니다.

4. 파일 옵션에 연결된 하위 메뉴에는 기본적으로 추가된 명령 링크가 있습니다. 레이아웃 로드 및 레이아웃 저장 옵션을 정의하여 이 명령 링크를 제거하고 두 개의 새 링크를 하위 메뉴에 추가하겠습니다. 파일 메뉴 옵션을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 명령 링크 편집 옵션을 선택하면 C1CommandLink 컬렉션 편집기 대화 상자가 열립니다.

5. 하위 메뉴에 이미 명령 링크가 있음을 아래 스크린샷에서 확인할 수 있습니다. 제거 버튼을 클릭하여 제거합니다.

6. 추가 버튼을 클릭하여 명령에 연결 대화 상자를 열도록 하위 메뉴 옵션을 추가합니다. 이 대화 상자를 사용하여 아래 스크린샷에 표시된 대로 텍스트 속성을 레이아웃 로드로 설정하고 이름 속성을 c1Command1_LoadLayout으로 설정한 C1Command 유형의 새 명령을 만듭니다.

파일 메뉴 옵션의 첫 번째 하위 메뉴 옵션으로 연결된 명령이 있는 명령 링크를 추가하려면 확인을 클릭합니다.

7. 마찬가지로 레이아웃 저장 하위 메뉴 옵션도 추가합니다. 다음은 하위 메뉴 항목이 포함된 C1CommandCollection 편집기에 대한 간략한 설명입니다.

이렇게 하면 하위 메뉴가 있는 첫 번째 메뉴 항목의 구성이 완료됩니다.

8. 이제 C1MainMenu를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 항목 추가 옵션을 선택하여 명령에 연결 대화 상자를 열고 주 메뉴에 편집 옵션을 추가해 보겠습니다.

9. 이 대화 상자를 사용하여 C1Command 유형의 새 명령을 만들고 주 메뉴의 편집 옵션을 구성하는 주 메뉴에 추가합니다.

10. 마지막으로, 보기 옵션을 추가합니다. 여기에는 솔루션 탐색기, 서버 탐색기, 속성의 세 가지 옵션이 있는 하위 메뉴가 포함됩니다. C1MainMenu를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 항목 추가 옵션을 선택하여 주 메뉴에 보기 옵션을 추가하면 명령에 연결 대화 상자가 열립니다. 위에 정의된 3~6단계를 반복하여 지정된 옵션으로 하위 메뉴를 만듭니다.

구성을 완료한 후 주 메뉴의 모습은 다음과 같습니다.

응용 프로그램 실행 시 아래 GIF에 표시된 대로 현재 위치에서 모든 하위 메뉴를 찾아볼 수 있습니다.

작업 영역 창/탭 구성

이 섹션에서는 C1DockingTab을 사용하여 도구 상자, 솔루션 탐색기, 출력 등과 같이 Visual Studio IDE에서 몇 가지 일반적인 창을 만들어 보겠습니다. 이 작업을 통해 레이아웃을 완전히 사용자 정의할 수 있습니다. Visual Studio IDE와 같이 다양한 창을 이동하고 열거나 닫을 수 있습니다.

또한 창에서 개별 탭을 이동하고 별도의 창으로 고정할 수 있습니다. 모든 부동 및 고정 기능을 C1DockingTab에 고정하려면 C1CommandDock 컨트롤 내부에 배치해야 합니다.

따라서 단계에 따라 런타임에 다음 레이아웃을 완료하십시오.

1. 양식의 도구 상자에서 C1CommandDock 컨트롤을 끌어다 놓습니다. 기본적으로 상단에 고정됩니다. 고정 속성을 아래쪽으로 설정하여 양식 아래에 컨트롤을 고정합니다.

2. C1DockingTab 컨트롤을 C1CommandDock 컨트롤에 끌어서 놓으면 자동으로 고정되어 C1CommandDock 컨트롤을 채웁니다.

3. 기본적으로 하나의 탭이 포함되어 있음을 확인할 수 있습니다. 다른 탭을 이 창에 추가하기 위해 C1DockingTab 컨트롤을 선택한 후 컨트롤의 스마트 태그를 클릭하면 페이지를 추가할 수 있는 옵션이 제공됩니다.

4. 새 탭 페이지를 추가한 후 각 탭의 텍스트 속성을 설정하면 속성 창을 사용하여 모든 탭의 이름을 변경할 수 있습니다. 창의 첫 번째 탭 이름은 오류 목록으로 지정해야 하며 두 번째 탭 이름은 출력으로 지정해야 합니다. 아래 GIF는 설명된 단계를 나타냅니다.

5. 두 번째 C1CommandDock 컨트롤을 양식에 끌어서 놓고 고정 속성을 왼쪽으로 설정하여 왼쪽에 고정합니다. 2~4단계를 반복하여 두 개의 새 탭/페이지인 서버 탐색기와 도구 상자로 DockingTab 컨트롤을 추가합니다.

6. 세 번째 C1CommandDock 컨트롤을 양식에 끌어서 놓고 고정 속성을 오른쪽으로 설정하여 오른쪽에 고정합니다. 2~4단계를 반복하여 두 개의 새 탭/페이지인 솔루션 탐색기와 속성으로 DockingTab 컨트롤을 추가합니다.

7. 마지막 C1CommandDock 컨트롤을 양식에 끌어서 놓고 고정 속성을 채우기로 설정합니다. C1DockingTab 컨트롤을 추가하고 ShowTabs 속성을 false로 설정합니다. 이 C1DockingTab 컨트롤에서 사용할 수 있는 기본 DockingTab 페이지의 이름을 Program.cs로 변경합니다.

이것으로 작업 영역 레이아웃 디자인이 완료되었으며 디자인 모드에서는 다음과 같이 표시됩니다.

이제 프로젝트를 실행하고 양식에서 탭과 창을 이동하여 C1DockingTab 컨트롤의 고정 및 부동 기능을 체험할 수 있습니다. 아래 GIF는 동일한 내용을 보여줍니다.

레이아웃 로드/저장 기능 구현

파일 메뉴 옵션에 추가된 레이아웃 로드 및 레이아웃 저장 하위 메뉴 옵션은 저장된 작업 영역 레이아웃을 로드하고 작업 영역 레이아웃을 변경하거나 변경하지 않고 저장할 것으로 예상됩니다. 이 섹션에서는 앞에서 설명한 메뉴 옵션의 기능을 구현할 수 있는 방법을 보여줍니다.

바인딩을 구현하려면 명령 링크를 클릭하자마자 발생하는 C1CommandHolder의 CommandClick 이벤트를 바인드합니다. 이벤트 처리기에서 트리거된 명령을 인식할 코드를 정의하고 C1DockingTab 클래스의 RestoreLayout 및 SaveLayout 메서드를 호출하여 작업 영역 레이아웃을 각각 로드하고 저장하겠습니다.

다음 코드 조각은 동일한 내용을 구현합니다.

//Handle command click events
private void c1CommandHolder1_CommandClick(object sender, C1.Win.Command.CommandClickEventArgs e)
{
   //Load Form Layoyt containing all the docking tabs
   if(e.Command == c1Command1_LoadLayout)
   {
      if (layout)
      {
         C1DockingTab.RestoreLayout(this, "layout.xml");
         MessageBox.Show("Layout loaded");
      }
      else
         MessageBox.Show("No saved layout");
    }
    //Save Form Layout containing all the docking tabs
    else if (e.Command == c1Command2_SaveLayout)
    {
       C1DockingTab.SaveLayout(this, "layout.xml");
       layout= true;
       MessageBox.Show("Layout saved");                
    }
}

다음 GIF는 실행 중인 구현을 보여 줍니다.

탭 숨기기/표시 구현 기능

이 기능은 C1CommandHolder의 CommandClick 이벤트를 처리하여 달성할 수도 있습니다. 트리거되는 명령을 인식한 후 코드는 참조 중인 탭이 표시되는지 여부를 확인합니다. 표시되는 경우 탭이 포커스에 맞춰지고 그렇지 않은 경우 해당 창에 다시 추가되고 포커스가 맞춰집니다. 다음 코드 조각은 동일한 내용을 구현합니다.

private void c1CommandHolder1_CommandClick(object sender, C1.Win.Command.CommandClickEventArgs e)
{
   //Load Form Layoyt containing all the docking tabs
   if(e.Command == c1Command1_LoadLayout)
   {
      if (layout)
      {
         C1DockingTab.RestoreLayout(this, "layout.xml");
         MessageBox.Show("Layout loaded");
      }
      else
         MessageBox.Show("No saved layout");
    }
    //Save Form Layoyt containing all the docking tabs
    else if (e.Command == c1Command2_SaveLayout)
    {
       C1DockingTab.SaveLayout(this, "layout.xml");
       layout= true;
       MessageBox.Show("Layout saved");                
     }
     //Show various tab pages when choosing options from View menu item
     else if(e.Command == c1Command3_SolutionExplorer)
     {    
        //Show Solution Explorer tab/window
        c1DockingTab3.TabPages.Insert(0,c1DockingTabPage5_SolutionExplorer);
        c1DockingTab3.SelectedTab = c1DockingTabPage5_SolutionExplorer;
     }
     else if (e.Command == c1Command4_ServerExplorer)
     {
        //Show Server Explorer tab/window
        c1DockingTab2.TabPages.Insert(0, c1DockingTabPage3_ServerExplorer);
        c1DockingTab2.SelectedTab = c1DockingTabPage3_ServerExplorer;
     }
     else if (e.Command == c1Command5_Properties)
     {
        //Show Properties tab/window
        c1DockingTab3.TabPages.Insert(1, c1DockingTabPage6_Properties);
        c1DockingTab3.SelectedTab = c1DockingTabPage6_Properties;
     }
}

다음 GIF는 실행 중인 구현을 보여 줍니다.

상세한 구현 세부 정보에 대해 설명된 시나리오를 구현하는 데모 샘플을 다운로드합니다.

C1DockingTab 컨트롤에 대한 자세한 내용은 문서 및 데모를 참조해 주세요! 

 
 

지금 바로 ComponentOne을 다운로드하여 직접 테스트해 보세요!

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ