• Article

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. Exercise 2 demonstrated how to use Ribbon Designer to add or modify Ribbon controls easily. This exercise will demonstrate more about Ribbon controls, and focus on how to use Button, Check Box, Slider, and Combo Box MFC Ribbon controls at run time.

Task 1 - Build the existing Ribbon application to see the Ribbon controls

  1. Open the RibbonApp solution from the EX03_Starter\Begin\RibbonApp folder
  2. On the Build menu, click Rebuild Solution.
  3. On the Debug menu, click Start Debugging.
  4. The application as shown in Figure 3-1 will open. All of the ribbon controls shown here were created using the Ribbon Designer. (Exercise 2 shows how to use the Ribbon Designer.)
    Figure 3-1

  5. Click the “My Category” tab, and you will see the ribbon change, as shown in Figure 3-2

    Figure 3-2

Note:
Help:

For your convenience, some variables and functions (such as event handler functions and helper functions) are already declared and defined for you in this project, so you only need to focus on the implementation in the following tasks.

Task 2 - Disable and Enable a button at run time

  1. You can add code manually to disable or enable a button. As shown in Figure 3-2, the Disable panel of My Category includes one check box and one button. You can trigger an event by selecting or clearing the check box. Selecting the check box will disable the Object button. The variables have been declared for you, along with some necessary functions.
  2. To update the event handler functions for the checkbox control in MainFrm.cpp, enter the following code:void CMainFrame::OnDisableCheckbox()
    {
    m_bChecked = !m_bChecked;
    }

    void CMainFrame::OnUpdateDisableCheckbox(CCmdUI *pCmdUI)
    {
    pCmdUI->SetCheck(!m_bChecked);
    }
  3. You must also update an event handler function for the button object in MainFrm.cpp as follows:void CMainFrame::OnUpdateDisableObject(CCmdUI *pCmdUI)
    {
    pCmdUI->Enable(m_bChecked);
    }

  4. Build and run your application. If you select the “Disable Object Button” check box, the “Object” button will be disabled, as shown in Figure 3-3.

    Figure 3-3

Task 3 - Display the currently selected combo box item.

  1. Update the function in Mainfrm.cpp, so that a message box will be displayed when an item is selected from the drop-down list in the combo box: void CMainFrame::OnComboMessage()
    {
    CMFCRibbonComboBox* pFontComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox, m_wndRibbonBar.FindByID(ID_COMBO_BOX));
    // Get the selected index
    int nCurSel =pFontComboBox->GetCurSel();
    if (nCurSel >= 0)
    {
    CString item=pFontComboBox->GetItem(nCurSel);
    CString sMessage = _T("");
    sMessage.Format(_T("Current Selected Item is \"%s\"."),item);
    MessageBox(sMessage, _T("Combo Box Item"), MB_OK);
    }
    else
    {
    MessageBox(_T("Please select one item from droplist of Combo Box."), _T("Combo Box Item"), MB_OK);
    }
    }
  2. Build and run the application.

  3. Select an item from the combo box, and click the “Message Box” button. A message box will be displayed, as shown below in Figure 3-4.

    Figure 3-4

Task 4 - Draw a rectangle in the View when a button is clicked

  1. The Rectangle panel on the Home category includes a Draw button (see Figure 3-1). Update the following function in CRibbonAppDoc.app as shown below, so that a rectangle will be drawn when the Draw button is clicked. CRibbonAppDoc::CRibbonAppDoc()
    {
    // TODO: add one-time construction code here
    m_bDraw = FALSE;
    }

    bool CRibbonAppDoc::EnableDraw(void)
    {
    return m_bDraw;
    }

    void CRibbonAppDoc::OnRectDraw()
    {
    m_bDraw = TRUE;
    UpdateAllViews(NULL);
    }
  2. Add the following lines to the void CRibbonAppView::OnDraw(CDC* pDC) function in RibbonAppView.cpp after the comment “//TODO: add draw code for native data here”, as follows:// Draw a rectangle
    CRect client;
    CBrush brush;
    GetWindowRect(&client);
    if (pDoc->EnableDraw() && brush.CreateSolidBrush(RGB(255,0,222)))
    {
    int width=client.Width()/2; // to make it smaller
    int height= client.Height()/2;
    CRect rect=CRect(0,0, width, height);
    pDC->FillRect(rect, &brush);
    }

  3. Build and run the solution. Click the Draw button to see the application as shown in Figure 3-5.

    Figure 3-5

Task 5 - Change the color of the rectangle

  1. The Color combo box in the Font panel controls the color of the rectangle. To enable the Color control, implement a function called CRibbonAppDoc::GetColor(void) in CRibbonAppDoc.cpp as follows:COLORREF CRibbonAppDoc::GetColor(void)
    {
    CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
    ASSERT_VALID(pRibbon);

    CMFCRibbonColorButton* pColor = DYNAMIC_DOWNCAST(
    CMFCRibbonColorButton, pRibbon->FindByID(ID_FONT_COLOR));
    // Get the selected color
    return pColor->GetColor();
    }
  2. Update the event handler function of CRibbonAppDoc::OnFontColor() in CRibbonAppDoc.cpp.void CRibbonAppDoc::OnFontColor()
    {
    UpdateAllViews(NULL);
    }
  3. Update the void CRibbonAppView::OnDraw(CDC* pDC) function by changing the line “brush.CreateSolidBrush(RGB(255,0,222))” to the followingl:brush.CreateSolidBrush(pDoc->GetColor())
  4. Build and run the application.

  5. Click the Draw button, 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 - Move the slider to zoom the rectangle

  1. Update the helper function double CRibbonAppDoc::GetSliderFactor(void) in CRibbonAppDoc.cpp as follows:// Return the factor of zooming the rectangle
    double CRibbonAppDoc::GetSliderFactor(void)
    {
    // Get a pointer to the ribbon bar
    CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
    ASSERT_VALID(pRibbon);

    CMFCRibbonSlider* pSlider = DYNAMIC_DOWNCAST(
    CMFCRibbonSlider, pRibbon->FindByID(ID_RECT_SLIDER));
    // Get current position
    int position =pSlider->GetPos();
    return (double)position/(double)pSlider->GetRangeMax();
    }
  2. Update the event handler function of the Slider as follows:void CRibbonAppDoc::OnRectSlider()
    {
    if(GetAsyncKeyState(VK_LBUTTON)==0)
    {
    UpdateAllViews(NULL);
    }
    }
  3. Update the void CRibbonAppView::OnDraw(CDC* pDC) function to enable the Slider function. if (pDoc->EnableDraw() && brush.CreateSolidBrush(pDoc->GetColor()))
    {
    int width=client.Width()/2; // to make it smaller
    int height= client.Height()/2;
    double factor=pDoc->GetSliderFactor();
    if (factor)
    {
    width=width*factor;
    height=height*factor;
    }
    CRect rect=CRect(0,0, width, height);
    pDC->FillRect(rect, &brush);
    }
  4. Build and run the application.

  5. Click the Draw button, and then move the slider. When the Slider is moved, the rectangle will be resized using a zoom factor, as shown in Figure 3-7.

    Figure 3-7

    Note:
    Help:

    By the end of this exercise, the application you build with EX03_Starter\Begin\RibbonApp\RibbonApp.sln should be the same as the application built using EX03_Starter\End\RibbonApp\RibbonApp.sln.

< previous | next >

Contents