[MFC] Dynamic Layout 적용하여 컨트롤 Resizing하기(예제 포함)

소개

Visual Studio 2015 MFC에는 동적 레이아웃(Dynamic Layout) 기능이 추가되었습니다. 이 기능은 Dialog의 Resizing에 따라 자동으로 Control들의 크기가 조정되는 것을 의미합니다. 아래 애니메이션을 보면 이해하는데 도움이 될 것입니다.

Dynamic Layout

보통 일반 프로그램들은 이 기능이 거의 들어가 있습니다. 오히려 동적 레이아웃이 적용되지 않은 프로그램을 찾기가 어렵죠. 하지만 장비 프로그램에서는 보통 사용하지 않습니다. 모니터 크기(또는 윈도우 해상도)가 고정되어 있고, 작업자가 프로그램의 크기를 조정하는 경우는 극히 드물기 때문입니다. 게다가 프로그램에 수많은 컨트롤이 포함되어 있기 때문에, 이를 고려하여 동적 레이아웃을 적용한다는 것은 불필요한 작업이라 여겨집니다.

이번 본문에서는 Visual Studio 2015 MFC 기준, Dialog 프로젝트에서 몇 가지 컨트롤의 동적 레이아웃 예제를 작성해 보겠습니다.

따라하기

UI 컨트롤 구성

MFC에서 Dialog 프로젝트를 하나 생성하고, 리소스 편집기에서 아래와 같이 컨트롤을 추가합니다. 컨트롤만 추가하고 이벤트는 추가하지 않을 겁니다.

UI 구성

참고로, Dialog 속성 중 Border의 값은 Resizing입니다. Resizing으로 되어있어야 크기 조정이 가능합니다.

Dialog 속성

동적 레이아웃 설정

리소스 편집기에서 컨트롤의 속성 중 동적 레이아웃 값을 설정하여, 동적 이동 및 크기를 조정할 수 있습니다. 하지만 이번 예제에서는 코드에서 설정합니다.

컨트롤 속성

아래와 같이 동적 레이아웃을 설정하는 코드를 작성합니다. 아래 코드에는 설정 가능한 몇 가지 이동 및 크기 조정 옵션이 포함되어 있습니다. 그리고 manager->AddItem()을 통해 컨트롤의 동적 레이아웃 옵션과 함께 등록이 가능합니다.

void CExamDynamicLayoutDlg::SetupForDynamicLayout()
{
	// 동적 레이아웃 활성화.
	this->EnableDynamicLayout();
	
	/* 이동 옵션 */
	// 1. 이동하지 않음.
	auto move_none = CMFCDynamicLayout::MoveSettings{};
	// 2. X,Y 방향으로 100% 비율 이동.
	auto move_both_100 = CMFCDynamicLayout::MoveSettings{};
	move_both_100.m_nXRatio = 100;
	move_both_100.m_nYRatio = 100;
	// 3. X 방향으로만 100% 비율 이동.
	auto move_x_100 = CMFCDynamicLayout::MoveSettings{};
	move_x_100.m_nXRatio = 100;
	// 4. Y 방향으로만 100% 비율 이동.
	auto move_y_100 = CMFCDynamicLayout::MoveSettings{};
	move_y_100.m_nYRatio = 100;
	/* 크기 조정 옵션 */
	// 1. 크기 조정하지 않음.
	auto size_none = CMFCDynamicLayout::SizeSettings{};
	// 2. X,Y 방향으로 100% 비율 크기 조정.
	auto size_both_100 = CMFCDynamicLayout::SizeSettings{};
	size_both_100.m_nXRatio = 100;
	size_both_100.m_nYRatio = 100;
	// 3. X 방향으로만 100% 비율 크기 조정.
	auto size_x_100 = CMFCDynamicLayout::SizeSettings{};
	size_x_100.m_nXRatio = 100;
	// 4. Y 방향으로만 100% 비율 크기 조정.
	auto size_y_100 = CMFCDynamicLayout::SizeSettings{};
	size_y_100.m_nYRatio = 100;

	// Dialog의 동적 레이아웃 포인터 획득.
	auto manager = this->GetDynamicLayout();
	// 동적 레이아웃 생성.
	manager->Create(this);
	// 동적 레이아웃에 등록할 컨트롤 추가.
	manager->AddItem(IDC_GRP_FORM, move_none, size_both_100);
	manager->AddItem(IDC_EDIT_NAME, move_none, size_x_100);
	manager->AddItem(IDC_EDIT_AGE, move_none, size_x_100);
	manager->AddItem(IDC_BTN_SUBMIT, move_none, size_both_100);
}

위 함수는 OnOnInitDialog()에 추가하여, 다이얼로그 초기화 때 호출되도록 합니다.

BOOL CExamDynamicLayoutDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// ...

	// 동적 레이아웃 설정.
	SetupForDynamicLayout();
	
	return TRUE;  // 포커스를 컨트롤에 설정하지 않으면 TRUE를 반환합니다.
}

이렇게만 하면 다이얼로그에 동적 레이아웃이 적용됩니다. 하지만 문제점이 있습니다. 아래 애니메이션과 같이, 캡션바까지 리사이징 되기 때문입니다.

동적 레이아웃 문제

괜찮다면 넘어가도 되지만, 위와 같은 현상을 막기 위해서는 아래의 작업을 수행해야 합니다.

최소 리사이징 크기 지정하기

리사이징 시 최소 사이즈를 지정하기 위해서는, 다이얼로그의 GetMinMaxInfo 메시지를 사용하여 해결할 수 있습니다. 아래 그림과 같이 클래스 마법사에서 메시지를 등록합니다. 클래스 마법사는 ctrl + shift + x 키를 입력하면 생성됩니다.

클래스 마법사 화면

그리고 아래와 같이 코드를 작성합니다. 헤더에 최소 영역을 위한 변수를 정의하고, OnInitDialog()에서 최초 프로그램 실행했을 때의 크기를 얻습니다. 그리고 그 크기를 최소 사이즈로 고정하는 것입니다.

// 헤더에 정의.
CRect m_rcMinimumDialog;

BOOL CExamDynamicLayoutDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	/...

	// 동적 레이아웃 설정.
	SetupForDynamicLayout();
	
	// 리사이징 최소 크기를 위한 영역 획득.
	GetClientRect(&m_rcMinimumDialog);
	CalcWindowRect(m_rcMinimumDialog);

	return TRUE;  // 포커스를 컨트롤에 설정하지 않으면 TRUE를 반환합니다.
}

void CExamDynamicLayoutDlg::OnGetMinMaxInfo(MINMAXINFO* lpMMI)
{
	lpMMI->ptMinTrackSize.x = m_rcMinimumDialog.Width();
	lpMMI->ptMinTrackSize.y = m_rcMinimumDialog.Height();
}

마치며

이것으로 동적 레이아웃 기능이 포함된 다이얼로그 예제 코드를 작성해 봤습니다. 예제 코드도 첨부하니, 참고하세요.

Exam_DynamicLayout - Dialog.zip

0.13MB

참고

Dynamic Dialog Layout for MFC in Visual Studio C++ 2015