You are on page 1of 26

Hands-On Lab

Ribbon with MFC - Native
Lab version: 1.0.0 Last updated: 12/3/2010

Ribbon with MFC - Native

CONTENTS OVERVIEW ............................................................................................................................................. 3 EXERCISE 1: CREATING A DEFAULT RIBBON IN AN APPLICATION ................................................. 3

Task 1 - Create a new MFC project with Ribbon in Visual Studio 2010 .............................................. 3
EXERCISE 2: ADDING SIMPLE CONTROLS TO AN EXISTING RIBBON ........................................... 12

Task 1 - Adding simple controls to an existing Ribbon .................................................................... 12 Task 2 - Add event handlers to the controls ................................................................................... 16
EXERCISE 3: ADDING AND USING MORE CONTROLS TO AN EXISTING RIBBON ......................... 17

Task 1 - Build the existing Ribbon application to see the Ribbon controls ....................................... 17 Task 2 - Disable and Enable a button at run time............................................................................ 19 Task 3 - Display the currently selected combo box item. ................................................................ 20 Task 4 - Draw a rectangle in the View when a button is clicked ...................................................... 21 Task 5 - Change the color of the rectangle ..................................................................................... 23 Task 6 - Move the slider to zoom the rectangle .............................................................................. 24
SUMMARY............................................................................................................................................ 26

In the event that a copying error (or any other problem) prevents the application from compiling. you will learn how to:     Create a default Ribbon for your application in Visual Studio® 2010 Add Ribbon controls such as buttons. Just click. click and click! Task 1 . When you are finished. you can find fully completed samples in the tutorial package. you will have performed all the steps necessary to add and customize a basic Ribbon in an application. along with the final source code for each exercise. and then use the controls at run time. Prerequisites You must have the following items to complete this lab:   Microsoft Visual Studio® 2010 Beta 2 (or higher) Windows 7 Learning Objectives While completing this tutorial.Create a new MFC project with Ribbon in Visual Studio 2010 .Native Overview This tutorial is intended for MFC developers who are developing desktop applications and want to take advantage of the new MFC Ribbon framework. These samples can be used to unblock compiling errors. edit various Ribbon controls in Ribbon Designer. The tutorial will involve real-time compiling of code and copying code from this document. checkbox and chunks in Ribbon Designer Add Event handler functions for Ribbon control in Ribbon Designer Use the Ribbon controls at run time Exercise 1: Creating a default Ribbon in an application In this exercise you will start by creating a MFC application with Ribbon in Windows 7 style from scratch in Visual Studio 2010. You do not need to write any code to do that. The tutorial steps you through how to add a default Ribbon to a small application.Ribbon with MFC . You will learn how easily MFC Ribbon framework allows you to edit and use Ribbon controls.

The New Project dialog box will be displayed. . Type a name for the project. In the Application Type pane. In Visual Studio 2010. In the Templates pane. change Project Style to “Office”. on the File menu. Figure 1-1 3. To run the wizard. 2. The MF Application Wizard will be displayed. and change Visual Style and Colors to “Windows 7”. use the MFC Application Wizard to create an MFC application that has a default ribbon. and click Next.Native 1. point to New.Ribbon with MFC . select MFC Application. expand the Visual C++ node in the Project Types pane and select MFC. Please refer to Figure 1-1. such as RibbonApp. and then select Project. Please refer to Figure 12. and click OK. Leave everything else as it is. In the New Project dialog box.

Leave the Compound Document Support settings at the default (the “None” checkbox is checked). Please refer to Figure 1-3.Ribbon with MFC .Native Figure 1-2 4. .

leave everything at the default.Ribbon with MFC . Please refer to Figure 1-4. In the Document Template Strings pane.Native Figure 1-3 5. .

.Native Figure 1-4 6. In the Database Support pane.Ribbon with MFC . Please refer to Figure 1-5. Click Next. leave everything at the default settings (“None” should be selected).

Click Next. Please refer to Figure 1-6. .Native Figure 1-5 7.Ribbon with MFC . In the User Interface Features pane. make sure that the Use a Ribbon option is selected.

.Native Figure 1-6 8. In the Advanced frame pane. Please refer to Figure 1-7.Ribbon with MFC . Click Next. clear all options.

. leave everything at the default settings. In the Generated Classes pane. Please refer to Figure 1-8.Native Figure 1-7 9.Ribbon with MFC .

run the application by selecting Start Debugging from the Debug menu. select Build Solution. If the application builds successfully. .Native Figure 1-8 10. which are named Clipboard. To build the application. View and Window.Ribbon with MFC . on the Build menu. This category contains three ribbon panels. Please refer to Figure 1-9. The wizard will automatically create a Ribbon in Windows 7 Style with one Ribbon category that is named Home.

Ribbon Bar Designer panel. you will use the RibbonApp solution from EX02_Starter\Begin\RibbonApp folder.sln in Visual Studio 2010. you will learn how to drag a control in Ribbon Designer and how to add an event handler easily. 2. Launch RibbonApp.Ribbon with MFC . The Resource View panel. expand RibbonApp. and Toolbox panel are shown in Figure 2-1. which makes it easy to add and edit any Ribbon controls to your application.Adding simple controls to an existing Ribbon 1. In the Resource View. Double click the file to open the Ribbon Designer. For this exercise. .rc ->Ribbon->IDR_RIBBON node.Native Figure 1-9 Exercise 2: Adding simple controls to an existing Ribbon Visual Studio 2010 has a new feature called Ribbon Designer for MFC application. Task 1 . In this exercise.

This defines the image collection for the elements in this category. and edit the other properties. In the Property Window. select “IDB_WRITELARGE” from the drop down list of “Large Images”.Native Figure 2-1 3. and select Properties to open the Properties window. you can easily rename the Caption to “My Category”. Figure 2-2 4. which is shown in Figure 2-2. Right click “Category1”. The buttons are named “Button1” and “Button2” by default. As shown in the Property window in Figure 2-3. . The Ribbon Bar has a new look.Ribbon with MFC . and select “IDB_WRITESMALL” from the drop-down list of “Small Images”. you will see a Category named “Category1” and a Panel in Category1 named “Panel1” . In the Designer. Drag a Category control from the Toolbox to the Ribbon Bar. Drag two Button controls from the Toolbox to “Panel1”.

Open the Properties window of the buttons you just created. To add an image to your buttons. Test your Ribbon by clicking the “Test Ribbon” button on the toolbar. Change the value of Large Image Index to “0” to add an image for “My Button”. Click the Browse button. which will allow you to browse the image collection).Native Figure 2-3 5. . as shown in Figure 2-5. Select “0” and edit the other properties as shown in Figure 2-4.Ribbon with MFC . and the Image Collection dialog will pop up. and change the captions to “My Button” and “My Choice”. open the Properties window of “My Choice” and click “Large Image Index” (you will see a Browse button when you select the value field. Figure 2-4 6.

The two buttons that you created (“My Choice” and “My Button”) are disabled by default. it has a new look as shown in Figure 2-6.Native Figure 2-5 7. Now. The buttons will be enabled once you add a click event handler for each of them.Ribbon with MFC . Build and Run your application. Figure 2-6 .

Here. Click the “My Button” button.cpp. Add the following line of code to the function OnMyButton() in Mainfrm. Click “Add and Edit”. C++ MessageBox(TEXT("This is My Button!"). The wizard will generate some functions automatically for you. as shown in Figure 2-7. and test your application as shown in Figure 2-8.Native Task 2 . It is very easy to add event handlers in the Ribbon Designer. . 3. TEXT("My Button").Ribbon with MFC . 4. and select “Add Event Handler”. Right click the “My Button” Button control. you will see the empty function CMainFrame::OnMyButton()in MainFrm.cpp. and then open the source code editor. Select the “Command” message type and “CMainFrame” from the class list. The Event Handler Wizard will open. Your application will have a Ribbon Bar with one Category and two buttons. Figure 2-7 2.Add event handlers to the controls 1. MB_OK). Build and Run your solution.

This exercise will demonstrate more about Ribbon controls. click Rebuild Solution.Ribbon with MFC . Check Box. On the Debug menu. and focus on how to use Button. . Task 1 . click Start Debugging. Slider. Open the RibbonApp solution from the EX03_Starter\Begin\RibbonApp folder 2.Build the existing Ribbon application to see the Ribbon controls 1. and Combo Box MFC Ribbon controls at run time. 3.Native Figure 2-8 Exercise 3: Adding and using more controls to an existing Ribbon Exercise 1 demonstrated how to use the MFC Wizard to create an application with a default ribbon. On the Build menu. Exercise 2 demonstrated how to use Ribbon Designer to add or modify Ribbon controls easily.

Ribbon with MFC .Native 4. and you will see the ribbon change. as shown in Figure 3-2 . All of the ribbon controls shown here were created using the Ribbon Designer.) Figure 3-1 5. (Exercise 2 shows how to use the Ribbon Designer. Click the “My Category” tab. The application as shown in Figure 3-1 will open.

some variables and functions (such as event handler functions and helper functions) are already declared and defined for you in this project. You can trigger an event by selecting or clearing the check box. Task 2 . Selecting the check box will disable the Object button.Disable and Enable a button at run time 1. You can add code manually to disable or enable a button. 2. } .Native Figure 3-2 Help: For your convenience. the Disable panel of My Category includes one check box and one button. along with some necessary functions. To update the event handler functions for the checkbox control in MainFrm. so you only need to focus on the implementation in the following tasks. enter the following code: C++ void CMainFrame::OnDisableCheckbox() { m_bChecked = !m_bChecked.Ribbon with MFC .cpp. As shown in Figure 3-2. The variables have been declared for you.

You must also update an event handler function for the button object in MainFrm.Display the currently selected combo box item.cpp as follows: C++ void CMainFrame::OnUpdateDisableObject(CCmdUI *pCmdUI) { pCmdUI->Enable(m_bChecked). 1. } 3. Figure 3-3 Task 3 . Update the function in Mainfrm. } 4. Build and run your application. as shown in Figure 3-3.Ribbon with MFC . If you select the “Disable Object Button” check box. the “Object” button will be disabled.cpp. so that a message box will be displayed when an item is selected from the drop-down list in the combo box: C++ void CMainFrame::OnComboMessage() { CMFCRibbonComboBox* pFontComboBox = DYNAMIC_DOWNCAST( .Native void CMainFrame::OnUpdateDisableCheckbox(CCmdUI *pCmdUI) { pCmdUI->SetCheck(!m_bChecked).

CString sMessage = _T(""). m_wndRibbonBar. if (nCurSel >= 0) { CString item=pFontComboBox->GetItem(nCurSel). Build and run the application. MB_OK). MB_OK). } } 2. and click the “Message Box” button.FindByID(ID_COMBO_BOX)).Format(_T("Current Selected Item is \"%s\".item). _T("Combo Box Item").Ribbon with MFC .Draw a rectangle in the View when a button is clicked . } else { MessageBox(_T("Please select one item from droplist of Combo Box. _T("Combo Box Item"). as shown below in Figure 3-4. sMessage. Select an item from the combo box. Figure 3-4 Task 4 .Native CMFCRibbonComboBox. 3. A message box will be displayed. // Get the selected index int nCurSel =pFontComboBox->GetCurSel(). MessageBox(sMessage.").").

222))) { int width=client. CBrush brush. } 3. &brush). Add the following lines to the void CRibbonAppView::OnDraw(CDC* pDC) function in RibbonAppView. Update the following function in CRibbonAppDoc. The Rectangle panel on the Home category includes a Draw button (see Figure 3-1).0.app as shown below. // to make it smaller int height= client. . UpdateAllViews(NULL). } void CRibbonAppDoc::OnRectDraw() { m_bDraw = TRUE.Height()/2. as follows: C++ // Draw a rectangle CRect client.Native 1.Ribbon with MFC . } 2. GetWindowRect(&client).Width()/2. height).cpp after the comment “//TODO: add draw code for native data here” . C++ CRibbonAppDoc::CRibbonAppDoc() { // TODO: add one-time construction code here m_bDraw = FALSE. CRect rect=CRect(0. Click the Draw button to see the application as shown in Figure 35.CreateSolidBrush(RGB(255. so that a rectangle will be drawn when the Draw button is clicked. width.0. } bool CRibbonAppDoc::EnableDraw(void) { return m_bDraw. pDC->FillRect(rect. Build and run the solution. if (pDoc->EnableDraw() && brush.

Change the color of the rectangle 1.Native Figure 3-5 Task 5 . pRibbon->FindByID(ID_FONT_COLOR)).cpp. C++ void CRibbonAppDoc::OnFontColor() { . Update the event handler function of CRibbonAppDoc::OnFontColor() in CRibbonAppDoc. The Color combo box in the Font panel controls the color of the rectangle. CMFCRibbonColorButton* pColor = DYNAMIC_DOWNCAST( CMFCRibbonColorButton. // Get the selected color return pColor->GetColor(). } 2. To enable the Color control. ASSERT_VALID(pRibbon). implement a function called CRibbonAppDoc::GetColor(void) in CRibbonAppDoc.Ribbon with MFC .cpp as follows: C++ COLORREF CRibbonAppDoc::GetColor(void) { CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())>GetRibbonBar().

222))” to the followingl: C++ brush. and select the color Yellow from the Color combo box to see the new UI shown in Figure 3-6. Figure 3-6 Task 6 . Update the helper function double CRibbonAppDoc::GetSliderFactor(void) in CRibbonAppDoc.Move the slider to zoom the rectangle 1. 5.CreateSolidBrush(pDoc->GetColor()) 4. } 3.Native UpdateAllViews(NULL). Click the Draw button. Update the void CRibbonAppView::OnDraw(CDC* pDC) function by changing the line “brush.cpp as follows: C++ // Return the factor of zooming the rectangle double CRibbonAppDoc::GetSliderFactor(void) { // Get a pointer to the ribbon bar .0. Build and run the application.Ribbon with MFC .CreateSolidBrush(RGB(255.

CreateSolidBrush(pDoc->GetColor())) { int width=client. Update the event handler function of the Slider as follows: C++ void CRibbonAppDoc::OnRectSlider() { if(GetAsyncKeyState(VK_LBUTTON)==0) { UpdateAllViews(NULL). return (double)position/(double)pSlider->GetRangeMax(). and then move the slider. // Get current position int position =pSlider->GetPos(). 5. Update the void CRibbonAppView::OnDraw(CDC* pDC) function to enable the Slider function. Build and run the application.Native CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())>GetRibbonBar(). if (factor) { width=width*factor. } } 3. as shown in Figure 3-7. pRibbon->FindByID(ID_RECT_SLIDER)). // to make it smaller int height= client. } 4. height=height*factor. When the Slider is moved.0. height). width. ASSERT_VALID(pRibbon). C++ if (pDoc->EnableDraw() && brush. &brush).Width()/2. the rectangle will be resized using a zoom factor. Click the Draw button. } CRect rect=CRect(0.Ribbon with MFC .Height()/2. } 2. pDC->FillRect(rect. CMFCRibbonSlider* pSlider = DYNAMIC_DOWNCAST( CMFCRibbonSlider. . double factor=pDoc->GetSliderFactor().

sln.Ribbon with MFC .sln should be the same as the application built using EX03_Starter\End\RibbonApp\RibbonApp. You have learned how the new MFC Ribbon Framework can help you to quickly and easily create a Ribbon application using the MFC wizard and Ribbon Designer. .Native Figure 3-7 Help: By the end of this exercise. the application you build with EX03_Starter\Begin\RibbonApp\RibbonApp. Summary You have successfully completed the MFC Ribbon introductory tutorial.