[.Net] C# WinForm에서 슬라이딩 메뉴(Sliding menu), 사이드바(Sidebar) 쉽게 만들기 (예제 포함)

슬라이딩 메뉴(Sliding menu) / 사이드바(Sidebar)란?

사이드 바(Sidebar)는 주로 웹 페이지나 스마트폰 어플에서 많이 보았을 겁니다. 좌측/우측의 특정 버튼을 누르면 메뉴가 표시되고, 특정 버튼을 클릭하면 다시 메뉴가 사라지는 형태입니다. 그리고 이러한 사이드바 메뉴가 미끄러지듯이 나타나고 사라지면 슬라이딩 메뉴(Sliding menu)라고도 합니다.

제 티스토리 블로그에도 이러한 사이드 바가 있습니다. 메뉴 아이콘을 클릭하면 사이드에 있던 메뉴가 나타나고, 다시 사라지는 동작을 보여줍니다.

사이드 바 동작 화면

C#에서 만든 슬라이딩 메뉴 동작

C#은 MFC보다 UI 작업하기가 정말 정말 편리합니다. 그동안 왜 이렇게 MFC를 고집했나 싶을 정도입니다. 아무튼, 이렇게 편한 C#에서도 아쉽지만 사이드 바나 슬라이딩 메뉴 컨트롤은 없습니다.

제공되는 컨트롤이 없어 직접 만들어야 하지만, 너무나도 간단하게 만들 수 있습니다. 아래 애니메이션은 본 포스팅에서 다룰 예제 코드의 동작입니다.

슬라이딩 메뉴 동작 화면

C#에서 슬라이딩 메뉴 만들기

그럼 본격적으로 만들어 보겠습니다. ExamSlidingMenu라는 이름의 WinForm 프로젝트를 생성합니다.

ExamSlidingMenu 프로젝트 생성

Form에 Panel을 추가하고, Dock 설정을 Left로 변경합니다. 가로 폭은 200이고, 이름은 panelSideMenu입니다. 이 패널에 메뉴 버튼을 추가할 겁니다. 그리고 패널이 보였다 접혔다 하는 것이죠.

panelSideMenu를 Form의 Left에 도킹된 모습

변경한 속성은 아래 표를 참고하세요.

항목	값
Name	panelSideMenu
Dock	Left
Size(Width)	200
BackColor	64, 64, 64

이제 Button을 추가합니다. 패널에 추가되는 버튼은 슬라이딩 메뉴의 메뉴 버튼을 의미합니다. 그림 아래에 있는 표와 같이 속성을 변경하면, 아래 그림처럼 버튼이 꾸며집니다.

패널에 메뉴 버튼이 추가된 모습

항목	값
Name	button1
Dock	Top
Size	200, 50
BackColor	64, 64, 64
FlatStyle	Flat
BorderSize	0
MouseDownBackColor	60, 60, 60
MouseOverBackColor	70, 70, 70
ForeColor	White
Text	버튼1

동일한 버튼을 복사하여 붙여 넣으면 여러 개의 메뉴 버튼이 생성됩니다.

여러 개의 메뉴 버튼이 추가된 모습

이번에는 CheckBox를 추가합니다. 체크 박스 버튼을 클릭하면 메뉴가 접히거나 보여주는 동작을 하게 됩니다.

체크 박스가 추가된 모습

항목	값
Name	checkBoxHide
AutoSize	False
Dock	Bottom
Size	200, 50
Appearance	Button
BackColor	64, 64, 64
FlatStyle	Flat
BorderSize	0
MouseDownBackColor	60, 60, 60
MouseOverBackColor	70, 70, 70
ForeColor	White
Text	<
TextAlign	Middlecenter

여기까지 UI를 적용했다면 아래와 같은 모습일 것입니다.

메뉴 버튼과 숨기기 버튼이 추가된 모습

마지막으로 Timer를 추가합니다. 슬라이딩 메뉴가 서서히 접히고, 보이는 동작은 타이머에서 이뤄지게 됩니다.

항목	값
Name	timerSliding
Interval	10

이제 코드를 아래와 같이 추가합니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace ExamSlidingMenu
{
    public partial class Form1 : Form
    {
        //슬라이딩 메뉴의 최대, 최소 폭 크기
        const int MAX_SLIDING_WIDTH = 200;
        const int MIN_SLIDING_WIDTH = 50;
        //슬라이딩 메뉴가 보이는/접히는 속도 조절
        const int STEP_SLIDING = 10;
        //최초 슬라이딩 메뉴 크기
        int _posSliding = 200;

        public Form1()
        {
            InitializeComponent();
        }

        private void checkBoxHide_CheckedChanged(object sender, EventArgs e)
        {
            if (checkBoxHide.Checked == true)
            {
                //슬라이딩 메뉴가 접혔을 때, 메뉴 버튼의 표시
                button1.Text = "1";
                button2.Text = "2";
                checkBoxHide.Text = ">";
            }
            else
            {
                //슬라이딩 메뉴가 보였을 때, 메뉴 버튼의 표시
                button1.Text = "버튼1";
                button2.Text = "버튼2";
                checkBoxHide.Text = "<";
            }

            //타이머 시작
            timerSliding.Start();
        }

        private void timerSliding_Tick(object sender, EventArgs e)
        {
            if (checkBoxHide.Checked == true)
            {
                //슬라이딩 메뉴를 숨기는 동작
                _posSliding -= STEP_SLIDING;
                if (_posSliding <= MIN_SLIDING_WIDTH)
                    timerSliding.Stop();
            }
            else
            {
                //슬라이딩 메뉴를 보이는 동작
                _posSliding += STEP_SLIDING;
                if (_posSliding >= MAX_SLIDING_WIDTH)
                    timerSliding.Stop();
            }

            panelSideMenu.Width = _posSliding;
        }
    }
}

체크 박스의 이벤트와 타이머의 이벤트를 추가하는 방법은 간단하므로 생략했습니다. 간단하게 각 컨트롤을 더블 클릭하면 checkboxHide_CheckedChanged()와 timerSliding_Tick() 이벤트 함수가 추가됩니다.

코드가 간단하지만 동작을 설명하겠습니다.
① 28번 라인의 checkBoxHide_CheckedChanged() 이벤트가 발생했을 때 체크 박스의 상태를 확인합니다.
② 체크 박스의 상태에 따라 텍스트를 변경합니다(30번 라인). 좀 더 응용하면, 여기에 아이콘을 추가하여 더 예쁘게 꾸밀 수 있습니다.
③ 그리고 45번 라인이 호출되어 timerSliding을 시작합니다.
④ 49번 라인의 timerSliding_Tick() 타이머 함수가 호출됩니다.
⑤ 51번 라인에서 체크 박스의 상태를 확인합니다.
⑥ 체크 상태에 따라 _posSliding를 STEP_SLIDING만큼 증감하고, panelSideMenu의 폭으로 설정합니다. 이 동작은 MIN_SLIDING_WIDTH, MAX_SLIDING_WIDTH 만큼 실행됩니다.

만약, 슬라이딩 메뉴를 천천히 동작하고 싶다면 STEP_SLIDING 값을 줄이면 됩니다. 반대로 빠르게 동작하려면 값을 늘리면 됩니다.

위 ②번에서 언급한 것처럼, 이미지를 넣으면 사이드 바가 접혔을 때 메뉴 버튼을 아이콘으로 표현할 수 있습니다. 각 메뉴를 좀 더 직관적으로 표현할 수 있겠죠?

메뉴 버튼을 아이콘으로 표현하기

자세한 코드 사용 방법은 아래 첨부된 예제 코드를 참고하세요.

ExamSlidingMenu.zip

0.01MB