Ready for another action packed, fun thrilled entry? In this episode we talk about the Toolstrip control and creating one dynamically through code. Sure we can add one through the toolbox and configure it at design time, but knowing how to create controls and manipulate them at runtime is also great practice. You might be asked many times to create a control and then have it update its appearance as the program progresses. We will show you how to build a Toolstrip for your app, create an imagelist to power it with some fun images off your hard drive, and add a neat little set of controls that we could eventually use as a search box. All this on the Programming Underground!
So as I mentioned before, it is always good practice to play with your favorite controls through a runtime scenario as well as design time. Sometimes you will be asked by a boss, or someone paying you to do their dirty work (or they might be the same person), to create an application that may miraculously create a control and configure it. Sometimes you will be asked to manipulate a control and change its attributes or actions if a certain condition arises in the program. Like gray out a button in the Toolstrip when X > your boss’ IQ (you can bet that button will be gray from the start when X = 1).
How is this done? In the sample below we created a standard windows application in C#. We told it to create an imagelist to hold our images, create an actual ToolStrip control and link it to the imagelist, then add the various controls (buttons, textbox etc).
Let’s take a look at the code to do this….
private void btnCreateToolbar_Click(object sender, EventArgs e)
{
// Create an Imagelist to hold the images for our buttons
ImageList myImages = new ImageList();
// While we are at it, create a ToolStrip control
ToolStrip newToolbar = new ToolStrip();
// Tell the toolstrip that it is to use images from our imagelist
newToolbar.ImageList = myImages;
// Now lets do something fun and get the icon files from the current directory.
string[] imageFiles = Directory.GetFiles(Application.StartupPath, "*.ico");
// Loop through the files found
for (int i = 0; i < imageFiles.Length; i++)
{
// Get an image from the path and add it to our imagelist control
Image currentImage = Image.FromFile(imageFiles[i]);
myImages.Images.Add(currentImage);
// Create a button and tell it the image index it should
// use for its appearance.
ToolStripButton aButton = new ToolStripButton();
aButton.ImageIndex = i;
// Add the button to the toolstrip
newToolbar.Items.Add(aButton);
}
// Create a search button, align it to the right side
// Then give it the text search
ToolStripButton searchButton = new ToolStripButton();
searchButton.Alignment = ToolStripItemAlignment.Right;
searchButton.Text = "Search";
// Now add the search button to the toolstrip
newToolbar.Items.Add(searchButton);
// Create a textbox and set its alignment also to the right
// While we are at it, also configure its border for nice appearance.
ToolStripTextBox myTextBox = new ToolStripTextBox();
myTextBox.Alignment = ToolStripItemAlignment.Right;
myTextBox.BorderStyle = BorderStyle.FixedSingle;
// Add it to the Toolstrip items collection
newToolbar.Items.Add(myTextBox);
// Dock the toolbar to the top of our form
newToolbar.Dock = DockStyle.Top;
// Then finally add the toolbar to our forms controls list.
this.Controls.Add(newToolbar);
}
As you can see from the in-code comments I have done a step by step build of the ToolStrip. First I create out imagelist control. This control is used for holding an array of images. They can be gif, jpg, png, ico files etc. Each of these images are stored in a collection with a subscript that you can use to access them. Index 0 accesses the first image, index 1 accesses the second image etc. It makes it easy to hold all the images in one spot and use them as a cohesive unit.
Next we create a ToolStrip control which will be a contrainer for controls like buttons, textboxes or even something like a progress bar. We then tell the ToolStrip that when it needs images, use our imagelist control.
But before we go about putting on our buttons and other controls and assigning them pictures, we have to first load the imagelist control with the pictures themselves! So we use a neat little trick to pull image filenames from the current directory. These filenames will be put into a string array and only files that have the ending “.ico” will be loaded. We use the for loop to then create Image objects and put them into the Imagelist control. Then we create a button and tell it to use that image as its picture. For example, aButton.ImageIndex = 1 would tell the button instance to use image 2 from the imagelist control as its picture.
The result is that we dynamically create a list of buttons that match the number of icon files we have in our application’s directory.
After we add the buttons, we can add another ToolStripButton for our search functionality. We set its alignment to the right and give it the text “Search”. The result is that this button will be on the right side of the ToolStrip. We then add it to the ToolStrip.
After the search button is done, we create a textbox. We set it to the right (just like the search button) and adjust its border to be a nice solid fixed look. Again we add it to the ToolStrip.
The image below shows you what the example looks like after we are done. Notice the five buttons on the left have been created by five .ico files in my application’s directory (make sure they are in the right directory or you may get an error in your code). You can also see the textbox and search button on the right hand side. To continue with this all you need to do now is tie some events to the controls. You can do this by wiring up events. Search my blog for wiring events and read up on how this can be done.
So that is it! You can add other things like ToolStripProgressBars, ToolStripDropDowns, and more. Explore the controls and see what you can do with it. The items can all be pretty easy to add and it should be easy to modify the code above for great effects. If you have any further questions, you can let us know on the board and I am sure someone will be happy to answer.
I hope you have enjoyed this entry of the Programmer’s Underground. Thanks for reading! 🙂
