Credit and Acknowledgments
First of all I would like to credit the Original Author Iuri Apollonio on the fantastic control that he has developed using MFC. His code has been used to port the control to WTL with a few WTL tweaks and fixes. The original article can be found at
The Outlook caption bar is based on the Window Caption Bar written by Maxime Labelle, the original article can be found at http://www.codeproject.com/useritems/captionbarctrl.asp
The Flatbutton on the caption bar is based on Davide Calabro's excellent CButtonST
class, that has been ported to WTL. The Flatbutton class has been extended to include functionality to get the outlook flatbutton style.
Overview
- I needed a Outlook bar to use in a ATL/WTL project, my attention turned to Iuri Apollonio Outlook bar Control that was MFC based and this article basically ports the original
CGfxOutBarCtrl
. Three ATL files contain the port.
- atloutbarctrl.h (Contains the main
COutBarCtrl
Class for WTL)
- atlgroupedit.h (Contains the
CGroupEdit
class for WTL and used by the COutBarCtrl
Class)
- atloutbarsplit.h (Contains the
COutlookSplitterWindow
class for WTL and used by the COutBarCtrl
Class)
The caption bar can be found in
- atlcaptionbar.h (Contains the main
CCaptionBar
)
The flatbutton class can be found in
- atlflatbutton.h (Contains the main
CButtonST
class)
The COutlookSplitterWindow
bar is inherited from the WTL CSplitterWindow
class, additional functionality had to be added to make the left pane aligned (i.e. left pane does not move width wise when the app is resized). This functionality strangely exist in the base class for a right pane. Further tweks had to be added to make it act like a outlook splitter. The original CGfxSplitterWindow
has not been ported as MFC and WTL splitter classes vary.
Requirements
You will require the WTL Libraries, these can be downloaded from the microsoft site, there are various articles on the net that tell you how to do this, so I won't bore you with the details.
Note - This control uses the WTL CString
class and the STL std::list
template class.
How to use the control in your WTL App
- Make sure you have the following ATL files included in your stdafx.h
- atlwin.h
- atlctrls.h
- atlmisc.h
atlmisc.h is required as it has the definition for the WTL CString
Class
- Add the header file atloutbarctrl.h and atloutbarsplit.h to the Main frame class and declare an instance of the Outlook bar control, Outlook Bar Splitter objects and the Image Lists that are to be used in the outlook bar.
COutBarCtrl wndBar;
CImageList imaLarge, imaSmall;
COutlookSplitterWindow m_splitter
- Create the outlook splitter class e.g.
m_hWndClient = m_splitter.Create(m_hWnd, rect, NULL,
WS_CHILD | WS_VISIBLE);
- Create the outlook bar control and set the image lists on the
OnCreate
function in the Main Frame class e.g. DWORD dwf = COutBarCtrl::fDragItems|COutBarCtrl::fEditGroups|
COutBarCtrl::fEditItems|COutBarCtrl::fRemoveGroups|
COutBarCtrl::fRemoveItems|COutBarCtrl::fAddGroups|
COutBarCtrl::fAnimation;
if (!wndBar.Create(WS_CHILD|WS_VISIBLE, CRect(0,0,0,0),
m_splitter.m_hWnd, 1234, dwf))
{
DWORD word = GetLastError();
return 0;
}
wndBar.SetOwner(m_hWnd);
imaLarge.Create(IDB_IMAGELIST, 32, 0, RGB(128,128,128));
imaSmall.Create(IDB_SMALL_IMAGELIST, 16, 0, RGB(0,128,128));
wndBar.SetImageList(&imaLarge, COutBarCtrl::fLargeIcon);
wndBar.SetImageList(&imaSmall, COutBarCtrl::fSmallIcon);
wndBar.SetAnimationTickCount(20);
wndBar.SetAnimSelHighlight(200);
wndBar.AddFolder("Folder 1", 0);
wndBar.AddFolder("Folder 2", 1);
wndBar.AddFolder("Folder 3", 2);
wndBar.InsertItem(0, 0, "Item 1", 0, 0);
wndBar.InsertItem(0, 1, "Item 2", 1, 0);
wndBar.InsertItem(0, 2, "Item 3", 2, 0);
- You need to set a few of the splitter methods for it to act like a outlook splitter.
m_splitter.m_bFullDrag = false;
m_splitter.SetSplitterExtendedStyle(SPLIT_LEFTALIGNED);
m_splitter.SetSplitterPanes(wndBar, m_list);
m_splitter.SetSplitterPos(120);
- To receive Events on when the tab has been selected add the Macro to the message Map.
MESSAGE_HANDLER(WM_OUTBAR_NOTIFY, OnOutbarNotify)
On the onNotify
handler, trap the Events.
LRESULT OnOutbarNotify(UINT , WPARAM wParam,
LPARAM lParam, BOOL& )
{
switch (wParam)
{
case NM_OB_ITEMCLICK:
{
int index = (int) lParam;
CString cs, cs1;
cs1 = wndBar.GetItemText(index);
cs.Format("Clicked on %d - <%s>", (int)lParam, cs1);
MessageBox(cs, "Outlook Bar", MB_OK);
}
return 0;
case NM_OB_ONLABELENDEDIT:
{
OUTBAR_INFO * pOI = (OUTBAR_INFO *) lParam;
}
return 1;
case NM_OB_ONGROUPENDEDIT:
{
OUTBAR_INFO * pOI = (OUTBAR_INFO *) lParam;
}
return 1;
case NM_OB_DRAGITEM:
{
OUTBAR_INFO * pOI = (OUTBAR_INFO *) lParam;
}
return 1;
}
return 0;
}
The Demo App shows how to use the control in full.
Updates
- v1.00 - Initial Port
- v1.01 - Added Outlook Caption Bar to demo app also shows how to use nested vertical and horizontal splitter bar to get outlook feel. Fixed potential painting problem in outlook control when resizing the application.
- v1.02 - Extended the Outlook framework, by adding the flat button on the caption bar. Also uses panes to lock and unlock the floating tree window.