Monday, March 28, 2005

Developing Windows Applications - I

After getting through basic guidelines to design Windows Application, we should now get our hands to basic elements of Windows Application. If we are talking about the windows elements, then in this case first element is Windows Form itself. Its like a drawing board, where all the drawing will be done. Windows form is defined inside System.Windows.Forms namespace. Control is its grand parent class under the same namespace. Control class has to be inherited by every component that has to have visual representation. Now its time to dive deeper into windows applications.

Visual Inheritance
Inheritance is not limitedto only classes those are having business logic. As Form itself is a class with visual appearance, rules of inheritance applies to Form too.This feature is handy when you want to retain some kind of image or theme through out all screens in your applications. You can accomplish this task in two ways. One way is through code:

public classParentForm : System.Windows.Forms
{
// Necessary elements to build a form
}

public class ChildForm : ParentForm
{
//Visual elements
}

Do you notice one thing in this code? ChildForm is not inherited from System.Windows.Forms. It is inheriting from ParentForm. This way our ChildForm will get all the visual elements and other characteristics those are there in ParentForm.
Other way to accomplish this task is inheritance picker in Visual Studio .Net. Following are the steps to use inheritance picker:
1. Right click on your project, select Add Add Inherited Form.
2. Select Local Project Items UI in opened dialog box.
3. Choose Inherited Forms and give a name for your child form. Click OK
4. Inheritance picker will come having all forms available for visual inheritance in your project.
Inheritance picker will resemble the screen given below:

InheritancePicker

Menus
Another basic aspect of any application is its Menus. In .Net we have facility to design our menu items through a menu designer. Main menu item is designed using a component MainMenu. It manages the collection of MenuItem controls, which form the visual element of menu structure. With the MainMenu component you can develop menus in an intuitive and rapid manner.

To add MainMenu in your form just drop it to your form from ToolBox. It will go and sit in component tray in Visual Studio.Net. It wont be a visible element in your form design. Select it and you will get a Type Here text in Menu bar of you form. Click there and you have your first MenuItem.

Now some tips to make your menus to resemble professional menus.
1. Logical Grouping: To group or separate your menu items on logical basic, create a menu item and give - as its Text property. This will make a horizontal seperation between menu items.
2. Access Keys: Most of the users like to have a way to menus through keyboard. Access key is a combination of ALT + character that can fire the command of a menu item. For example in above figure F in File is an access key. To achieve this precede the text of menu item with &. For example I gave &File as the text of menu item and now ALT + F will have effect same as of clicking the File using mouse.
3. Shortcut Keys: Shortcut keys enable instant access to menu commands, thus providing a keyboard shortcut for frequently used menu commands. Shortcut key assignments can be single keys, such as Delete, F1, or Insert, or they can be key combinations, such as Ctrl+A, Ctrl+F1, or Ctrl+Shift+X. When a shortcut key is designated for a menu item, it is shown to the right of the menu item. To show shortcut key, set ShowShortcutproperty of menu item to true. To assign a shortcut key to any menu item set the particular menu items Shortcut property from the drop down menu.

To make your menu item to work, simply double click on it. Visual Studio .Net will code an event handler for you as given below:

private void menuFileNew_Click(object sender, System.EventArgs e)
{

//Your code goes here
}

If you expand Windows Form Designer generated code region you will come to know that it has also created the association between click event and its handler as shown below:


this.menuFileNew.Click += new System.EventHandler(this.menuFileNew_Click);

Isnt it so simple? You just got to code for particular event. No other nonsense code :)

MenuExaple

Dock Property
Every windows control has one property called Dock. Its an inherited property from Control. Docking refers to attaching your particular control to one of the edge of parent control. Parent control is usually Form, but it can be anything from Tab control to panel.An example of a docked control can be a menu bar docked to top of form or a status bar docked to bottom of form.

To set the docking property of control,simply select that control and select Dock property in Properties window. You will get visual interface similar as show aside to set the docking. If you click the top bar, docking will be set as Top. To remove docking for your control, choose None. Selecting middle bar causes your control to fill entire available area of its parent as it is a Fill docking.

Docking

Anchor Property
If you see the above figure, you will see Anchor property before Dock property. Anchor is also an inherited property from Control. This property lets you to set a constant distance for your control from one or more edges of form. Let me explain this by an example. Lets assume that you have designed one wonderful screen as given aside. But user resizes this screen and then your screen looks like as given below.

Anchoring-I
Anchoring-II

Are you ready to deal with such kind of situations? Let your interface deal with such scenario in a graceful manner. Anchor is property that saves you in such kind of scenarios. Anchor property allows you to manage how controls respond to resizing the form. You can allow controls to remain fixed in the form by anchoring them to the top, left, right and bottom edges, cause them to stretch when resized, or allow them to float freely by releasing the anchor. To set the Anchor property of, select your control and then select Anchor property in Properties window. You will get another visual interface. Select the Anchor type you would like to give to your control. To deal with situation described in our example, anchor controls to bottom, right edges of screen. This will let your controls to keep a constant distance from bottom of form as well as from right of from. You can very well use Anchor and Dock properties while designing UI. But one caution, when Dock property is set, it makes Anchor to be as Top, Left.

Anchoring-III

In this article I brought theoretical concepts of inheritance to real world use. We got to know how to beautify our applications with menus. We saw some very handy properties like Dock and Anchor which can be helpful to deal with users actions against our screens. Hope you enjoyed this small tour to Windows applications.

No comments: