Browse DevX
Sign up for e-mail newsletters from DevX


Master Toolbars and Menus with the New ToolStrip Control : Page 6

For years, developers have complained about the difficulties involved in creating professional toolbars, menus, and status bars, notably the lack of flexibility and extensibility in the controls. The flexible and extensible new ToolStrip control in the .NET 2.0 framework promises to solve those problems by changing the underlying model.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Building a Status Strip
The last important new ToolStrip feature is the StatusStrip. A StatusStrip can accommodate all the types used in a ToolStripItem; however, you would usually try to limit its use to showing the status of the current user interface, typically with either progress bars or text. For example, Outlook 2003 provides an icon with a dropdown button when you are offline. When you click this button you get a menu of available options. This is the type of situation in which you need to use the StatusStrip.

The following code snippet adds a ToolStripLabel with a ToolStripDropDownButton on one side. Clicking the button lets users select between two different buttons. Clicking the label causes the progress bar to update. Figure 6 shows you how this looks at runtime.

Figure 6. StatusStrip Example: The sample shows what happens when users click the ToolStripDropDownButton or click the label to update the ToolStripProgressBar.

ToolStripProgressBar bar = new ToolStripProgressBar(); bar.Name = "Status"; bar.ImageTransparentColor = Color.Brown; bar.Height = 20; bar.Maximum = 100; bar.Visible = false; stsStrip.Items.Add(bar); ToolStripLabel lblSts = new ToolStripLabel(); lblSts.Text = "Status offline."; stsStrip.Items.Add(lblSts); ToolStripDropDownButton ddownbutton = new ToolStripDropDownButton(); ToolStripDropDown ddown = new ToolStripDropDown(); ToolStripButton dbtnConnect = new ToolStripButton(); dbtnConnect.Text = "Click &here to connect..."; dbtnConnect.ToolTipText = "Starts the process of connecting based " + "on preferences."; ToolStripButton dbtnpref = new ToolStripButton(); dbtnpref.Text = "&Preferences"; dbtnpref.ToolTipText = "Preferences for connection."; ddown.Items.Add(dbtnpref); ddown.Items.Add (dbtnConnect); ddownbutton.DropDown = ddown; stsStrip.Items.Add(ddownbutton); lblSts.DoubleClick += delegate { lblSts.Visible = false; ddownbutton.Visible = false; StartProgressBar startCallback=new StartProgressBar(ProgressBarCall); this.BeginInvoke(startCallback); ddownbutton.Visible = true; lblSts.Visible = true; };

You have now seen examples for nearly every ToolStripItem element type and all the ToolStrip controls. You can extend these to create customized themes or styles for your ToolStrips.

There are three ways to customize the rendering of ToolStrip controls as seen below:

Use a ToolStripRenderer. Use this class to create custom color schemes or styles for ToolStrip controls. You inherit the extensible ToolStripRenderer class and override certain key protected and public methods to achieve custom stylings.

Use a ToolStripProfessionalRenderer. This class renders based on Windows' current color scheme, letting your controls adjust to users' color preferences.

Use a ToolStripSystemRenderer. This applies a flat styling for the controls and uses the system colors for the windows.

To understand how to use these Renderers look at the following code snippet for the ContextMenuStrip.

ToolStripButton btnToolStripManager = new ToolStripButton(); btnToolStripManager.Text ="&For ToolStripManager"; btnToolStripManager.Click +=delegate { CustomToolStripRenderer customrender = new CustomToolStripRenderer(); ToolStripManager.Renderer=customrender ; }; bcustom.DropDownItems.Add(btnToolStripManager ); ToolStripButton btnToolStrip = new ToolStripButton(); btnToolStrip.Text ="For &Current ToolStrip"; btnToolStrip.Click +=delegate { CustomToolStripRenderer customrender = new CustomToolStripRenderer(); tlStrip.Renderer=customrender ; }; bcustom.DropDownItems.Add(btnToolStrip); mnuModes.Items.Add(bcustom); ToolStripButton btnProfesional=new ToolStripButton(); btnProfesional.Text = "&Professional rendering"; btnProfesional.Click += delegate { ToolStripProfessionalRenderer profrender = new ToolStripProfessionalRenderer(); ToolStripManager.Renderer=profrender; }; mnuModes.Items.Add(btnProfesional); ToolStripButton btnSystem=new ToolStripButton(); btnSystem.Text = "&System rendering"; btnSystem.Click += delegate { ToolStripSystemRenderer sysrender = new ToolStripSystemRenderer(); ToolStripManager.Renderer = sysrender; };

The most interesting parts of the preceding snippet are the anonymous method declarations. For example, the first case instantiates a CustomToolStripRenderer— a customized implementation of ToolStripRenderer—and sets that as the ToolStripManager's Renderer property. Remember that the ToolStripManager controls the color rendering and styling of the ToolStrip, so the style or color schema from the customized implementation will apply to the entire ToolStrip.

public class CustomToolStripRenderer:ToolStripRenderer { public CustomToolStripRenderer(): base() { } protected override void Initialize( ToolStrip toolStrip) { base.Initialize(toolStrip); toolStrip.AllowDrop = true; toolStrip.AutoScroll = true; toolStrip.AutoSize = true; toolStrip.BackColor = Color.Brown; toolStrip.ForeColor = Color.Wheat; toolStrip.CanOverflow = true; toolStrip.Font = new Font(FontFamily.GenericSerif, 10); } protected override void InitializeItem( ToolStripItem item ) { base.InitializeItem(item); item.BackColor = Color.Beige; item.ForeColor = Color.Red; } }

The customization class shown above overrides two methods: Initialize, which initializes the associated ToolStrip, and InitializeItem, which initializes each ToolStripItem in the ToolStrip. The color properties you set in this snippet will be rendered when you call the CustomToolStripRenderer. The custom code simply changes some of the properties of the associated ToolStrip and ToolStripItems. You can see this if you click the
Figure 7: Rendering Modes Used in ToolStrips. You can experiment with various rendering modes by selecting one of the Render modes available from the Rendering Options item on the context menu.
context menu and select the Custom Rendering option. The ToolStripManager's Render property gets set to the selection and the entire toolbar and items inside are redrawn to reflect the changes (see Figure 7). Note that the sample doesn't provide information about overriding the behaviors of all critical methods because such a discussion is out of the scope of this article.

You can configure your applications to use the Renderer property for all ToolStrips using a ToolStripManager or for just a specific ToolStrip. You can see both options in the downloadable sample code.

Using the Professional or System renderers is similar. You would explicitly create an instance of the desired renderer and set that via the Render property or just change the ToolStripManager.RenderMode option's value to Professional/System.

The ToolStrip is a huge new topic within the .NET framework 2.0 because of the sheer richness of the control set and the corresponding UI elements. But it's also a big step towards efficiency, flexibility, and extensibility because of the improved object model and the support for manager classes and customized Renderer objects.

Vishnu Prasad H is a Microsoft Visual C# MVP working as Consultant at Capco IT Services India Ltd, Bangalore. He has four years of practical experience and specializes in Microsoft based technologies like .NET, COM/COM+, and SQL Server.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date