C#05. 메뉴 및 툴바 지원

 이제 메뉴와 툴바를 지원해봅시다. 메뉴와 툴바는 C++에 비해 약간 번거롭습니다. 이 번거로움은 구조를 깔끔하기 위해 Microsoft사에서 포기한 부분중 하나인 듯합니다. 그렇다고 엄청 복잡하것은 아니고, 또한 프로그램 만들때 한번하는 것이므로 하나씩 따라해 보기 바랍니다.
   실제 프로그램 제작에서 설명한 방식으로 MenuToolbar라는 프로젝트를 만든후, 솔루션 탐색기에서 Form1.cs를 MenuToolbar.cs로 변경하고, 속성창에서 (Name)을 MainForm으로 Text를 메뉴 및 툴바로로  변경하며, Source에서 Form1을 MainForm으로 변경하여 제작합니다.
   MenuToolbar.cs 디자인을 선택하고 좌측 상단의 도구 상자에 마우스를 두면 화면에 다음과 같이 나타납니다.

   메인 메뉴을 선택하고 MenuToolbar.cs 디자이너에 마우스 왼쪽 버튼을 누르거나 마우스로 드래그 앤 드롭하면 다음과 같이 하단에 MainMenu1이 추가됩니다.

   MainMenu1을 MainMenu로 수정하고 디자이너의 "여기에 입력하십시오"에 마우스를 클릭하면 다음과 같이 메뉴아이템이 추가 되며 입력 모드로 변환됩니다.

   원하는 메뉴 이름을 입력하면 됩니다. 여기에서 가장 중요한 것은 속성창에 (Name)이 menuItem1으로 자동으로 생성이 되는데 이 이름에 의해 메뉴 선택시 호출될 함수가 결정되므로 꼭 이름을 변경하기 바랍니다. 예를 들어 메뉴 이름을 파일(&F)로 입력했다면 (Name)을 menuFile로 입력하여 구분이 가능하도록 합니다.

  속성 중 Shortcut은 단축키 설정입니다. 단축키는 정의 되어 있는 키들 중 선택하는 방식으로 모든키가 다 되는 것은 아닙니다. 예를 들어 아래아 한글에서 사용하는 종료키인 Alt + X는 존재하지 않습니다. 꼭 Alt + X로 단축키를 만들고자 한다면 키보드 처리를 이용하여 수동으로 만들어야만 합니다. 위 그림에서 보면 ShowShortcut 속성이 true로 되어 있는 것을 알수 있습니다. 따라서 단축키 설정만 하면 메뉴에 그 단축키가 자동으로 표시됩니다.

   메뉴이름에 -하나를 입력하면 구분 줄이 됩니다.

   참고로 이 편집은 하단의 mainMenu를 선택해야만 가능합니다.
   이제 메뉴를 메인 폼과  연결을 해보겠습니다. 디자인에서 MainForm을 선택하고 속성창의 아랫부분에 Menu에 mainMenu를 선택하여 설정하면 연결이 됩니다.

  이제 실행을 하면 다음과 같이 메뉴가 추가된 것을 볼 수 있습니다.

   이제 메뉴을 선택하면 실행될 수 있는 Method를 작성해 보도록 하겠습니다.
   Method를 작성하고자 하는 메뉴에 마우스로 더블 클릭을 하면 자동으로 Method가 생성되어 편집할 수 있도록 합니다.
   다음 그림은 새로 만들기(&N)를 눌렀을 때 실행되는 Method를 생성한 모양입니다. 생성된 Method의 이름을 보면  menuFileNew_Click입니다. 앞에서 강조한 메뉴 아이템 추가시 (Name)을 변경하라고 한 이유를 여기에서 알수 있을 것입니다.

  여기서는 파일 메뉴는 단순히 Message 박스를 표시하도록 작성하고, 종료 버튼은 실제 종료되게 하기 위해 base.Close();를 호출하였다.
   그리기 메뉴는 선택한 메뉴을 체크하여 표시할 수 있도록 구성할 것입니다.
   그리기 종류를 설정하기 위해 enum을 사용하여 다음과 같이 선언한 후 MainForm의 Member에 DrawKind drawKind를 선언하여 초기값으로 DrawKind.Line으로 설정(DrawKind drawKind = DrawKind.Line;) 합니다.
    public enum DrawKind
    {
        Line,
        Rectangle,
        Ellipse,
        Triangle
    }
  그리기 메뉴의 각 항목을 선택했을 때 해당 종류가 선택되도록 설정합니다. 예를 들어 사각형(&R)을 선택했을 때 호출되는 Method에 this.drawKind = DrawKind.Rectangle;을 입력합니다.
  참고로 여기서 enum은 C++에서도 존재했다. 만약 펜을 0, 선을 1, 사각형을 2, 다각형을 3으로 입력하여 소스를 작성하면 향후에 소스를 이해하기가 쉽지 않게 될 것입니다. 이때 사용하는 것이 C++에서는 enum과 #define이었습니다. C#에서는 #define은 존재하지 않고 enum을 사용하여 구성해야만 합니다.
   이제 실제 체크를 하는 루틴을 넣어 보도록 하겠습니다. 이 루틴은 어디에 넣으면 가장 좋을까? 그리기 메뉴을 선택하여 항목들이 화면상에 나타날때 이 루틴을 넣는 것이 가장 좋을 듯합니다. 그리기를 선택하고 속성창에서 이벤트를 선택하면 다음과 같이 화면이 바뀝니다.

  Popup이벤트가 그리기 하단의 메뉴가 화면에 나타날때 호출되는 이벤트이므로 Popup에서 더블클릭하여 다음과 같이 입력합니다.

            this.menuDrawLine.Checked = (this.drawKind == DrawKind.Line) ? true : false;
            this.menuDrawRectangle.Checked = (this.drawKind == DrawKind.Rectangle) ? true : false;
            this.menuDrawEllipse.Checked = (this.drawKind == DrawKind.Ellipse) ? true : false;
            this.menuDrawTriangle.Checked = (this.drawKind == DrawKind.Triangle) ? true : false;

  이제  Form에서 마우스 오른쪽 버튼을 선택했을 때 생성되는 팝업 메뉴를 작성해 봅시다.
  디자인 모드에서 도구상자를 선택하여 ContextMenu를 하나 추가하여 생성된 ContextMenu1을 ContextMenuDraw로 수정합니다.
 Main 메뉴와 같은 방법으로 편집하면 되나 대부분 Main 메뉴에 있는 메뉴을 추가하게 될 것입니다. 따라서 Main 메뉴에서 복사하여 붙여넣어 구성합니다. 붙여 넣기를 하면 모든 메뉴의 (Name)이 menuItem1과 같이 자동으로 생성되는 이름으로 변경이 됩니다. 이 이름을 MainMenu와 중복 되지 않는 이름으로 변경하여 입력해야 합니다. 여기서는 menuContextPen, menuContextLine 등으로 입력했다.
   이제 메뉴을 연결해 보도록 하겠습니다. C++에서는 팝업 메뉴의 ID를 Main 메뉴와 같이 입력하면 자동으로 연결되나 C#은 내부 구조상 그렇게 할 수 없어 어쩔수 없이 MainMenu와 다른 이름으로 설정하였다. 그러나 호출되는 Method도 다르게 지정해야 한다면 그것만큼 불편한 것은 없을 것입니다. 따라서 MainMenu에서 만든 Method와 연결할 수 있도록 합니다.

  contextMenuDarw의 처리하고자 하는 메뉴을 선택하고 속성창에서 이벤트를 선택하여 Click을 선택하면 다음과 같이 이미 만들어 놓은 Method 리스트가 나온다. 여기에서 필요한 Method를 선택하면 됩니다.
  이제 팝업 메뉴를 Form과 연결해야 합니다. Form을 선택하고 속성창에서 contextMenu를 작성한 contextMenuDraw로 설정하면 됩니다.

   이제 팝업 메뉴에 체크 버튼 처리를 봅시다. Main 메뉴와 같은 개념으로 팝업 메뉴가 화면에 나타날때 처리를 해주면 됩니다. contextMenuDraw을 선택하고 속성창에서 이벤트 버튼을 선택하여 Click 이벤트를 더블 클릭하여 생성된 Method에서 다음과 같이 처리해 주면 됩니다.

            this.menuContextLine.Checked = (this.drawKind == DrawKind.Line) ? true : false;
            this.menuContextRectangle.Checked = (this.drawKind == DrawKind.Rectangle) ? true : false;
            this.menuContextEllipse.Checked = (this.drawKind == DrawKind.Ellipse) ? true : false;
            this.menuContextTriangle.Checked = (this.drawKind == DrawKind.Triangle) ? true : false;

  이제 툴바를 추가 해봅시다. 툴바에는 그림이 들어간다. 그림 부분은 C++에서 툴바용 그림을 따로 두어 구성하기 편하게 했으나 C#에서는 imageList를 이용하여 툴바, Tree등 어디에도 붙일수 있도록 하였다. 우선 ImageList를 추가 해 봅시다.
   추가할 그림들을 그리거나(하나씩 따로 그려야 함, 일반적으로 16*16 그림) 인터넷에서 다운받아 프로젝트 디렉토리에 복사해 둔후, ImageList를 추가합니다.
   디자인 모드에서 도구상자를 선택하여 ImageList를 하나 추가하여 생성된 imageList1을 imageListDraw로 수정합니다.

 imageListDraw를 선택한 후 속성창의 Images(컬렉션) 옆 버튼을 선택하면 다음과 같은 대화 상자가 생성됩니다.

  추가를 선택하면 다음과 같은 대화 상자가 생성됩니다.

   툴바에 넣고자 하는 그림 순서대로 하나씩 추가를 합니다.
   여기서 실행을 해봅시다. 만약 앞에서 설명한 enum DrawKind를 MainForm앞에 선언했다면 다운될 것입니다. 만약 다운이 안되면 다행이지만 현재 필자의 PC에 설치되어 있는 Visual Studio 2003으로 작성하면 다운이 됩니다. 이유는 잘 모르겠으나 필자는 이것 때문에 엄청난 시간을 허비 했다. 해결은 enum DrawKind를 MainForm 다음에 선언하면 해결이 됩니다.
   도구상자에서 ToolBar를 하나 추가하면 다음과 같이 Form에 붙습니다.

  툴바를 선택한 후 속성창의 (Name)을 toolBarDraw로 수정하고 ImageList에 앞에서 작성한 imageListDraw를 선택한 후, Buttons(컬렉션) 옆 버튼을 선택하면 다음과 같은 대화 상자가 생성됩니다.

   추가를 선택하면 다음 그림과 같이 추가가 됩니다.

   ImageIndex에 버튼에 표시할 그림을 선택하고 (Name)을 수정(중요함을 다시한번 강조)하여 하나씩 추가합니다. 속성 중 ToolTipText는 툴바 버튼 위에 마우스를 가지고 가면 생성되는 풍선 도움말에 표시할 내용이므로 이것 또한 입력해주기 바랍니다.
  추가한  버튼에 하나씩 Method와 연결하면 될듯하나 툴바에서는 단지 버튼이 선택되었을 때 호출되는 Method를 만들 수 있고 그 내부에서 버튼 종류를 구분하여 실행해야 만 합니다.

   툴바를 선택하여 속성창에서 이벤트를 선택한 후 ButtonClick에서 마우스로 드블클릭하여 생성된 Method에 다음과 같이 입력합니다.

            this.drawKind = (DrawKind)e.Button.ImageIndex;

  여기서 어떤 버튼이 눌러졌는지 확인 할 수 있는 것이 e.Button.ImageIndex입니다. 첫 번째 버튼이 눌러지면 0, 두 번째는 1.... 일반적으로 종류에 따라 다른 기능을 할 수 있도록 구성해야 하나 여기서는 drawKind만 변경하면 되므로 위와같이 구성하면 됩니다.

  이제 툴바의 버튼들중 선택된 그리기 종류에 맞는 버튼은 눌러진 모양으로 설정해 봅시다. 툴바는 Menu와는 달리 계속해서 화면에 표시합니다. 따라서 화면이 생성될 초기에 한번 설정해 주고 메뉴나 툴바가 선택될 때 마다 눌러진 모양을 바꾸어 주어야 합니다. 따라서 다음과 같은 함수를 만들어 this.drawKind에 따라 버튼이 눌러지게 하고 필요한 곳에서 그 함수를 호출하도록 구성하면 됩니다.
        private void toolBarButtonStatus()
        {
            this.toolBarLine.Pushed = (this.drawKind == DrawKind.Line) ? true : false;
            this.toolBarRectangle.Pushed = (this.drawKind == DrawKind.Rectangle) ? true : false;
            this.toolBarEllipse.Pushed = (this.drawKind == DrawKind.Ellipse) ? true : false;
            this.toolBarTriangle.Pushed = (this.drawKind == DrawKind.Triangle) ? true : false;
        }
   이제 화면이 생성될 초기에 호출되는 이벤트를 알아야 하는데, 그것은 Load입니다.

  Load를 더블 클릭하여 생성된 Method에서 toolBarButtonStatus()를 호출하고, 메뉴가 선택될 때 마다 실행되는 Method와 툴바 버튼을 선택할 때 실행되는 Method에도 toolBarButtonStatus()을 호출하면 됩니다.
  이제 여기서 설명할 내용은 모두 끝났다. 부가적으로 모양이 좋지 않으니 크기(Size)를 적당히 키우고, 배경색(BackColor)을 Window로 변경합니다.

   이제 실행하면 다음과 같이 화면에 나타납니다.

 이제 Source를 한번 봅시다. 뭐 그리 길지 않다. 그러나 Windows Form 디자이너에서 생성한 코드라는 부분을 펼쳐 보면 많은 양의 Source가 들어 있는 것을 알수 있습니다. 이부분은 디자이너에서 작성하는 코드로, 펼쳐 보면 위쪽에 적혀 있는대로 수동으로 수정하지 말기 바랍니다. Source내용은 앞에서부터 순서대로 따라 했다면 그리 어렵지 않으리라 예상됩니다.
  Visual Studio 2003에서의 C#은 문법적으로 하나의 클래스를 여러파일로 나누어서 구성할 수 없습니다. 따라서 편법으로 초기에 접혀져서 눈에 잘안띄도록 했습니다.
  그러나 Visual Studio 2005에서의 C#은 두 개의 파일로 나누어 구성할 수 있도록 하여, 디자인 코드는 따로 관리함으로서 수동편집을 하지 않도록 유도하고 있다고 합니다.

예제 프로그램 다운로드

Paint_MenuToolbar.zip

0.02MB