Control for drawing a bevelline (2)


The CSeparator class is an enhancement to standard static text controls
that duplicates the look of the Office 97 products’ options screens,
like Word (pictured).

 [Word 97 options - 13K]

This separator element is a nice alternative when you want to avoid
really big or nested group boxes, or just look like you’re keeping
up with Microsoft’s ever-changing UI designs. 😉

This class is an extension to Hans Buehler’s article
"Control for drawing a bevel line."
One of the enhancements he mentioned was adding
text to horizontal lines, so that’s what I’ve done!

CSeparator was written with MSVC 5.0. The code will work in Unicode apps,
and should compile fine with 6.0 as well.


When laying out a vertical separator, make the static control as tall
as you want the line to be. The line will be drawn horizontally
centered in the control, so it’s a good idea to make the control
the minimum width of 8 DLUs so you can judge where the line
will appear. Vertical separators do not display text.

When laying out horizontal separators, place your static controls as
usual, but make them as wide as you want the horizontal line to be. You
can also set the alignment of the text (left, center, or right),
and set the No Prefix style if you want. Those are the only static
control styles supported at this time. If you do not set the No Prefix
style, then you can use a shortcut key (i.e., put a & before a
letter) just as with normal static text controls.

A sample dialog is pictured below, first in the resource editor, and
then with the separators in action.

 [Dlg in MSVC resource editor - 14K]
 [Dlg with separators drawn - 17K]

Each static control that will be used as a separator should have a
real unique ID (not IDC_STATIC). Using ClassWizard, create member
variables of type CStatic for each separator, and then go to the
ClassWizard-generated code and change the type of the variables to
CSeparator. That’s it!

Future Enhancements

I tried for a little while to get vertically-drawn text, but it
was pretty tricky to get the text aligned correctly over the
line. Drawing the text rotated is no problem (as long as you
select a TrueType font into the DC!) but the horizontal position
of the text depends on the length of the text. The CSeparator
class has some code to draw text vertically, although it is
commented out since it doesn’t work exactly right. It’s just
there as a starting point for anyone brave enough to take on
the challenge. See the OnPaint() function for the code snippet
and some comments.

Download demo project – 14KB

More by Author

Must Read