연습: MFC 자유 곡선 애플리케이션 업데이트(1부)

아티클
06/16/2023

이 연습에서는 리본 메뉴 사용자 인터페이스를 사용하여 기존 MFC 애플리케이션을 수정하는 방법을 보여 줍니다. Visual Studio는 Office 2007 리본과 Windows 7 Scenic 리본을 지원합니다. 리본 사용자 인터페이스에 대한 자세한 내용은 리본 메뉴를 참조 하세요.

이 연습에서는 마우스를 사용하여 줄 그리기를 만들 수 있는 클래식 Scribble 1.0 MFC 샘플을 수정합니다. 이 연습 부분에서는 리본 표시줄에 표시되도록 Scribble 샘플을 수정하는 방법을 보여 줍니다. 2 부에서는 리본 표시줄에 단추를 더 추가합니다.

필수 조건

Scribble 1.0 MFC 샘플입니다. Visual Studio 2017 이상으로 변환하는 데 대한 도움말은 이식 가이드: MFC 낙서를 참조 하세요.

섹션

이 연습 부분에는 다음 단원이 있습니다.

기본 클래스 바꾸기
프로젝트에 비트맵 추가
프로젝트에 리본 리소스 추가
리본 표시줄의 인스턴스 만들기
리본 범주 추가
애플리케이션의 모양 설정

기본 클래스 바꾸기

메뉴를 지원하는 애플리케이션을 리본을 지원하는 애플리케이션으로 변환하려면 업데이트된 기본 클래스에서 애플리케이션 프레임 창 및 도구 모음 클래스를 파생시켜야 합니다. (원래 Scribble 샘플을 수정하지 않는 것이 좋습니다. 대신, Scribble 프로젝트를 클린 다른 디렉터리에 복사한 다음 복사본을 수정합니다.)

Scribble 애플리케이션에서 기본 클래스를 대체하려면

scribble.cpp에서 AfxOleInit에 대한 호출이 CScribbleApp::InitInstance 포함되어 있는지 확인합니다.
pch.h 파일(Visual Studio 2017 및 이전 버전의 stdafx.h)에 다음 코드를 추가합니다.
```
#include <afxcontrolbars.h>
```
scribble.h에서 CWinAppEx 클래스에서 파생되도록 클래스에 대한 CScribbleApp 정의를 수정합니다.
```
class CScribbleApp: public CWinAppEx
```
Windows 애플리케이션이 사용자 기본 설정 데이터를 저장하기 위해 초기화(.ini) 파일을 사용한 경우 Scribble 1.0이 작성됩니다. 초기화 파일 대신 Scribble을 수정하여 레지스트리에 사용자 기본 설정을 저장합니다. 레지스트리 키와 기본 설정을 설정하려면 CScribbleApp::InitInstance 문 뒤의 LoadStdProfileSettings()에서 다음 코드를 입력합니다.
```
SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));
```
MDI(다중 문서 인터페이스) 애플리케이션에 대한 주 프레임은 더 이상 CMDIFrameWnd 클래스로부터 파생되지 않습니다. 대신 CMDIFrameWndEx 클래스에서 파생됩니다.

mainfrm.h 및 mainfrm.cpp 파일에서 CMDIFrameWnd의 모든 참조를 CMDIFrameWndEx로 대체합니다.
childfrm.h 및 childfrm.cpp 파일에서 CMDIChildWnd를 CMDIChildWndEx로 대체합니다.

childfrm에서. h 파일, .로 바꾸기 CSplitterWndCSplitterWndEx
새 MFC 클래스를 사용하여 도구 모음 및 상태 표시줄을 수정합니다.

mainfrm.h 파일에서
1. CToolBar를 CMFCToolBar로 교체합니다.
2. CStatusBar를 CMFCStatusBar로 교체합니다.
mainfrm.cpp 파일에서
1. m_wndToolBar.SetBarStyle를 m_wndToolBar.SetPaneStyle으로 대체합니다.
2. m_wndToolBar.GetBarStyle를 m_wndToolBar.GetPaneStyle으로 대체합니다.
3. DockControlBar(&m_wndToolBar)를 DockPane(&m_wndToolBar)으로 대체합니다.

ipframe.cpp 파일에서 코드의 다음 세 줄을 주석으로 처리합니다.

m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->DockPane(&m_wndToolBar);

변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다.

프로젝트에 비트맵 추가

이 연습의 다음 네 개의 단계에서는 비트맵 리소스가 필요합니다. 다음과 같은 다양한 방법으로 적절한 비트맵을 가져올 수 있습니다.

리소스 편집기를 사용하여 고유한 비트맵을 발명합니다. 또는 리소스 편집기를 사용하여 Visual Studio에 포함되어 있고 Visual Studio 이미지 라이브러리에서 다운로드할 수 있는 이식 가능한 네트워크 그래프ics(.png) 이미지에서 비트맵을 어셈블합니다.

그러나 리본 사용자 인터페이스를 사용하려면 특정 비트맵이 투명한 이미지를 지원해야 합니다. 투명한 비트맵은 32비트 픽셀을 사용합니다. 여기서 24비트에서는 색의 빨간색, 녹색 및 파란색 구성 요소를 지정하고 8비트에서는 색의 투명도를 지정하는 알파 채널을 정의합니다. 현재 리소스 편집기에서는 볼 수는 있지만 32비트 픽셀로 비트맵을 수정할 수 없습니다. 따라서, 리소스 편집기 대신에 외부 이미지 편집기를 사용하여 투명한 비트맵을 조작합니다.
프로젝트의 다른 애플리케이션에서 적절한 리소스 파일을 복사한 다음 해당 파일에서 비트맵을 가져옵니다.

이 연습에서는 연습: MFC를 사용하여 리본 애플리케이션 만들기에서 만든 예제의 리소스 파일을 복사합니다.

프로젝트에 비트맵을 추가하려면

파일 탐색기 사용하여 리본 예제의 리소스 디렉터리(res)에서 Scribble 프로젝트의 리소스 디렉터리(res)로 다음 .bmp 파일을 복사합니다.
1. Scribble 프로젝트에 main.bmp를 복사합니다.
2. Scribble 프로젝트에 filesmall.bmp 및 filelarge.bmp를 복사합니다.
3. filelarge.bmp 및 filesmall.bmp 파일의 새 복사본을 만들지만 리본 예제에 복사본을 저장합니다. 해당 복사본의 이름을 homesmall.bmp 및 homelarge.bmp로 바꾼 다음 Scribble 프로젝트로 복사본을 이동합니다.
4. toolbar.bmp 파일의 복사본을 만들지만 리본 예제에 복사본을 저장합니다. 복사본의 이름을 panelicons.bmp로 바꾼 다음 Scribble 프로젝트로 복사본을 이동합니다.
MFC 애플리케이션에 대한 비트맵을 가져옵니다. 리소스 뷰에서 scribble.rc 노드를 두 번 클릭하고 비트맵 노드를 두 번 클릭한 다음 리소스 추가를 클릭합니다. 표시되는 대화 상자에서 가져오기를 클릭합니다. 디렉터리로 이동하여 res 기본.bmp 파일을 선택한 다음 열기를 클릭합니다.

main.bmp 비트맵에는 26x26 이미지가 포함됩니다. 비트맵의 ID를 .로 IDB_RIBBON_MAIN변경합니다.
애플리케이션 단추에 연결된 파일 메뉴의 비트맵을 가져옵니다.
1. 11개의 16x16(16x176) 이미지가 포함된 filesmall.bmp 파일을 가져옵니다. 비트맵의 ID를 .로 IDB_RIBBON_FILESMALL변경합니다.
참고 항목

처음 8개의 16x16 이미지(16x128)만 필요하기 때문에 필요에 따라 이 비트맵의 오른쪽 너비를 176에서 128로 자릅니다.
1. 9개의 32x32(32x288) 이미지가 포함된 filelarge.bmp를 가져옵니다. 비트맵의 ID를 .로 IDB_RIBBON_FILELARGE변경합니다.
리본 범주와 패널에 대한 비트맵을 가져옵니다. 리본 표시줄의 각 탭은 범주이며 텍스트 레이블 및 선택적 이미지로 구성되어 있습니다.
1. 작은 단추 비트맵에 대한 11개의 16x16 이미지가 포함된 homesmall.bmp 비트맵을 가져옵니다. 비트맵의 ID를 .로 IDB_RIBBON_HOMESMALL변경합니다.
2. 큰 단추 비트맵에 대한 9개의 32x32 이미지가 포함된 homelarge.bmp 비트맵을 가져옵니다. 비트맵의 ID를 .로 IDB_RIBBON_HOMELARGE변경합니다.
크기가 조정된 리본 패널의 비트맵을 가져옵니다. 전체 창을 표시하기에 리본이 너무 작다면 크기 조정 작업 후에 이러한 비트맵 또는 패널 아이콘이 사용됩니다.
1. 8개의 16x16 이미지가 포함된 panelicons.bmp 비트맵을 가져옵니다. 비트맵 편집기의 속성 창에서 비트맵의 너비를 64(16x64)로 조정합니다. 비트맵의 ID를 .로 IDB_PANEL_ICONS변경합니다.
참고 항목

처음 4개의 16x16 이미지(16x64)만 필요하기 때문에 필요에 따라 이 비트맵의 오른쪽 너비를 128에서 64로 자릅니다.

프로젝트에 리본 리소스 추가

메뉴를 사용하는 애플리케이션을 리본 메뉴를 사용하는 애플리케이션으로 변환하는 경우 기존 메뉴를 제거하거나 사용하지 않도록 설정할 필요가 없습니다. 리본 리소스를 만들고 리본 단추를 추가한 다음 새 단추를 기존 메뉴 항목과 연결하기만 하면 됩니다. 메뉴가 더 이상 표시되지 않지만 리본 표시줄의 메시지는 메뉴를 통해 라우팅되고 메뉴 바로 가기는 계속 작동합니다.

리본은 리본의 왼쪽 위에 있는 큰 단추인 애플리케이션 단추와 하나 이상의 범주 탭으로 구성됩니다. 각 범주 탭에는 리본 단추 및 컨트롤에 대한 컨테이너 역할을 하는 패널이 하나 이상 포함되어 있습니다. 다음 절차에서는 리본 리소스를 만든 다음 애플리케이션 단추를 사용자 지정하는 방법을 보여 줍니다.

프로젝트에 리본 리소스를 추가하려면

솔루션 탐색기 Scribble 프로젝트를 선택한 상태에서 [프로젝트] 메뉴에서 [자원 추가]를 클릭합니다.
리소스 추가 대화 상자에서 리본 메뉴를 선택한 다음 새로 만들기를 클릭합니다.

Visual Studio에서는 리본 리소스를 만들어 디자인 뷰에서 엽니다. 리본 리소스 ID는 IDR_RIBBON1리소스 뷰에 표시됩니다. 리본에는 범주 하나와 패널 하나가 포함되어 있습니다.
해당 속성을 수정하여 애플리케이션 단추를 사용자 지정할 수 있습니다. 이 코드에 사용되는 메시지 ID는 Scribble 1.0에 대한 메뉴에 이미 정의되어 있습니다.
디자인 보기에서 애플리케이션 단추를 클릭하여 해당 속성을 표시합니다. 속성 값을 다음과 같이 변경합니다 . Image to IDB_RIBBON_MAIN, Prompt to File, Keys to f, Large Images to IDB_RIBBON_FILELARGE, and small Images to IDB_RIBBON_FILESMALL.
다음 수정은 사용자가 애플리케이션 단추를 클릭할 때 나타나는 메뉴를 만듭니다. 주 항목 옆에 있는 줄임표(...)를 클릭하여 항목 편집기를 엽니다.
1. 항목 유형 단추를 선택한 상태에서 추가를 클릭하여 단추를 추가합니다. 캡션을 , ID로, 이미지에서 이미지로0, 큰 이미지로 변경합니다0.ID_FILE_NEW&New
2. 추가를 클릭하여 단추를 추가합니다. 캡션을 , ID로, 이미지를 로 2변경하고 큰 이미지로 변경합니다2.ID_FILE_SAVE&Save
3. 추가를 클릭하여 단추를 추가합니다. 캡션을 , ID로, 이미지를 로 3변경하고 큰 이미지로 변경합니다3.ID_FILE_SAVE_ASSave &As
4. 추가를 클릭하여 단추를 추가합니다. 캡션을 , ID로, 이미지를 로 4변경하고 큰 이미지로 변경합니다4.ID_FILE_PRINT&Print
5. 항목 유형을 구분 기호로 변경한 다음 추가를 클릭합니다.
6. 항목 유형을 단추로 변경합니다. 추가를 클릭하여 다섯 번째 단추를 추가합니다. 캡션을 , ID로, 이미지를 로 5변경하고 큰 이미지로 변경합니다5.ID_FILE_CLOSE&Close
다음 수정은 이전 단계에서 만든 인쇄 단추 아래에 하위 메뉴가 만들어집니다.
1. 인쇄 단추를 클릭하고 항목 유형을 레이블로 변경한 다음 삽입을 클릭합니다. 캡션을 .로 변경합니다Preview and print the document.
2. 인쇄 단추를 클릭하고 항목 유형을 단추로 변경한 다음 삽입을 클릭합니다. 캡션을 , ID로, 이미지를 로 4변경하고 큰 이미지로 변경합니다4.ID_FILE_PRINT&Print
3. 인쇄 단추를 클릭한 다음 삽입을 클릭하여 단추를 추가합니다. 캡션을 , ID로, 이미지를 로 7변경하고 큰 이미지로 변경합니다7.ID_FILE_PRINT_DIRECT&Quick Print
4. 인쇄 단추를 클릭한 다음 삽입을 클릭하여 다른 단추를 추가합니다. 캡션을 , ID로, 이미지를 로 6변경하고 큰 이미지로 변경합니다6.ID_FILE_PRINT_PREVIEWPrint Pre&view
5. 이제 기본 항목을 수정 했습니다. 닫기를 클릭하여 항목 편집기를 종료합니다.
다음 수정은 애플리케이션 단추 메뉴의 아래쪽에 표시되는 종료 단추를 만듭니다.
1. 솔루션 탐색기 리소스 보기 탭을 선택합니다.
2. 속성 창에서 단추 옆에 있는 줄임표(...)를 클릭하여 항목 편집기를 엽니다.
3. 항목 유형 단추를 선택한 상태에서 추가를 클릭하여 단추를 추가합니다. 캡션을 < a0/>로 E&xit변경하고, ID를 ID_APP_EXIT8로 변경합니다.
4. 단추를 수정 했습니다. 닫기를 클릭하여 항목 편집기를 종료합니다.

리본 표시줄의 인스턴스 만들기

다음 단계에서는 애플리케이션 시작 시 리본 표시줄의 인스턴스를 만드는 방법을 보여 줍니다. 애플리케이션에 리본 표시줄을 추가하려면 mainfrm.h 파일에 리본 표시줄을 선언합니다. 그런 다음 mainfrm.cpp 파일에서 리본 리소스를 로드하는 코드를 작성합니다.

리본 표시줄의 인스턴스를 만들려면

mainfrm.h 파일에서 주 프레임에 대한 클래스 정의인 CMainFrame의 보호된 섹션에 데이터 멤버를 추가합니다. 이 멤버는 리본 표시줄에 대한 것입니다.
```
// Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;
```
mainfrm.cpp 파일에서 return 함수 끝의 마지막 CMainFrame::OnCreate 문 앞에 다음 코드를 추가합니다. 리본 표시줄의 인스턴스를 만듭니다.
```
// Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);
```

리본 리소스 사용자 지정

이제 애플리케이션 단추를 만들었으므로 리본 메뉴에 요소를 추가할 수 있습니다.

참고 항목

이 연습에서는 모든 패널에 대해 동일한 패널 아이콘을 사용합니다. 그러나 다른 아이콘을 표시하기 위해 다른 이미지 목록 인덱스를 사용할 수 있습니다.

홈 범주 및 편집 패널을 추가하려면

Scribble 프로그램에서는 하나의 범주만 필요로 합니다. 디자인 보기의 도구 상자에서 범주를 두 번 클릭하여 범주를 추가하고 해당 속성을 표시합니다. 속성 값을 다음과 같이 변경합니다. 캡션을 &Home/>로, 큰 이미지를 IDB_RIBBON_HOMELARGE/>IDB_RIBBON_HOMESMALL로 변경합니다.
각 리본 범주는 명명된 패널로 구성되어 있습니다. 각 패널에는 관련 작업을 완료하는 컨트롤 집합이 포함되어 있습니다. 이 범주에는 한 패널이 있습니다. 패널을 클릭한 다음 캡션을 .로 Edit변경합니다.
편집 패널에 문서의 내용을 지우는 단추를 추가합니다. 이 단추의 메시지 ID는 메뉴 리소스에 IDR_SCRIBBTYPE 이미 정의되어 있습니다. 단추를 데코레이트하는 비트맵의 인덱스 및 단추 텍스트로 지정 Clear All 합니다. 도구 상자를 연 다음 단추를 편집 패널로 끕니다. 단추를 클릭한 다음 캡션을 ,ID를 Clear AllID_EDIT_CLEAR_ALL로 변경하고 이미지 인덱스가 큰 0이미지 인덱스로 변경합니다0.
변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다. Scribble 애플리케이션은 표시되어야 하며 메뉴 모음 대신 창의 위쪽에 리본 표시줄이 있어야 합니다. 리본 표시줄에는 하나의 범주가 있어야 합니다. 홈 및 홈에는 하나의 패널인 편집이 있어야 합니다. 추가한 리본 단추는 기존 이벤트 처리기와 연결되어야 하며 열기, 닫기, 저장, 인쇄 및 모두 지우기 단추는 예상대로 작동해야 합니다.

애플리케이션의 모양 설정

시각적 관리자는 애플리케이션에 대한 모든 그리기를 제어하는 전역 개체입니다. 원래 Scribble 애플리케이션은 Office 2000 UI(사용자 인터페이스) 스타일을 사용하므로 해당 애플리케이션이 더 이상 사용되지 않는 것처럼 보일 수 있습니다. Office 2007 애플리케이션과 비슷하도록 Office 2007 비주얼 관리자를 사용하여 애플리케이션을 다시 설정할 수 있습니다.

애플리케이션의 모양을 설정하려면

함수에서 CMainFrame::OnCreate 문 앞에 return 0; 다음 코드를 입력하여 기본 비주얼 관리자와 스타일을 변경합니다.

// Set the default manager to Office 2007
CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerOffice2007));
CMFCVisualManagerOffice2007::SetStyle(CMFCVisualManagerOffice2007::Office2007_LunaBlue);

변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다. 애플리케이션 UI는 Office 2007 UI와 비슷해야 합니다.

다음 단계

리본 디자이너를 사용하도록 클래식 Scribble 1.0 MFC 샘플을 수정했습니다. 이제 2부로 이동합니다.

참고 항목

연습
연습: MFC 자유 곡선 애플리케이션 업데이트(2부)

다음을 통해 공유

연습: MFC 자유 곡선 애플리케이션 업데이트(1부)

필수 조건

섹션

기본 클래스 바꾸기

Scribble 애플리케이션에서 기본 클래스를 대체하려면

프로젝트에 비트맵 추가

프로젝트에 비트맵을 추가하려면

프로젝트에 리본 리소스 추가

프로젝트에 리본 리소스를 추가하려면

리본 표시줄의 인스턴스 만들기

리본 표시줄의 인스턴스를 만들려면

리본 리소스 사용자 지정

홈 범주 및 편집 패널을 추가하려면

애플리케이션의 모양 설정

애플리케이션의 모양을 설정하려면

다음 단계

참고 항목

피드백

피드백

추가 리소스