The Collapse Button

The CollapsiblePanel control is divided into two pieces (not including the classes for designtime support):

• The CollapsiblePanel derives from the base Panel class, and adds the custom drawing code and the collapsing logic.

• The CollapseButton represents the header of the panel, including the title and the arrow button shown in the top-left corner, which you can use to collapse and expand the panel.

Both of these controls draw their interfaces from scratch using the VisualStyleRenderer class, which means they are supported only in Windows XP. If you need to use this control with other types of clients, you'll need to extend the drawing logic to check for visual style support and gracefully downgrade.

The code for the button consists of a fair bit of painting logic. It adjusts the rendering depending on whether the mouse is hovering over the button, has just clicked it, and so on. Although this code is fairly lengthy (because of the range of possible states), the actual drawing process is straightforward because it's all built into the VisualStyleRenderer. For example, here's the code needed to paint a button if it's been pressed:

renderer = new VisualStyleRenderer( VisualStyleElement.ExplorerBar.NormalGroupCollapse.Pressed);

Of course, the button does double duty as an expand button, as well. Note the slightly different VisualStyleElement you need to use to draw the "down" arrow button (rather than the "up" arrow button) if the panel is collapsed:

renderer = new VisualStyleRenderer( VisualStyleElement.ExplorerBar.NormalGroupExpand.Pressed);

There's also a fair bit of basic boilerplate code for handling mouse movements and mouse clicks, updating the state appropriately, and raising the related events. Most of this logic is standard for any button control. You can see the full code with the online content. For a walkthrough of how to create a custom button, see Chapter 23.

+2 0

Post a comment