Click here to Skip to main content
15,885,309 members
Articles / Multimedia / GDI+
Article

SplitButton: an XP style dropdown split button

Rate me:
Please Sign up or sign in to vote.
4.73/5 (41 votes)
25 Oct 2006CPOL2 min read 293.9K   11.5K   166   38
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)


Written By
Synved Ltd.
Ireland Ireland

Comments and Discussions

 
Questioncontrol doesn't dispose created Image objects Pin
PovilasPanavas18-Apr-12 1:21
PovilasPanavas18-Apr-12 1:21 
GeneralMy vote of 5 Pin
Member 396389914-Jan-12 14:43
Member 396389914-Jan-12 14:43 
QuestionAbout that arrow glyph... Pin
T800G25-Dec-10 12:05
T800G25-Dec-10 12:05 
AnswerRe: About that arrow glyph... Pin
Elia Sarti28-Dec-10 3:24
Elia Sarti28-Dec-10 3:24 
GeneralMy vote of 5 Pin
version2_128-Aug-10 3:42
version2_128-Aug-10 3:42 
GeneralFound a bug Pin
keegean23-Feb-10 2:45
keegean23-Feb-10 2:45 
GeneralGreak Work Pin
Hui99827-Dec-09 19:54
Hui99827-Dec-09 19:54 
QuestionHow should i do to get this dropdown fuction to the web style dropdownlist 's effect? Pin
tanglbin18-Nov-09 19:06
tanglbin18-Nov-09 19:06 
GeneralGreat work. Pin
Nate Shoffner23-Jul-09 15:44
Nate Shoffner23-Jul-09 15:44 
GeneralThank you ! Pin
JackChen198719-Jul-07 15:51
JackChen198719-Jul-07 15:51 
GeneralRe: Thank you ! Pin
dubbele onzin9-Nov-07 8:52
dubbele onzin9-Nov-07 8:52 
QuestionEvent to handle a subitem being clicked? Pin
CdnProgrammer19-Jul-07 4:08
CdnProgrammer19-Jul-07 4:08 
AnswerRe: Event to handle a subitem being clicked? Pin
Elia Sarti19-Jul-07 5:31
Elia Sarti19-Jul-07 5:31 
NewsSlightly more professional SplitButton [modified] Pin
veritas guy24-Jun-07 15:43
veritas guy24-Jun-07 15:43 
GeneralRe: Slightly more professional SplitButton Pin
Elia Sarti25-Jun-07 3:53
Elia Sarti25-Jun-07 3:53 
GeneralRe: Slightly more professional SplitButton Pin
veritas guy25-Jun-07 4:37
veritas guy25-Jun-07 4:37 
GeneralRe: Slightly more professional SplitButton Pin
Elia Sarti25-Jun-07 6:38
Elia Sarti25-Jun-07 6:38 
GeneralRe: Slightly more professional SplitButton Pin
CdnProgrammer18-Jul-07 11:37
CdnProgrammer18-Jul-07 11:37 
GeneralPrevent right-click context menu Pin
AutoDeveloper31-Oct-06 3:49
AutoDeveloper31-Oct-06 3:49 
GeneralRe: Prevent right-click context menu [modified] Pin
Elia Sarti31-Oct-06 6:26
Elia Sarti31-Oct-06 6:26 
GeneralBackground image stays enabled Pin
golan.barnov21-Oct-06 4:44
golan.barnov21-Oct-06 4:44 
GeneralRe: Background image stays enabled Pin
Elia Sarti21-Oct-06 5:17
Elia Sarti21-Oct-06 5:17 
GeneralRe: Background image stays enabled Pin
golan.barnov21-Oct-06 5:38
golan.barnov21-Oct-06 5:38 
GeneralRe: Background image stays enabled Pin
Elia Sarti21-Oct-06 13:57
Elia Sarti21-Oct-06 13:57 
GeneralRe: Background image stays enabled Pin
Elia Sarti21-Oct-06 14:07
Elia Sarti21-Oct-06 14:07 

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.