Ribbon Backstage View - Walkthrough

"Backstage View" was introduced in Microsoft Office 2010 and replaced Application Menu.  The Application menu appeared when users clicked on Application Button and displayed controls used to perform actions on the entire document, like Save, Print and Send.
In Microsoft Office 2010 the Application Button appears like a colored Tab located at the beginning of tab array.

Backstage View appears when users click on the Application Button. It covers the entire client area of application main window and Ribbon Control becomes minimized. Backstage View is resized along with the main application window.

Backstage View consists of two parts. At the left side you can see a list of commands like Save, Open, Close and View entries. A View entry opens a corresponding child dialog or property sheet, which is displayed at the right side (a View area).

You can perform the following steps in order to enable Backstage View in your application. The guidelines below assume that Ribbon Control is defined as m_wndRibbonBar, text displayed on Application Button is "File" and an image list with images for commands and view entries has a resource ID IDB_FILESMALL. The image indexes mentioned below assume that you've the following image list:

1. Generate a Ribbon-based application using Application Wizard, or take an existing Ribbon-based application.

2. Enable Backstage View for your application. You can do that for certain Visual Managers, based on any other conditions or for all cases. The best place for that is OnAppLook handler, where you can call m_wndRibbonBar.SetBackstageMode (bCondition);

3. You can set color of Application Button using the following code:
   
   COLORREF clr = RGB(0, 0, 192);
   CBCGPVisualManager::GetInstance()->SetMainButtonColor (clr);
   
   If you develop a suite, you can make each application look differently and be recognized by Application Button color.

4. Find a place where you initialize Application Menu (main category).

5. If you wish to replace Application Menu with Backstage View, remove all initialization code for Application Button/Application Menu.

6. If you wish to display Backstage View only for certain Visual Managers (or based on other conditions), add Backstage View initialization right after initialization of Main Category (Application Menu).

7. Add a Backstage View to the Ribbon Bar:
   
   CBCGPRibbonBackstageViewPanel* pBackstagePanel = m_wndRibbonBar.AddBackstageCategory(_T("File"), IDB_RIBBON_FILESMALL);
   
   This method returns a pointer to CBCGPRibbonBackstageViewPanel, which represents Backstage View and should be used for subsequent calls, which will add commands and view entries.

8. Use the pointer obtained in step 7 to add commands as following:
   
   pBackstagePanel->AddCommand (ID_FILE_SAVE, _T("Save"), 2 /* Image index */);
   pBackstagePanel->AddCommand (ID_FILE_SAVE_AS, _T("Save As"), 3 /* Image index */);
   pBackstagePanel->AddCommand (ID_FILE_NEW, _T("New"), 0 /* Image index */);
   pBackstagePanel->AddCommand (ID_FILE_OPEN, _T("Open"), 1 /* Image index */);
   pBackstagePanel->AddCommand (ID_FILE_CLOSE, _T("Close"), 4 /* Image index */);
   
   When step 6 has been completed, your Backstage View is initialized with 5 commands - Save, Save As, New, Open and Close, which also display images from IDB_FILESMALL image list, located at indexes 2, 3, 0, 1 and 4.

9. Now you can compile your application, open Backstage View and see five commands at the left side:
   

10. Let's add a view based on a child dialog, which will display MRU file list.

11. In Resource Editor add a new dialog resource with IDD_FORM_RECENTFILES ID.

12. Open dialog's properties and set Style - Child, Border - None, Clip siblings - checked, Clip children - checked.

13. Place three controls on this dialog - a static with text "Recent Files" and a list box centered on the dialog's client area and a separator between them. Assign IDC_RECENT_FILES ID to list box, IDC_INFO_LABEL1 to static text and IDC_SEPARATOR_1 to separator:
    
    

14. Derive a class from CBCGPDialog and name it CBackStagePageRecentFiles.

15. Substitute the standard list box with CBCGPRecentFilesListBox as following:

    • Define a dialog's member CBCGPRecentFilesListBox m_wndRecentFiles;

    • In CBackStagePageRecentFiles::DoDataExchange add DDX_Control macro:
      DDX_Control(pDX, IDC_RECENT_FILES, m_wndRecentFiles);

16. Use auto resize feature to make all controls on this dialog properly aligned when the parent Backstage View is resized. For this purpose add the following code to OnInitDialog:
    
    CBCGPStaticLayout* pLayout = (CBCGPStaticLayout*)GetLayout();
    
    pLayout->AddAnchor(IDC_INFO_LABEL1, CBCGPStaticLayout::e_MoveTypeNone, CBCGPStaticLayout::e_SizeTypeHorz);
    pLayout->AddAnchor(IDC_SEPARATOR_1, CBCGPStaticLayout::e_MoveTypeNone, CBCGPStaticLayout::e_SizeTypeHorz);
    pLayout->AddAnchor(IDC_RECENT_FILES, CBCGPStaticLayout::e_MoveTypeNone, CBCGPStaticLayout::e_SizeTypeBoth);
    
    This code means that static text control is not moved, but resized horizontally only, separator control is not moved, but resized horizontally only, list box control is not moved and resized vertically and horizontally.

17. Now we can return to our initialization code and add a new view entry named "Recent":
    
    CBCGPRibbonBackstageViewItemForm* pFormRecent = new CBCGPRibbonBackstageViewItemForm (IDD_FORM_RECENTFILES, RUNTIME_CLASS(CBackStagePageRecentFiles));
    
    pBackstagePanel->AddView (0, _T("Recent"), pFormRecent);

18. It's possible to display a watermark image at the right bottom corner of active View (active dialog). For this purpose add a new bitmap to resources and assign it ID IDB_BS_WATERMARK. Now for each CBCGPRibbonBackstageViewItemForm or CBCGPRibbonBackstageViewItemPropertySheet object you can set a watermark image by calling SetWaterMarkImage.

19. Set the added watermark image to the "Recent" view:
    
    pFormRecent->SetWaterMarkImage(IDB_BS_WATERMARK, RGB(0, 0, 192));
    
    The last parameter can be a color corresponding to the color of Application Button we set on step 3.

20. Let's add the last command "Exit":
    
    pBackstagePanel->AddCommand (ID_APP_EXIT, _T("Exit"), 5 /* Image index */);

21. Now you can compile and run the application and see Backstage View with 6 entries at the left side: Save, Save As, Open, Close, Recent, Exit, where 5 entries are commands and one - view ("Recent"). When you click a command, Back Stage view is closed and the clicked command is executed. When you select a view entry ("Recent"), a corresponding dialog with MRU File List is displayed at the right side of Backstage View:
    
    

 
Back to the Developers Area