Click here to Skip to main content
Click here to Skip to main content

Outlookbar-style menu interface

, 22 Jul 2003
Rate this:
Please Sign up or sign in to vote.
A control bar outlook-style that integrates with the standard menu command's framework.

Outbar image

Introduction

This is a simple control that, much like the outlook side bar, docks on the left side of your main window. Basically consists in several folders, containing groups of items. Those items can be either child windows or labels connected to the standard menu command's ID.

Their appearance can be customized so to act like rows in a list box, check boxes, radio buttons, or simple links. All the actions and the status of those items is controlled by the standard MFC command handler and command update handler.

Background

I have never seen the latest outlook beside for one, small, screenshot; so I don't really know if this control resembles its properly or not.

I tried to include support for all I saw in this screenshot, but I'm sure much will still be different or wrong. It has been written for use in one of our internal applications, but .. since I found it cute, I thought maybe someone else could've been interested into it. The control also works well along with the BCG library, if you are using it, without needing any change.

Using the code

The control itself consist in 2 files, outlook2ctrl.h and .cpp. To use it in your code, start by including those 2 files in the project. Also, if you wish it to make use of the gradient drawings on the buttons, change the WINVER define in the project stdafx.h file from 0x400 to 0x500.

If WINVER is below 0x500, the graphic won't look as good. (0x500 will mean compiled for Win 2K & XP).

Include in your main frame header file the new control in this way:

#include "Outlook2Ctrl.h"

class CMainFrame : public CFrameWnd
{
    COutlook2Ctrl wndOutBar;

The outbar is derived from the standard MGC CControlBar (or from the CBCGToolBar) and docks normally on the left side of the main frame.

The CMainFrame::OnCreate is a good place to create and initialize it:

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
...

// enable dockings only on the other 3 sides
    EnableDocking(CBRS_ALIGN_TOP | CBRS_ALIGN_BOTTOM | CBRS_ALIGN_RIGHT);

    // create the control
    wndOutBar.Create(this, ID_MYOUTBAR);

    // you can add images to the items in the control by using icons 16x16
    // don't destroy them after inserting the items as the
    // control won't duplicate the handles but use them straight

    HICON hIco1 = (HICON) LoadImage(AfxGetInstanceHandle(),
              MAKEINTRESOURCE(IDI_ICON1),IMAGE_ICON,16,16,0);
    HICON hIco2 = (HICON) LoadImage(AfxGetInstanceHandle(),
              MAKEINTRESOURCE(IDI_ICON2),IMAGE_ICON,16,16,0);
    HICON hIco3 = (HICON) LoadImage(AfxGetInstanceHandle(),
              MAKEINTRESOURCE(IDI_ICON3),IMAGE_ICON,16,16,0);

    wndOutBar.AddFolderRes("Contacts", IDI_ICON1);
        wndOutBar.AddFolderItem("Categories");
            wndOutBar.AddSubItem("Friends", hIco1, 
                 COutlook2Ctrl::OCL_SELECT, ID_CATEGORIES_FRIEND);
            wndOutBar.AddSubItem("Private", hIco2, 
                 COutlook2Ctrl::OCL_SELECT, ID_CATEGORIES_PRIVATE);
            wndOutBar.AddSubItem("Work", hIco3, 
                 COutlook2Ctrl::OCL_SELECT, ID_CATEGORIES_WORK);

        wndOutBar.AddFolderItem("View Style");
            wndOutBar.AddSubItem("Grid", NULL, 
                 COutlook2Ctrl::OCL_RADIO, ID_VIEW_GRID);
            wndOutBar.AddSubItem("List", NULL, 
                 COutlook2Ctrl::OCL_RADIO, ID_VIEW_LIST);
            wndOutBar.AddSubItem("Cards", NULL, 
                 COutlook2Ctrl::OCL_RADIO, ID_VIEW_CARDS);

        wndOutBar.AddFolderItem("");
            wndOutBar.AddSubItem("Name", 
                 NULL, COutlook2Ctrl::OCL_CHECK, ID_FIELDS_NAME);
            wndOutBar.AddSubItem("Phone", 
                 NULL, COutlook2Ctrl::OCL_CHECK, ID_FIELDS_PHONE);
            wndOutBar.AddSubItem("Address", 
                 NULL, COutlook2Ctrl::OCL_CHECK, ID_FIELDS_ADDRESS);

        wndOutBar.AddFolderItem("");
            wndOutBar.AddSubItem("Create new contact ..", 
                 NULL, COutlook2Ctrl::OCL_COMMAND, ID_TEST_CREATENEWCONTACT);
            wndOutBar.AddSubItem("Import contacts ..", 
                 NULL, COutlook2Ctrl::OCL_COMMAND, ID_TEST_IMPORTCONTACT);

In this code, we do a simple window creating and we then insert a few items. The control stores the data in a tree-like way. The base of the tree is made by Folders items (like the Contact, Find, etc buttons you can see in the image). The Folders contain Items - which are sort of groups; and they contain Subitems that are what actually doing the job. So you insert a Folder, an Item, and assign Subitems to that.

The Subitems are handled as if they were items of a menu. They are checked/unchecked by using the standard CCmdUI's system. Selecting them will cause a menu command to be generated, if appropriate. So it's basically a permanent popup menu with a new graphical style, where Folders are popups items, Subitems are the menu items, and Items are description labels.

wndOutBar.AddFolderRes("Contacts", IDI_ICON1);
    wndOutBar.AddFolderItem("Categories");
        wndOutBar.AddSubItem("Friends", 
            hIco1, COutlook2Ctrl::OCL_SELECT, ID_CATEGORIES_FRIEND);

This part adds first a folder, named Contact, with icon IDI_ICON1 as graphic. It then adds a label named Categories to the folder, and adds a menu command named Friends that will trigger a menu command ID_CATEGORIES_FRIEND when clicked. The subitem will have a small item on the side (with handle hIco1) and will be of type OCL_SELECT.

The "types" available are the following:

  • COutlook2Ctrl::OCL_SELECT : the subitem will appear as a selected listbox item when the OnCmdUI of the commandID returns Checked
  • COutlook2Ctrl::OCL_RADIO : the subitem will appear as a radio button; status will be determined by the checked/unchecked of the associated commandID; no command will be sent when user clicks on an already selected item
  • COutlook2Ctrl::OCL_COMMAND : the subitem will appear as a normal hot-tracked link. The commandID command will be sent whenever user clicks on it, unless the OnCmdUI returns not enabled
  • COutlook2Ctrl::OCL_CHECK : the subitem will appear as a check box; status will be determined by the checked/unchecked of the associated commandID; no command will be sent when user clicks on an already selected item
  • COutlook2Ctrl::OCL_HWND : this value is settled automatically when using the following function:
    int AddSubItem(HWND hChildWindow, 
           bool bStretchTheChild, int FolderId, int ItemId)

    Takes in the child window to insert, a stretch option value and the folder and item ID. The child window has to be already created when inserted. It has to have as parent, the outbar control, and the WS_CHILD flag. If the stretch variable isn't settled, the child will retain the value it had at creation; otherwise, the height of the child window will be enlarged to fit all the area from insertion to the bottom of control. The child window will anyway always be stretched to cover all the width of the outbar control. The FolderID and ItemID variables in all the insertion functions by default will be settled to -1, and thus referring to the "last" parent inserted.

The other functions for inserting items are the following:

int AddFolder(const char * FolderName, 
         HICON ImageofFolder or int ResourceIdofFolderIcon);
int AddFolderItem(const char * ItemName, int FolderID = -1)
int AddSubItem(const char * SubItemLabel, 
         HICON ImageofFolder or int ResourceIdofFolderIcon, 
         DWORD style, DWORD commandID, int FolderId, int ItemId)

The const char * parameters are the labels of the items/folders/subitem. The HICON handles or IDs are used for the images linked to the folders/ subitems. Note that some kind of subitems can't have an icon linked to them (checkbox and radio box style). Those functions all return the index of the inserted element. You can use it for inserting other elements into the same folder, or just leave them to the default -1 to add them to the last one.

When a subitem will be selected, you will receive a normal menu command.

Points of interest

The control has been tested just under Windows 2000 and XP. It should work even under earlier versions of Windows, but some resource memory leak may be possible. It has nothing really amazing in it, but is simple to use and cute to watch (I hope!). Enjoy it then!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Dheth
Web Developer
Italy Italy
No Biography provided

Comments and Discussions

 
QuestionHow can the right part of the UI be used? PinmemberDudi Daabul17-Nov-13 22:07 
QuestionHow can disable a subitem where i use COutlook2Ctrl::OCL_SELECT? PinmemberLe@rner20-Jul-10 22:12 
QuestionHow can put here Infotip or Tooltip for Items and Subitems? PinmemberLe@rner7-Jul-10 23:43 
QuestionHow to show outlookbar from left of view? Pinmembervahid_m_200810-Sep-08 3:11 
QuestionHow to add Scroll buttons in this outlookbar control? PinmemberSathish.K9-Sep-08 20:29 
Questionhow can I add a Cformview to the control? Pinmemberiaia7618-Jul-08 5:01 
GeneralCheck Item selected Pinmemberumbix9-Feb-07 4:56 
Questionput dialog control on the outlook bar? Pinmemberandrewxiang4-Dec-06 5:51 
QuestionHelp me!!! Pinmemberdssdsdfsdfsdfs8-Nov-06 5:06 
GeneralSmall fix PinmemberIce_2k9-Oct-06 2:34 
Questionchange text function Pinmemberbartek121223-Apr-06 6:11 
is there any posibillity to make some function for changing text on existing pane. This can be needed fot translate app.
Or maybe such function already exists Confused | :confused:
GeneralDialog Box PinmemberAngelo Santangelo2-Oct-05 3:44 
Questionstill can't get gradiants to work Pinmembersbt16-Sep-05 14:17 
QuestionNice, but how to add something to the right pane of the view? Pinmemberunivega_r30428-Jul-05 5:38 
GeneralExcellent Code Pinmemberdavid connell7-Jul-05 10:07 
GeneralOutstanding! Better make it a control. PinmemberFrank W. Wu12-Nov-04 9:48 
GeneralRe: Outstanding! Better make it a control. PinmemberDheht14-Nov-04 8:06 
GeneralExample with SDI or MDI Pinmemberburrifro7929-Aug-04 11:01 
GeneralVC++ 6.0 compilation error Pinmembermavrick2329-Jul-04 0:58 
GeneralRe: VC++ 6.0 compilation error Pinmemberstpetrus24-Mar-05 15:06 
Generalfor c#... Pinmember-Sampa-15-Jun-04 7:18 
GeneralUsing this super tool Pinsussgremyus11-Feb-04 10:26 
GeneralProblems with disabled commands Pinmemberldaoust4-Jan-04 11:35 
GeneralSuggestion Pinmemberldaoust3-Jan-04 9:06 
QuestionHow can i use this bar in Dialog based application PinmemberIrfan Ahmed Khan19-Dec-03 18:50 
GeneralIMPORTANT VC++ 6.0 PinmemberLOSTTWARE.com7-Nov-03 21:52 
GeneralHelp Please PinmemberLOSTTWARE.com29-Oct-03 22:05 
GeneralRe: Help Please PinmemberAndré Bergano20-Jan-05 6:46 
QuestionHow to hide COutlook2Ctrl window? Pinmembernetcfan12-Oct-03 19:02 
AnswerRe: How to hide COutlook2Ctrl window? Pinsussksk18-Dec-03 22:51 
GeneralRe: How to hide COutlook2Ctrl window? Pinsussksk18-Dec-03 22:53 
GeneralVertical scrollbar Pinmemberkc.21-Sep-03 19:50 
QuestionHow are the buttons different from regular push buttons Pinmemberkzseattle4-Sep-03 14:53 
AnswerRe: How are the buttons different from regular push buttons PinmemberDheht4-Sep-03 23:35 
GeneralThis is beautiful! Pinmemberkzseattle4-Sep-03 14:05 
GeneralRe: This is beautiful! PinmemberDheht4-Sep-03 23:29 
Generalchanging folders at runtime Pinmemberkc.8-Aug-03 3:10 
QuestionNo scroll up and scroll down buttons? Pinmemberlqhao30-Jul-03 15:28 
Generalupdate in checkbox Pinmemberpires2629-Jul-03 6:21 
GeneralRe: update in checkbox PinmemberDheth30-Jul-03 3:33 
Generaluser dialog wrong CFrameWnd* pParentFrame = GetParentFrame (); Pinmembernetcfan29-Jul-03 6:05 
GeneralRe: user dialog wrong CFrameWnd* pParentFrame = GetParentFrame (); PinmemberDheth30-Jul-03 3:31 
GeneralRe: user dialog wrong CFrameWnd* pParentFrame = GetParentFrame (); Pinmembernetcfan31-Jul-03 4:45 
GeneralBad view of focused item PinmemberKen Keray28-Jul-03 12:52 
GeneralRe: Bad view of focused item PinmemberDheth30-Jul-03 3:40 
QuestionAny chance getting a VC++ 6.0 version of this? PinmemberWREY24-Jul-03 3:46 
AnswerRe: Any chance getting a VC++ 6.0 version of this? PinmemberDheht25-Jul-03 8:12 
GeneralRe: Any chance getting a VC++ 6.0 version of this? PinmemberTony Cooke1-Mar-04 19:50 
GeneralRe: Any chance getting a VC++ 6.0 version of this? Pinmemberpige11-Jun-04 5:04 
AnswerRe: Any chance getting a VC++ 6.0 version of this? Pinmemberlqhao28-Jul-03 23:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 23 Jul 2003
Article Copyright 2003 by Dheth
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid