인터넷 옵션 다이얼로그처럼 구성하기

보통 어플리케이션의 옵션 창에서 많이 볼 수 있는 다이얼로그를 만드는 방법을 살펴보겠습니다.

인터넷 익스플로러의 옵션 창입니다. 보는 바와 같이 탭 컨트롤을 이용하여 다중 다이얼로그를 좁은 공간에 효율적으로 배치하고 있습니다. 그럼 이 다이얼로그는 어떻게 구성되어 있을까요. class hierarchy를 살펴보겠습니다.

레이아웃 메니져를 통해 살표보니 위의 그림과 같이 나오는군요. 아시다시피 다이얼로그의 클래스 이름은 #32770 입니다. MS에서 정해놓은 이름이지요. 살표보면 루트 다이얼로그에 자식 다이얼로그가 7개, 탭컨트롤 1개, 버튼이 4개 있습니다.화면에는 확인, 취소, 적용 버튼이 있지만, 도움말 버튼이 숨어 있죠. (ie8 인데.. 왜 숨겨놨을까요.. @.@a)

사진에서도 확인할 수 있듯이 각 탭마다 서로 다른 다이얼로그가 있음을 바로 알 수 있습니다. 그럼 일반 탭에 있는 다이얼로그를 살짝 움직여 보겠습니다. 위치값만 바꾸면 되니 레이아웃 메니져에서 위치만 살짝 수정해주시면 아래와 같이 확인할 수 있죠.

자. 그럼 이런 옵션 다이얼로그를 직접 만들어 보겠습니다.

만드는 것은 그리 어렵지 않습니다. 다이얼로그를 각 탭의 갯수만큼만 더 만들어 주시면 되구요.
초반에 다이얼로그 위치를 잡을 때 아래와 같이 탭 컨트롤의 위치와 크기, 탭 버튼의 높이 정보를 이용해서 다이얼로그를 생성해 주시면 됩니다.

위치와 크기를 구하는 함수는 아래의 코드를 참고하세요.

232 int iw,ih;

233 CRect c,w,rc,th;

234 GetWindowRect(&w);

235 GetClientRect(&c);

236 iw = (w.Width()-c.Width())/2;

237 ih = (w.Height()-c.Height())-iw;

238 m_ctrlTab.GetWindowRect(&rc);

239 m_ctrlTab.GetItemRect(0, &th);

240

241 rc.left = rc.left - iw;

242 rc.right = rc.right - iw -2;

243 rc.top = rc.top - ih;

244 rc.bottom = rc.bottom - ih -2;

245 rc.top = rc.top + th.bottom;

246 rc.DeflateRect(1,1);

247

248 CTempDlg* p1 = new CTempDlg;

249 p1->Create(CTempDlg::IDD, this);

250 p1->MoveWindow(&rc, TRUE);

251 p1->ShowWindow(SW_SHOW);

252 m_pTempDlg = p1;

마지막으로 할 일은, xp 의 경우 탭 컨트롤의 바탕색이 일반 다이얼로그색이 아닌 밝은 은색으로 채워진다는 것인데, 이것을 다이얼로그에 직접 적용하려면 테마쪽 api 를 한번 호출해줘야 합니다.

다이얼로그 초기화 함수인 OnInitDialog() 에 밑에 코드를 한번 호출해 주세요.

40 EnableThemeDialogTexture(GetSafeHwnd(), ETDT_ENABLETAB);

이제 정말 다 되었습니다.
아래의 그림의 첫 탭에는 xp 스타일을 적용한 것이구요, 3번째 탭에는 xp 스타일을 적용하지 않았을 때의 경우 입니다.