مقدمة إلى تصميم نافذة البرنامج

• Introduction to designing a program window using the toolbox and setting tool properties.

Learning Outcomes

• Explain control tools and their uses.
• Add a control to the form in two different ways.
• Select a control or multiple controls.
• Move or resize a control.
• Delete a previously added control.
• Change an element's properties using the Properties window.
• Explain the different sections of the Properties window.
• Use the Text property to change the text displayed on a tool or the window title.
• Change the text color and element background color using ForeColor and BackColor.
• Adjust the border style of a control using the BorderStyle property.
• Hide a control so it does not appear when the program is running.
• Make a control unavailable for use when the program is running.
• Explain the importance of the Name property and how to set it.
• Change properties using programming commands.

The Toolbox

• C#.NET has a set of control tools in the Toolbox.
• You must choose the tool according to the required function, for example, use a Textbox if you want to provide boxes for the program user to enter data.

Controls (Tools)

• Tools or controls are represented by a set of symbols in the Toolbox.
• Each symbol is a tool with a specific function or task, and each has ready-made programming instructions to guide it to perform the required function.
• The programmer only selects the tool according to the required task and uses it directly, saving time and effort instead of designing it themselves.
• For example, if you want to allow the user to enter their name in your program.
• You use a box where the user can type the letters of the name, and if they make a mistake in entering the letters, they can modify them.
• C#.NET provides the Textbox tool for this purpose, which is a box that program users use to enter data with the ability to modify the entered data.
• This box also has properties that can be set to determine its appearance and behavior in the program.
• The Toolbox provides many tools.
• The most used tools are those that you find in the Common Controls group, so when you want to use these tools, click the group's (+) sign to display its list of tools.
• Here are some of the common and important tools, and you can often find these tools used in program design.
• Instead of searching for each of the tools in the specific groups, you can open the All Windows Forms group to see all the tools.

Form Window

• When you design a program, there must be a container for the different tools.
• This container is called the program window or Form.
• The tools are arranged on top of the Form, which is the screen (window) displayed to the user when the program is running so they can perform a specific task.
• An example Form could be a window for entering a new invoice or a window for displaying the cash flow of the treasury.
• When you design a new program, a blank Form appears automatically, but the program can contain more than one Form, which you add when needed. Project -> Add Windows Form.

Adding Tools and Working with Them

• How you can work with the set of tools provided by the Toolbox, such as placing a tool on the Form, deleting it, or moving it, etc.

Placing a Control Element on the Form:

• You can place any control element on the Form using one of these two methods:
• Double-click the required tool from the Toolbox; it will then appear in the upper left corner of the window, and you can modify its position on the window later.
• Click the required tool from the Toolbox, move to the Form, click the mouse where you want to place it on the Form, and draw the tool to the desired size.

Selecting a Control or Control Elements:

• You need to select the control element to deal with it in order to change its size, delete it, or change its properties.
• It is selected with a single click, and a set of handles appears around it.
• You can select several control elements together, at the same time, by activating the pointer tool from the Common Controls Toolbox, then move it to any point around these elements, press the mouse button, and move as if you are drawing a square around them.
• A virtual square appears while moving the pointer, and when this square includes the elements you want to select, lift your finger from the mouse and they will be selected.
• Another way to select is to click the first element you want to select, and then press the CTRL key from the keyboard, and keep pressing it, then click each element you want to select after that.
• The Form window can be selected by clicking it, and the selection handles will appear around it.

Moving Control Elements and Changing Their Size

• To change the size of a control element, click it to select it, then drag any of the handles around it.
• Push the handles towards the element to shrink its size, or drag them outwards to enlarge its size.
• To move an element, click it and keep pressing the left mouse button then drag it.
• When you reach the place where you want to put it, lift your finger from the mouse.
• You can select more than one element and move them together.

Deleting Control Element

• To delete a control element from the Form, select it first by clicking it with the mouse button, then press the Delete key from the keyboard.
• Another way is to click it with the right mouse button, and a context menu appears, select Delete from it.

Exercise

• Place two Label tools and two Textbox tools next to them, and below them place two Button command buttons, as shown in the following figure.
• Try moving the Label tools so that each one is next to a Textbox tool.
• Try deleting one of the Button buttons that have been placed.

Element Properties

• Each tool, and even the Form window itself, has a set of properties.
• Properties are a set of options used to control the appearance and behavior of the object.
• For example, concerning the properties used to control the appearance of a tool like (TextBox), Font.
  • The font property to determine the font type and size.
  • The color property (ForeColor) to control the color of the text in the box.
• Also the (TextBox) has the Multiline property meaning multiple lines.
• This property is to control whether the text box when writing accepts more than one line or not.

Adjusting or Changing Properties

• Control elements in general, or even the Form itself, have default values for the properties.
• For example, when you place Textbox, the text color in it is black, and the font size is (8).
• You can change these properties to the values you want, and you can adjust the properties in one of two ways:
  • Adjusting the properties during program design using the Properties window.
  • Adjusting the properties during program running using the programming commands.
• First: Adjusting the properties during the program design
  • If the Properties window does not appear in front of you, press the F4 key from the keyboard, or open the (View) list and choose from it (Properties Window).
  • Remember that to adjust the properties of any object, you must select this object first, then move to the Properties box.
• In the previous exercise, select any tool of the tools that were placed on the Form, and let it be one of the existing buttons, and then move to the properties box until we learn about its components and how to deal with it.

The structure of the properties window

• Object List: A box displays the name and type of the selected object.
• By clicking on the arrow key of this box, The list of all of the tools present on the "form" will appear as well as this "form's" name itself.
• Notice that the object's name and type is shown.
  • Where the Type is the last object in the box, where the object stems from the tree of objects.
• View Option Menu: The properties can be viewed by using the characters (A- Z) or can be displayed in groups.

List Of The Attributes (property)

• The names of the available attributes for the selected object,some properties are followed by a (+) which means that the property is a set of properties of the same type.
• By touching the (+) sign a list of its sub- properties will appear with the (+) switching to a (-), conversely if you touch the (-) sigh the menu will disappear.

The Assigned Value

• Inside the Assigned Value side a value assigned to each property will be shown.
• Generally the values that can be assigned to the attribute are shown in the list when it's opened.

Explanation Of The Assigned Values

• If you touch any property on the 'Properties' side a little explanation on how to use the property will be shown on the properties box.
• In the pervious assignment learned the process of putting tools on the program's window (form).
• However the view of the window isn't conveying the right meaning for its usage.
• Therefore the attributes have to be altered for its usage.

Practical usage scenario.

• How was the attributes of the tools on the first picture arranged as the tools on the second picture.
• In essence every alteration that was done was for one attribute in each tool.
• The name of this attribute is in it's position it is used to specify the object's shown name.
• In essence;
  • Mark the form window then shift to the 'attributes' pane , on 'text' attribute press the sentence "fill in the username".
  • Afterwards tap the sentence ' Enter ' from the keyboard.
  • Look at the section, inside the panel the shown sentence has altered based on what you wrote on the attributes side.
• Mark the side as 'Label' and shift over to the 'attributes' window after that on the text attribute type in the phrase (name).
  • Afterwards tap the enter sign on from the keyboard, right after touch the side which you will see that the words that was marked has been altered.
• Can you now alter words that show on the box, type out the side and the button by way of choosing it from a 'box' writing inside the attributes area to have the windows that has been fully copied.

Shared Properties

• As we mentioned earlier, each tool has a set of properties, some are unique and others are shared.
• Here, we will review some of the shared properties because their usage is the same for all tools that have this property.

The property of text

• If You are viewing the qualities section according to the alphabetical order.
• Search for the qualities section as you are browsing the qualities section according to order of the qualities.
• It's in the meeting spot used for teaching.

The character as we studied to alter the address of device or of marking the text

• Which is inside in the part

Shades attributes.

• It's the characteristic.
  • This of front (ForeColor): Used by a given shading with the writing or by other, mean the writing shades of front.
  • As for the shades device also shade background: Used to give- and also shade machine Self also Shades background.

If you are representing the qualities is group search

• for the two quality in the also meeting spot, shades.

As each the the from qualities.

• It turns out clear, can shading of to.
  • from the shading.

System

• for also the for the also can select with in the device, list,

Web

• Can create special, shades that with in the device,.

Custom

• Used with in the site's web, or you can put special qualities of of the door device.

Enabled

• During your Windows programs encounter, have you ever noticed a button that is faded out (with a pale color in one of the windows, and there is no pressure impact appearing when clicking on it?!
• Such buttons are referred to as being non-operational (incapable of working), meaning that they appear in front of you.
• However you cannot use them.
• You can also control in your programs being designed whether the tool is valid for use.

Attributes for side with attribute that

• also it has the power for the attribute from door also the force door open, by, is used in that case with in the attribute and attribute if you choose the right it means with in that case power it ( Valid, door, and non, with power) you need with after implementing attribute with power while that.

Naming convention

• when creating a code on the programming list you're going to use a thing or changing a certain property on a certain object or even the "Form" itself.

• there has to a symbol that is easy that could be addressed that way, the symbols can be identified for that purpose/objective.

• these symbols can be reached or recognised while in the quality door, a "each tool in that case got, the main device will appear on the tool store for a instance"button it is called attribute.

• if an the main device (button) is established on the illustration then the object box also also because, the 2,3 box will be called name of them each with with numbers that way.

• In order to the avoid, getting the confused, there is a recommended of using the certain symbols for certain cases, such as:

  • btn = Button

  • txt = Textbox

  • lbl = Label

Editing Property's during deployment!

• It is possible to also edit the tools attributes properties during the running time.
• The way "visibility" works will have edit options on only at the time after starting it.
• There will be tool set which can be made alter from the data set such as, a "text box" there will be a special attribute on this set to be able to deploy and use it at runtime with. "Tool Name.Property Name = value"