Title: Use big toolstrip buttons in C#

This example shows how you can make big toolstrip buttons. It also shows how to make buttons act as comboboxes that let you select images.

At design time, I created the toolstrip and added the button with the flower on it. To make it big enough to hold its picture, I set its ImageScaling property to None. This is important. It tells the control not to scale its image to whatever size the control thinks is best. If you don't do this, then the button scales its image to 16x16 pixels.

The example builds the rest of its tools in code, mostly so it's easy to describe the steps that you need to take. You could do most if not all of this interactively in the Form Designer if you prefer.

Form_Load

The form's Load event handler creates the tools. To make it easier to follow the code, I'll describe the event handler in sections. The following code shows the first section, which creates the diamond buttons that are one level below the toolstrip's main buttons. When you click the diamond button on the toolstrip, these sub-items are displayed so you can select one.

private void Form1_Load(object sender, EventArgs e) { // Make all of the items. (Just to get it over with.) Image[] diamond_images = { Properties.Resources.diamond1, Properties.Resources.diamond2, Properties.Resources.diamond3, }; string[] diamond_tips = { "Diamond 1", "Diamond 2", "Diamond 3", }; int num_diamonds = diamond_images.Length; ToolStripButton[] diamond_btns = new ToolStripButton[num_diamonds]; for (int i = 0; i < num_diamonds; i++) { ToolStripButton btn = new ToolStripButton(diamond_images[i]); btn.ImageScaling = ToolStripItemImageScaling.None; btn.ToolTipText = diamond_tips[i]; btn.Tag = i; btn.Click += dropdownButton_Click; diamond_btns[i] = btn; }

At design time, I added the diamond and smiley images to the program's properties. This code puts the diamond images in an array so it can loop through them. It also puts the images' corresponding tooltip text an array.

The code then loops through the images and tooltip values. For each pair of values it creates a ToolStripButton that displays the image.

It then sets the button's ImageScaling property to None.

Next the code sets the button's ToolTipText and Tag properties. The Tag property stores the index of the entry.

The code sets the button's Click event handler to a method that I'll describe later. Finally, the code saves the button in the diamond_btns array.

The program then repeats those steps to make the smiley face buttons. That code is basically the same as the previous code, so I won't show it here. Download the example to see the details.

The following code shows the rest of the form's Load event handler.

// Prepare the ToolStrip. toolStrip1.BackColor = Color.LightBlue; // Do the following to make all buttons have // the same desired image size. //toolStrip1.ImageScalingSize = new Size(50, 50); // Make the diamond dropdown button. DiamondButton = new ToolStripDropDownButton(); toolStrip1.Items.Add(DiamondButton); DiamondButton.DropDownItems.AddRange(diamond_btns); DiamondButton.ImageScaling = ToolStripItemImageScaling.None; SelectItem(DiamondButton, diamond_btns[0]); // Make the smiley dropdown button. SmileyButton = new ToolStripDropDownButton(); toolStrip1.Items.Add(SmileyButton); SmileyButton.DropDownItems.AddRange(smiley_btns); SmileyButton.ImageScaling = ToolStripItemImageScaling.None; SelectItem(SmileyButton, smiley_btns[0]); // Move the top of the Panel control below the ToolStrip. panel1.Top = toolStrip1.Bottom; }

Now the code prepares the toolstrip and the ToolStripDropDownButton objects that it contains directly. The code first sets the toolstrip's background color so it's easy to see where the toolstrip is on the form.

If you want the toolstrip to scale all of the images that it contains to the same size, you can set that size with the ImageScalingSize property. Then if you leave a button's ImageScaling property set to SizeToFit, the toolstrip resizes that button's image to this size. I have commented out the ImageScalingSize statement in this code.

Next the code creates a ToolStripDropDownButton named DiamondButton and adds the new button to the toolstrip. It uses the button's DropDownItems.AddRange method to add all of the diamond ToolStripButton objects that were created earlier to the dropdown button's list. (This is why I placed the buttons in the diamond_btns array.)

The code then sets the dropdown button's ImageScaling property to None so the button is not scaled even if the toolstrip's ImageScalingSize property is defined. For example, you could use the toolstrip's ImageScalingSize property to set a default size for the images that it contains and then have some dropdown buttons set ImageScaling to None so they don't use the default scale.

The code finishes this button by calling the SelectItem method describe shortly to make the dropdown button show its first selection.

Next the program repeats those steps to create the smiley dropdown button.

The form's Load event handler finishes by setting the panel1 control's Top property equal to the toolstrip's Bottom value. All of the form's other controls are arranged inside the panel1 control. This makes the panel fit nicely up against the toolstrip. If you don't do this, then the panel keeps its original position on the form. Depending on the toolstrip's height, that might make the panel overlap the toolstrip or it might create a gap between the two. (In this example, it doesn't matter because I created the flower button at design time and that button determines the toolstrip's height.)

SelectItem

The following SelectItem method makes a dropdown button display the image stored in one of its button subitems.

private void SelectItem( ToolStripDropDownButton parent, ToolStripButton item) { parent.Image = item.Image; parent.ToolTipText = item.ToolTipText; parent.Tag = item.Tag; }

This method makes the parent ToolStripDropDownButton use the same Image, ToolTipText, and Tag values as the indicated ToolStripButton.

dropdownButton_Click

The following code shows the dropdownButton_Click event handler that is called when you select a ToolStripButton.

private void dropdownButton_Click(object sender, EventArgs e) { ToolStripButton btn = sender as ToolStripButton; ToolStripDropDownButton parent = btn.OwnerItem as ToolStripDropDownButton; SelectItem(parent, btn); }

This code first converts the sender parameter into the ToolStripButton that you clicked to raise the event. That object's OwnerItem property is a reference to the toolstrip item that holds the button. In this example, that item is the ToolStripDropDownButton that has the button as a sub-item. The program converts that value into a ToolStripDropDownButton object named parent.

The code then calls the SelectItem method, passing it the parent and button, to make the parent display the button's image.

Verifying the Selection

When you click the example program's Check Values button, the following code executes.

private void btnCheckValues_Click(object sender, EventArgs e) { txtDiamond.Text = DiamondButton.ToolTipText; txtSmiley.Text = SmileyButton.ToolTipText; }

This code simply displays the ToolStripDropDownButton objects' current tooltip text values so you can see that they are keeping track of the items that you have selected.

Other parts of your code can use those values or the object's Tag properties to determine which sub-items are currently selected.

Conclusion

You can use two key properties to change the sizes of buttons on a toolstrip.

If you set the toolstrip's ImageScalingSize property to a size, then it will try to scale any buttons that it contains to that size. That includes buttons contained in dropdown menus.

If you set a button's ImageScaling property to None, then the button will make its image its normal, unscaled size even if the toolstrip has an ImageScalingSize defined.

Getting the hang of those properties takes some practice. Download the example program and experiment with it. Once you get used to the properties, you can use the program's SelectItem method to create big toolstrip buttons and use dropdowns holding images as if they were comboboxes relatively easily.

Download the example to experiment with it and to see additional details.