7 Icons, Group Boxes, Check Boxes, Radio Buttons Review and Preview You should feel very comfortable working within the Visual C# environment by now and know the three steps of building a project. In this class, we learn about three more controls relating to making choices in Visual C#: group boxes, check boxes, and radio buttons. We will look at another way to make decisions using the switch structure. We’ll have some fun making icons for our projects.
And, you will build a sandwich making project. Icons Have you noticed that whenever you design or run a Visual C# project, a little picture appears in the upper left hand corner of the form. This picture is called an icon. Icons are used throughout the Windows environment.
There are probably lots of icons on your Windows desktop - each of these represents some kind of application. Look at files using Windows Explorer. Notice every file has an icon associated with it. Here is a blank Visual C# form: The icon seen is the default Visual C# icon for forms.
It’s really kind of boring. Using the Icon property of the form, you can change this displayed icon to something a little flashier. Before seeing how to do this, though, let’s see how you can find other icons or even design your own icon. Custom Icons An icon is a special type of graphics file with an ico extension.
It is a picture with a specific size of 32 by 32 pixels. The internet has a wealth of free icons you can download to your computer and use. Do a search on ‘free 32 x 32 ico files’. You will see a multitude of choices.
One site we suggest is: http://www.com/toolbar-icons/32x32-free-design-icons-by-aha-soft/ At such a site, you simply download the ico file to your computer and save it. It is possible to create your own icon using Visual Studio. To do this, you need to understand use of the Microsoft Paint tool. We will show you how to create a template for an icon and open and save it in Paint.
To do this, we assume you have some basic knowledge of using Paint. For more details on how to use Paint, go to the internet and search for tutorials. To create an icon for a particular project, in Solution Explorer, right-click the project name, choose Add, then New Item. This window will appear: As shown, expand Visual C# Items and choose General.
Then, pick Icon File. Name your icon and click Add. A generic icon will open in the Microsoft Paint tool: The icon is very small. Let’s make a few changes to make it visible and editable.
First, resize the image to 32 x 32 pixels. Then, use the magnifying tool to make the image as large as possible. Finally, add a grid to the graphic. When done, I see: At this point, we can add any detail we need by setting pixels to particular colors.
Once done, the icon is saved by using the File menu. The icon will be saved in your project file and can be used by your project. The icon file (Icon1.ico in this case) is also listed in Solution Explorer: Assigning Icons to Forms As mentioned, to assign an icon to a form, you simply set the form’s Icon property. Let’s try it.
Start Visual C# and start a new project. A blank form should appear. Go to the properties window and click on the Icon property. Click that button and a window that allows selection of icon files will appear.
Look for an icon you downloaded or created and saved (if you did it). Select an icon, click Open in the file window and that icon is now ‘attached’ to your form. Easy, huh? In the \VCSKids\VCS Projects\Sandwich folder is an icon we will use for a project (Sandwich. When I attach my sandwich icon, the form looks like this: You’ll have a lot of fun using unique icons for your projects.
It’s nice to see a personal touch on your projects. Group Box Control A group box is simply a control that can hold other controls. Group boxes provide a way to separate and group controls and have an overall enable/disable feature. This means if you disable the group box, all controls in the group box are also disabled.
The group box has no events, just properties. The only events of interest are events associated with the controls in the group box. Writing event methods for these controls is the same as if they were not in a group box. The group box is selected from the toolbox.
It appears as: In Toolbox: On Form (default properties): Properties The group box properties are: Property Description Name Name used to identify group box. Three letter prefix for group box names is grp. Text Title information at top of group box. Font Sets style, size, and type of title text.
BackColor Sets group box background color. ForeColor Sets color of title text. Left Distance from left side of form to left side of group box (X in property window, expand Location property). Top Distance from top side of form to top side of group box (Y in property window, expand Location property).
Width Width of the group box in pixels (expand Size property). Height Height of group box in pixels (expand Size property). Enabled Determines whether all controls within group box can respond to user events (in run mode). Visible Determines whether the group box (and attached controls) appears on the form (in run mode).
Like the Form object, the group box is a container control, since it ‘holds’ other controls. Hence, controls placed in a group box will share BackColor, ForeColor and Font properties. To change this, select the desired control (after it is placed on the group box) and change the desired properties. Moving the group box control on the form uses a different process than other controls.
To move the group box, first select the control. Note a ‘built-in’ handle (looks like two sets of arrows) for moving the control appears at the upper left corner: Click on this handle and you can move the control. Placing Controls in a Group Box As mentioned, a group box’s single task is to hold other controls. To put controls in a group box, you first position and size the group box on the form.
Then, the associated controls must be placed in the group box. This allows you to move the group box and controls together. There are several ways to place controls in a group box: • Place controls directly in the group box using any of the usual methods. • Draw controls outside the group box and drag them in.
• Copy and paste controls into the group box (prior to the paste operation, make sure the group box is selected). To insure controls are properly place in a group box, try moving it (use the move handle) and make sure the associated controls move with it. To remove a control from a group box, simply drag it out of the control. Example Start Visual C# and start a new project.
Put a group box on the form and resize it so it is fairly large. Select the button control in the Visual C# toolbox. Drag the control until it is over the group box. Drop the control in the group box.
Move the group box and the button should move with it. If it doesn’t, it is not properly placed in the group box. If you need to delete the control, select it then press the Del key on the keyboard. Try moving the button out of the group box onto the form.
Move the button back in the group box. Put a second button in the group box. Put a numeric updown control in the group box. Notice how the controls are associated with the group box.
A warning: if you delete the group box, the associated controls will also be deleted! Run the project. Notice you can click on the buttons and use the numeric updown control. Stop the project. Set the group box Enabled property to False.
Run the project again. Notice the group box title (set by the Text property) is grayed and all of the controls on the group box are now disabled - you can’t click the buttons or updown control. Hence, by simply setting one Enabled property (that of the group box), we can enable or disable a number of individual controls. Stop the project.
Reset the group box Enabled property to True. Set the Visible property to False (will remain visible in design mode). Run the project. The group box and all its controls will not appear.
You can use the Visible property of the group box control to hide (or make appear) some set of controls (if your project requires such a step). Stop the project. Change the Visible property back to True. Place a label control in the group box.
Change the BackColor property of the group box. Notice the background color of the label control takes on the same value, while the button controls are unaffected. Recall this is because the group box is a ‘container’ control. Sometimes, this sharing of properties is a nice benefit, especially with label controls.
Other times, it is an annoyance. If you don’t want controls to share properties (BackColor, ForeColor, Font) with the group box, you must change the properties you don’t like individually. Group boxes will come in very handy with the next two controls we look at: the check box and the radio button. You will see this sharing of color properties is a nice effect with these two controls.
It saves us the work of changing lots of colors! Typical Use of Group Box Control The usual design steps for a group box control are: ➢ Set Name and Text property (perhaps changing Font, BackColor and ForeColor properties). ➢ Place desired controls in group box. Monitor events of controls in group box using usual techniques. Check Box Control A check box provides a way to make choices from a group of things.
When a check box is selected, a check appears in the box. Each check box acts independently. Some, all, or none of the choices in the group may be selected. An example of where check boxes could be used is choosing from a list of ice cream toppings.
You might want it plain, you might want a couple of toppings, you might want it with the works - you decide. Check boxes are also used individually to indicate whether a particular project option is active. For example, it might indicate if a control’s text is bold (checked) or not bold (unchecked). Check boxes are usually grouped in a group box control.
The check box control is selected from the toolbox. It appears as: In Toolbox: On Form (default properties): Properties The check box properties are: Property Description Name Name used to identify check box. Three letter prefix for check box names is chk. Text Identifying text next to check box.
TextAlign Specifies how the displayed text is positioned. Font Sets style, size, and type of displayed text. Checked Indicates if box is checked (True) or unchecked (False). BackColor Sets check box background color.
ForeColor Sets color of displayed text. Left If on form, distance from left side of form to left side of check box. If in group box, distance from left side of group box to left side of check box (X in properties window, expand Location property). Top If on form, distance from top side of form to top side of check box.
If in group box, distance from top side of group box to top side of check box (Y in properties window, expand Location property). Width Width of the check box in pixels (expand Size property).