Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / multimedia / GDI+

SplitButton: an XP style dropdown split button

4.73/5 (41 votes)
25 Oct 2006CPOL2 min read 1   11.5K  
The SplitButton control represents a dropdown split button in standard theme-supported XP style.

Demo

Demo

Introduction

Yesterday, I was thinking the best way to solve a particular situation (specific actions derived logically from one) was a split button. Searching and searching on MSDN produced no results, so I was perplexed: no split button in .NET? No, there isn't. The strange thing is that a StripSplitButton (or something like that) exists, that is, the split button equivalent for the ToolStrip. Probably, not being a standard control for the system, they though not to include the control, because it was easy to simulate its functionality with images, and that's what I did.

Using the code

The control is very easy to use. Anyway, this is the step-by-step how-to-do:

  1. Include SplitButton.cs and SplitButton.designer.cs in your project.
  2. Load the assembly in the toolbox of Visual Studio, or just insert a Button control in your form, and then change the type from Button to SplitButton.

    [Updated: Oct '06] You can stop here, default images for split states will be used by the control, or you can follow next steps to customize split images.

    Optional:

  3. Add an ImageList to your form (or control or whatever) and set the ImageList property of the SplitButton to this ImageList.
  4. Add images you want to the ImageList for the SplitButton splitter side statuses: Normal, Hover, Clicked, Disabled, Focused.
  5. Now, have a look at the property windows for the SplitButton, go to "Split Button Images" category, and simply select an image for each status from the list box of images (the ones in the ImageList of the SplitButton).
  6. Now, you can set some suggested options: TextAlign to MiddleLeft, ImageAlign to MiddleRight, and TextImageRelation to TextBeforeImage. You're done.

Now you can set some custom options for the SplitButton, a brief description follows:

  • bool DoubleClickedEnabled - Indicates whether the double click event is raised on the SplitButton.
  • bool AlwaysDropDown - Indicates whether the SplitButton always shows the drop down menu even if the button part is clicked.
  • bool AlwaysHoverChange - Indicates whether the SplitButton always shows the hover image status in the split part even if the button part is hovered.
  • bool CalculateSplitRect - Indicates whether the split rectangle must be calculated (based on the split image size).
  • bool FillSplitHeight - Indicates whether the split height must be filled to the button height even if the split image height is lower.
  • int SplitHeight - The split height (ignored if CalculateSplitRect is set to true).
  • int SplitWidth - The split width (ignored if CalculateSplitRect is set to true).

In addition to this, there are two events:

  • ButtonClick - Occurs when the button part of the SplitButton is clicked.
  • ButtonDoubleClick - Occurs when the button part of the SplitButton is double-clicked.

Conclusion

It's only a simple control, I know, but it could be useful in my opinion.

So, that's all, I think. I hope you'll find it useful, bye!

License

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