A useful set of separators

• Download source files - 31.3 Kb
• Download demo project - 148 Kb

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