Pictures on Menu Items |
|
Introduction |
Because Microsoft Windows is a graphical operating system, you can enhance the appearance of your menu items by displaying indicative pictures close to menu items. Here is an example of three menu items that display pictures:
|
When introducing menus, we saw that each menu was treaded separately. This means that you choose what menu would display a picture and which one would not display any picture. The picture to display can be of almost any format and you can use a picture of any size. When you specify the picture, the studio may (or may not) resize it to fit the height (and width) reserved for it. This means that if the picture is too big, it may get shrunk, so much that you may not be able to recognize it anymore:
As mentioned already, the menu supports pictures of almost any type, which includes bitmaps, JPEGs, GIFs, and icons. Although you can use bitmaps, it may be better to use icons. The reason is that it is easier to control and even predict the background color of an icon and the operating system also is equipped to identify the background color of an icon. You can use icons that either you design or acquire one way or another.
The (new) .NET Framework provides a complete and high level of support for pictures on a menu. You can specify the picture on a menu item while or a after designing the menu. If you are visually creating a menu:
The Open dialog box would come up for you to select the picture. Alternatively, on the menu strip, you can click the menu category that holds the menu item that will display the picture. In the Properties window, you can click the ellipsis button of the DropDownItems field. In the Items Collection Editor, under Members, click the item menu. In the right list, click Image and click its ellipsis button. Then use the Open dialog box to select the desired picture. If you are programmatically creating a menu item, to specify only the picture that the menu item would display, you can initialize it with the following constructor of the ToolStripMenuItem class: Public Sub New(image As Image) Here is an example: Imports System.Drawing Imports System.Windows.Forms Module Exercise Public Class Starter Inherits Form Private mnuMain As MenuStrip Private mnuFile As ToolStripMenuItem Private mnuFileNew As ToolStripMenuItem Dim components As System.ComponentModel.Container Public Sub New() InitializeComponent() End Sub Public Sub InitializeComponent() mnuMain = New MenuStrip mnuFile = New ToolStripMenuItem("&File") mnuFileNew = New _ ToolStripMenuItem(Image.FromFile("E:\Programs\art\new.ico")) mnuFileNew.Text = "&New" mnuFile.DropDownItems.Add(mnuFileNew) mnuMain.Items.Add(mnuFile) Controls.Add(mnuMain) End Sub End Class Function Main() As Integer Dim frmStart As Starter = New Starter Application.Run(frmStart) Return 0 End Function End Module If you had created the menu item using either the default constructor or the constructor that takes only a string, to specify the picture of the menu, the ToolStripMenuItem is equipped with a property named Image that is of type Image. Here is an example: Imports System.Drawing Imports System.Windows.Forms Module Exercise Public Class Starter Inherits Form Private mnuMain As MenuStrip Private mnuFile As ToolStripMenuItem Private mnuFileNew As ToolStripMenuItem Private mnuFileOpen As ToolStripMenuItem Dim components As System.ComponentModel.Container Public Sub New() InitializeComponent() End Sub Public Sub InitializeComponent() mnuMain = New MenuStrip mnuFile = New ToolStripMenuItem("&File") mnuFileNew = New _ ToolStripMenuItem(Image.FromFile("E:\Programs\art\new.ico")) mnuFileNew.Text = "&New" mnuFileOpen = New ToolStripMenuItem("Open") mnuFileOpen.Image = Image.FromFile("E:\Programs\art\open.ico") mnuFile.DropDownItems.Add(mnuFileNew) mnuFile.DropDownItems.Add(mnuFileOpen) mnuMain.Items.Add(mnuFile) Controls.Add(mnuMain) End Sub End Class End Module To specify both the caption and the picture of the menu, you can initialize it using the following constructor: Public Sub New(text As String, image As Image) Here is an example: Imports System.Drawing Imports System.Windows.Forms Module Exercise Public Class Starter Inherits Form Private mnuMain As MenuStrip Private mnuFile As ToolStripMenuItem Private mnuFileNew As ToolStripMenuItem Private mnuFileOpen As ToolStripMenuItem Private mnuFileSave As ToolStripMenuItem Dim components As System.ComponentModel.Container Public Sub New() InitializeComponent() End Sub Public Sub InitializeComponent() mnuMain = New MenuStrip mnuFile = New ToolStripMenuItem("&File") mnuFileNew = New _ ToolStripMenuItem(Image.FromFile("E:\Programs\art\new.ico")) mnuFileNew.Text = "&New" mnuFileOpen = New ToolStripMenuItem("Open") mnuFileOpen.Image = Image.FromFile("E:\Programs\art\open.ico") mnuFileSave = New ToolStripMenuItem( _ "Save", Image.FromFile("E:\Programs\art\save.ico")) mnuFile.DropDownItems.Add(mnuFileNew) mnuFile.DropDownItems.Add(mnuFileOpen) mnuFile.DropDownItems.Add(mnuFileSave) mnuMain.Items.Add(mnuFile) Controls.Add(mnuMain) End Sub End Class End Module
After specifying the picture to display on a menu item, you can exercise a great deal of control on its appearance. By default, the picture is displayed on the left side of the menu item's caption. The alignment is controlled by the ImageAlign property of the ToolStripItem class. The ImageAlign property is of type ContentAlignment, which is an enumeration. It uses the same values we saw for the content alignment of text on a control. After specifying the picture to display on a menu item, if the picture is too big, it may get shrunk to fit 16 x 16. Still, if you want, you can keep the size. The ability to keep the 16 x 16 size or the original size is controlled by the ImageScaling property. This property is of type ToolStripItemImageScaling, which is an enumeration and has only two members. The default value of this property is None, which means the picture would be resized for a 16 x 16 size. An alternative is to set the property to SizeToFit. If you do, the studio would use a type of algorithm to change the size of (all) the menu items: If you set only one menu item to SizeToFit, the studio would use its size of the new size of all the other menu items. Here is an example:
You can make the menu item display both the picture and the caption. This characteristic is controlled by the DisplayStyle property of the ToolStripItem class. This property is of type ToolStripItemDisplayStyle, which is an enumeration:
While you are visually creating a menu, Microsoft Visual Studio keeps track of its items. To see an outline of your menu, you can click a menu category or item and click Document Outline. A window titled Document Outline would appear (on the left of the screen by default).
After creating a few menu categories or a few menu items, you may find out that an item is missing in the sequence. You can then create a new menu before one of your choice:
There is no formal method to programmatically insert a new menu. The sequence of adding TooStripMenuItem objects to their parent specifies how they would appear.
To assist you with easily creating a menu of the most common items found in regular applications, Microsoft Visual Studio comes with a menu template. To use it to create a main menu, from the Menus & Toolbars section of the Toolbox, click a MenuStrip and click the form. Right-click the menu strip and click Insert Standard Items. A complete menu made of File, Edit, Tools, and Help menu categories would be created on the form. Each menu category would also receive a few menu items:
You can then customize the menu as you see fit.
You can visually copy a main menu or a contextual menu from one (Visual Studio) application to another. To do this, in the application that holds the desired menu, under the form, right the menu strip or the context menu strip and click Copy. In the other application, right-click the form and click Paste. You can visually copy a menu category to duplicate it in your application. To do this, under the form, click the menu strip. In the menu designer, right-click the menu category and click Copy. Right-click another top-level item and click Paste. When you copy and paste a menu category, the new one would have the same menu items (captions) as the original, but with new names. You can keep the items of the new menu category or you can customize them as you see fit. You can visually copy a menu item to duplicate it. To do this, in the menu designer:
After copying the menu item, right-click the item that will succeed it and click Paste. To assist you with programmatically copying a menu category or a menu item, the ToolStripItemCollection class is equipped a method named CopyTo. Its syntax is: Public Sub CopyTo(array As ToolStripItem(), index As Integer) This method takes a collection of menu items (as an array) and copies it to the index of your choice.
While designing your menu, you may find out that a menu category or a menu item is in the wrong position. You can then move the menu category or the menu item. To visually move a menu category, on the menu designer, click and hold the mouse on the menu category. Drag left or right in the desired direction. While moving the mouse, the cursor would display a small rectangle. When the mouse gets to the item that will succeed the new one, it would be surrounded by a dotted rectangle:
You can then release the mouse. When you move a menu category, it moves with all its menu items. To move a menu item, in the menu designer, click and hold the mouse on the item. Drag up or down. While moving the mouse, the cursor would display a small rectangle. When the mouse gets to the item that will succeed the new one, it would be surrounded by a dotted rectangle:
You can then release the mouse. When you move a menu item, if it has a sub-menu, it would move with that sub-menu. If you are using the Items Collection Editor, to move a menu item, first select it in the Members list, then one of the arrow buttons that point up or down, depending on the direction you want to move it. There is no formal process to programmatically move a menu. If you want, you can delete the menu from one ToolStripMenuItem object and add it to the desired ToolStripMenuItem object.
A menu item is said to be disabled if the user can see it but cannot use it. The caption of such a menu appears gray. Here are examples:
When a menu item is disabled, the user can position the mouse on it and click but nothing would happen. This indicates that the action of that menu item is not available at that time. The reverse to a disabled menu item is that it is enabled. That's the case for the Under and the Select All items in the above application. The user cannot directly enable or disable a menu. You as the application developer decides when (and why) the item would be enabled or disabled. To support the ability to enable or to disable a menu item, the ToolStripMenuItem class is equipped with a Boolean property named Enabled. By default, a new menu item you have just created is enabled. This is because the default value of this property is true. To visually enable or disable a menu item, in the menu designer or in the Items Collection Editor, click the menu item. In either the Properties window or on the right side of the Items Collection Editor, set the Enabled property to false. If it is currently set to false and you want to enable, set the property to true. To programmatically enable or re-enable it, you can set the value to true. In the same way, to find out the enabled status of a menu item, you can check the value of its Enabled property.
A menu is said to be hidden if it is programmatically available behind the scenes but the user cannot see. Since the user cannot see it, he or she cannot use it. The reverse to a hidden menu item is that it is shown to the user. The user cannot directly hide or show a menu item. You as the application developer creates a menu item and then decides when, how, and where (and why) the item would be hidden or shown. To support the ability to enable or to disable a menu item, the ToolStripMenuItem class inherits a Boolean property named Visible from the its parents (the ToolStripMenuItem class inherits it from the ToolStripDropDownItem class that inherits it from the ToolStripItem class). After you have just created a new menu, by default, it is made visible to the user. This is because the default value of the Visible property is set to true. To hide a menu item, you can set its Visible property to false. To show or to reveal it, you can set the value to true. In the same way, to find out whether a menu item is currently displaying, you can check the status of its Visible property.
Instead of disabling or hiding a menu you don't want the user to use anymore, you can simply delete it. If you do this, you cannot programmatically refer to it anymore, unless you re-create it. From the previous to the current lesson, we saw different ways of creating menu categories and menu items. To visually delete a menu category, under the form:
To visually delete a menu item, under the form, click either the menu strip or context menu strip:
In the same way, you can keep deleting one item at a time. To visually delete the whole main menu or a contextual menu, under the form, click either the menu strip or the context menu strip and press Delete. Be careful because you will not be warned before the menu is actually dismissed (you can still undo your action, provided it is still available). To assist you with programmatically deleting a menu category or a menu item, the ToolStripItemCollection class is equipped with three methods. To delete a menu using its ToolStripItem object name, you can call the Remove() method. Its syntax is: Public Sub Remove(value As ToolStripItem) When calling this method, pass it the name of the menu category or the menu item you want to delete. If you want to delete a menu category or a menu item based on its index, you can call the following method: Public Sub RemoveAt(index As Integer) To delete a menu using its key, you can use the ToolStripItemCollection.RemoveByKey() method whose syntax is: Public Overridable Sub RemoveByKey(key As String) In the same way, you can keep removing one item at a time. To help you delete all items, the ToolStripItemCollection class is equipped with a method named Clear. Its syntax is: Public Overridable Sub Clear When called, this method will get rid of all the menu categories and items that belong to the object that called it. |
|
||
Previous | Copyright © 2008-2016, FunctionX, Inc. | Home |
|