Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / MFC
Article

A useful set of separators

Rate me:
Please Sign up or sign in to vote.
4.89/5 (32 votes)
15 Dec 2003CPOL4 min read 119.1K   3.2K   84   35
Some dialog boxes separators that replace group boxes

Sample Image - Separators.gif

Introduction

This set of classes is a set of item separators to be used in a dialog box. They look like what is used in the options of Office 2000/XP for instance with additional features. The set include four controls:

  • CSeparator: simple control that just draws a bevelled line
  • CStaticSeparator: static text with a bevelled line on its right
  • CCheckBoxSeparator: checkbox with a bevelled line on its right that can automatically enable/disable a set of controls
  • CSectionSeparator: static text with a bevelled line on its right that can automatically hide/show a set of controls.

In the above picture the controls appear in the following order: CStaticSeparator, CCheckBoxSeparator, CSectionSeparator and CSeparator. In the second screenshot the CCheckBoxSeparator has been clicked (enabling the About... button) and the CSectionSeparator has been collapsed.

Usage

To use these controls it's really simple: simply draw them in the dialog editor and assign a value to them using the class that you want. Do not forget to size your controls properly: the line will extend to the right edge of the control.

In the dialog editor use a static for CSeparator, CStaticSeparator and CSectionSeparator. Use a checkbox for CCheckBoxSeparator.

CSeparator and CStaticSeparator do not require any more steps. CCheckBoxSeparator and

CSectionSeparator 
needs to be setup to know on which controls they should perform their action.

The simplest method is to use SetNextSectionId(int id) which is available in both classes. Pass as the parameter the ID of the control that defines the begining of the next section. All the controls between the separator itself and the ID passed will be under control of the separator. If your separator is the last section of the dialog then pass -1 and all the controls under the separator will be affected.

This has to be done in the InitDialog of your dialog. For the CCheckBoxSeparator do not forget to call UpdateControlledDlgItems() so that the items will be properly disabled/enabled depending on the state of the checkbox. For CSectionSeparator you can call Collapse() on it if you want it to appear initially collapsed.

The implementation is pretty simple so I won't talk long about it except for two points. Here they are.

The drawing

A short word on how the bevelled line is drawn. Thanks to David Y. Zhao and his XP Visual Style support files [^], we are able to draw a bevelled line supporting the XP theme under Windows XP. We just open the theme data and tell the theme data to draw itself in our DC. If the application is not themed then we use standard CDC calls to draw the line and the bevel.

As MSDN states, a good control should handle WM_PRINT and WM_PRINTCLIENT properly. So that's I did and

OnPaint 
just calls the Print handler. Moreover we need this to be properly implemented for a flicker free drawing during animation (see below).

The (un)collapsing animation

The animation done when a CSectionSeparator is (un)collapsed was probably the most tricky part. I wanted a smooth flicker free animation and it was more difficult than I thought.

First thing was to use BeginDeferWindowPos/DeferWindowPos/EndDeferWindowPos to avoid moving each control one after the other. Using these functions (available in the Win32 API) we group the controls we want to move and Windows handles the operation all at once in the EndDeferWindowPos. As we resize the window during the animation, we tell the EndDeferWindowPos not to redraw the controls and we tell them to redraw the entire window when we resize it.

To remove flickering, I used the double buffer trick: tell all the controls to draw themselves in a memory DC (using WM_PRINT message) and then BitBlt the memory DC into the dialog's DC. I wanted to remove the repaint flag on the parent when resizing it as I was redrawing the entire window but when I did that then the underlying windows were NOT updated anymore. So I had to keep it. The dialog is kind of drawn twice but it seems not to be an issue.

Finally as we want a constant time animation we just time it properly. If we are ahead of time the we just wait a bit (with a PumpMessage like loop to avoid the application to freeze and to let the underlying windows repaint themselves). If we are late then we advance the frame counter in order to skip the frames we missed.

For timing I use the performance counters for a precise measuring. More info on performance counters can be found here [^].

Settings

You can tweak the animation by changing the constants defined at the top of SectionSeparator.cpp. You can change the number of frames per second and the length of the animation. Use 0 to run it as fast as it can. Use -1 to use no animation and have an instant collapse/uncollapse effect.

Conclusion

I think I covered everything I wanted. Hope you will like those separators and use them in you next app! Sorry I do not have Visual Studio 6.0 installed anymore, so I can't provide a dsw/dsp for the demo project. Still the release binary is included so you can still take a look.

History

  • Updated Dec 16 2003 - Added support for XP themed property pages

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
France France
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generaldownload not working Pin
maros27-Dec-07 8:19
maros27-Dec-07 8:19 
GeneralRe: download not working Pin
Nicolas Bonamy30-Dec-07 9:25
Nicolas Bonamy30-Dec-07 9:25 
GeneralThe control can't collapse or uncollapse in the FormView. Pin
GE - NBGYF27-Oct-05 20:05
GE - NBGYF27-Oct-05 20:05 
Generalspark , thanslot Pin
pureman1-Mar-04 20:32
pureman1-Mar-04 20:32 
GeneralRuntime Error in VC++ 6.0 Pin
Golden Lee11-Jan-04 21:19
Golden Lee11-Jan-04 21:19 
GeneralTwo ways to solve problem. Pin
X-Type24-Feb-07 14:34
X-Type24-Feb-07 14:34 
GeneralYou said it was for VC++ 6. Pin
WREY18-Dec-03 14:04
WREY18-Dec-03 14:04 
GeneralRe: You said it was for VC++ 6. Pin
Nicolas Bonamy18-Dec-03 21:20
Nicolas Bonamy18-Dec-03 21:20 
General:) Checkbox Separator Pin
ajhuddy16-Dec-03 11:58
ajhuddy16-Dec-03 11:58 
GeneralHorizontal SectionSeparator Pin
Member 6174721-Nov-03 1:39
Member 6174721-Nov-03 1:39 
GeneralRe: Horizontal SectionSeparator Pin
Nicolas Bonamy13-Dec-03 8:57
Nicolas Bonamy13-Dec-03 8:57 
GeneralProblem in XP with tabs Pin
David Pritchard4-Nov-03 7:43
David Pritchard4-Nov-03 7:43 
GeneralRe: Problem in XP with tabs Pin
Nicolas Bonamy4-Nov-03 7:53
Nicolas Bonamy4-Nov-03 7:53 
GeneralRe: Problem in XP with tabs Pin
David Pritchard4-Nov-03 11:33
David Pritchard4-Nov-03 11:33 
GeneralRe: Problem in XP with tabs Pin
yousof21-Nov-03 3:21
yousof21-Nov-03 3:21 
GeneralRe: Problem in XP with tabs Pin
David Pritchard10-Dec-03 11:19
David Pritchard10-Dec-03 11:19 
GeneralA couple of minor corrections Pin
David Pritchard1-Nov-03 6:20
David Pritchard1-Nov-03 6:20 
GeneralVC6 Pin
Patrik Mueller8-Oct-03 2:42
Patrik Mueller8-Oct-03 2:42 
GeneralRe: VC6 Pin
Nicolas Bonamy8-Oct-03 5:16
Nicolas Bonamy8-Oct-03 5:16 
GeneralRe: VC6 Pin
Patrik Mueller8-Oct-03 19:52
Patrik Mueller8-Oct-03 19:52 
GeneralRe: VC6 Pin
Nicolas Bonamy10-Oct-03 10:59
Nicolas Bonamy10-Oct-03 10:59 
GeneralRe: VC6 Pin
Patrik Mueller10-Oct-03 21:28
Patrik Mueller10-Oct-03 21:28 
GeneralVery nice... Pin
Diarrhio2-Oct-03 13:40
Diarrhio2-Oct-03 13:40 
QuestionHow to count colors in a bitmap Pin
cdsmith2-Oct-03 9:04
cdsmith2-Oct-03 9:04 
AnswerRe: How to count colors in a bitmap Pin
John M. Drescher2-Oct-03 10:12
John M. Drescher2-Oct-03 10:12 

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

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