Click here to Skip to main content
Click here to Skip to main content

A Fully Characterized SplitButton

, 25 Dec 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
A SplitButton with its button part has all the characteristics that a Button has.

Introduction

Elia Sarti summarized in his article SplitButton: an XP style dropdown split button [^] that we may encounter a particular situation that specific actions derived logically from one. There is a equivalent(ToolStripDropDownButton) for ToolStrip in .NET.

Actually there is another situation that specific options logically because of one action makes us ask a SplitButton for help. That's why ToolStripSplitButton exists. But we cannot resolve these kind of situations only by ToolStrip. A SplitButton with its button part has all the characteristics of a Button is very useful.

Maybe, you do not clearly understand the two kinds of situations. I will give each of the two an example.

Example for Actions Derived Logically from One

Every person who often uses computers may have accomplished some kind of picking color operations. Very often, a SplitButton with its button-part's backcolor indicates the currently selected color and a dropdown Control to list all the regularly used colors for these kinds of operations. The following image is a screenshot of setting color for Windows XP OS's window's color.

color_picker.jpg

Example for Options Logically Because of One

In GIS and CAD industry, especially in GIS, a series of coordinates and its visual style (which is composed by fill pattern, transparence, borderline style and so on.) make up a geometric figure. To select a perfect visual style, we may change a geometric's visual style frequently. To change it one by one is very easy but also very time consuming. Because very often the difference between many geometric figures is only lay on fill pattern or transparence or borderline style or transparence and borderline style. To change the visual style in batches is a good idea. We should make a choice which one or two of the visual style options need to be changed in batches. SplitButton will work in this case.

visual_style.jpg

Use the Code

Copy the SpitButton.cs file to your project, and drag the SplitButton to the Container Control from toolbox. Selecting your prefer image for the split part of the SplitButton (I have provided two most often used SplitImages together with the source code). Subscribing to the right event and giving right response is all the left things one should do to use the Control.

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the button part of the SplitButton is clicked by the mouse.")]
public event MouseEventHandler ButtonMouseClick;

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the button part of the SplitButton is 
	double clicked by the mouse.")]
public event MouseEventHandler ButtonMouseDoubleClick;

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the split part of the SplitButton is clicked by the mouse.")]
public event MouseEventHandler SplitMouseClick;

[Browsable(true)]
[Category("Action")]
[Description("Occurs when the split part of the SplitButton 
	is double clicked by the mouse.")]
public event MouseEventHandler SplitMouseDoubleClick;

The following screenshot of the demo explains how to use the SplitButton clearly.

demos.jpg

Implementation

Very easy. Repaint again.

  • First, paint two buttons for button part and split part separately.

    button_s.jpg

  • Second, paint the gap between the button part and split part. I use two very small images from a button to cover the gap. Just have a look at the code.

    btn.jpg

    graphics.DrawImage(img, new Rectangle(x,y+1,_partWidth,base.Height-2),
               new Rectangle(0, 1, _partWidth, base.Height - 2), GraphicsUnit.Pixel);
  • Then, paint the Split line.

    SplitButtonHot.jpg

  • Finally, add support for Backcolor, Backgroundimge, Image, ImageAlign, Text, and TextAlign property.

This is a simple control. That's all. For details, read the code.

Something Else

Together with the source code, I provide a ContextContainer class, it is used to drop down any kind of controls.

ContextContainer _contextContainer;
public Form1()
{
    InitializeComponent();
    _contextContainer = new ContextContainer(new UserControl1());
    _contextContainer.ContextMode = ContextMode.MultiSelect;
}
private void splitButton5_SplitMouseClick(object sender, MouseEventArgs e)
{
    _contextContainer.Show(splitButton5);
}

The above code block can be found in the Form1.cs file. It shows how to use the ContextContainer to dropdown a control.

I did not post the ContextContainer formally, because one problem still exists. It has bothered me for a little long time. If Dock property of a control contained by a UserControl is set to Fill, the UserControl's size will shrink to 2*2 when we use the ContextContainer to drop it down. If you know why, please tell me. Thank you.

History

  • 25th December, 2010: Initial post

License

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

Share

About the Author

tr0217
Software Developer
China China
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralThis is a good stuff! PinmemberRex_kz24-May-11 21:23 
GeneralMy vote of 3 Pinmembertim_mcgwyn3-Jan-11 9:27 
GeneralRe: My vote of 3 Pinmembertr02173-Jan-11 18:47 
GeneralRe: My vote of 3 [modified] Pinmembertr02174-Jan-11 2:15 
GeneralMy vote of 5 Pinmemberprasad0226-Dec-10 22:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 25 Dec 2010
Article Copyright 2010 by tr0217
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid