Philadelphia University Faculty of Information Technology. Visual Programming. Using C# -Work Sheets-

Transcription

1 Philadelphia University Faculty of Information Technology Visual Programming Using C# -Work Sheets- Prepared by: Dareen Hamoudeh Eman Al Naji 2018

2 Work Sheet 1 Hello World! 1. Create a New Project, Name it Welcome. 2. Add a PictureBox and a Label. 3. Change the Title of the form to Hello 4. Change the Text of the Label to Hello World!. 5. Change the font of the label as following: a. Font size: 16 b. Font Style: Bold c. Font Color: Red 6. Import a picture into the PictureBox. 7. Run the Form.

3 Work Sheet 2 Form, Buttons and labels Properties Changing properties through properties window: 1. Change the following Form properties: a) Change the form title to worksheet1 (text). b) Set the Background color to blue (BackColor). c) Set the font color to red (ForeColor). d) Change e font style (Font) e) Set the form size to 300 x 300 (Size). f) Specify the Maximum form Size to be 500 x 500 (MaximumSize). g) Specify the Minimum form Size to be 100 x 100 (MinimumSize). 2. Place three Buttons on the form, and change their properties as follows: a) Change buttons titles to Ok, Exit, Disable (text). b) Change buttons names to Ok, Ex, Dis (Name). c) Set the buttons size to 50 x 50 (size). d) Set the location for the ok button to be 60,60. And the Exit button to be 150,60. e) Disable any button and notice the change (Enable). f) Set the visible property to be false for any button and notice the change (visible). 3. Drag a label on the form: a. Write the following text on it: welcome to project 1. b. Change the Autosize property to false. c. Change font style, color and alignment.

4 Changing properties at run time: Write the appropriate code to apply the following: a) Insert a button that changes the Form s background color. b) Insert a button that hides\shows the label. c) Disable button will disable the Hide button. d) The Ok button shows a welcome message. e) Exit button closes the form.

5 Work Sheet 3 Textboxes Properties and Exercises Changing properties through properties window: 4. Drag a Textbox to the current form, and change the following Form properties: h) Enable your textbox to contain several lines (Multiline) i) Show scrollbars in the textbox (ScrollBars). j) Enable your textbox to create a new line whenever you reach the border. (WordWrap). k) Add a default value to your textbox (Text). l) Change the font color in the textbox (forecolor) m) Forbid user to write in the textbox (Readonly) n) Forbid user access to the textbox (Enabled) o) Use your textbox for entering a password (PasswordChar) p) Use your textbox for entering a password, using the system symbol (UseSystemPasswordChar). q) Add other 3 textboxes. r) Change the TabIndex property for each textbox, so that the navigation between them will change.

6 Exercise 1: Create the following form: Add code that does the following: a) Change Title: Changes the title of the form according to the text entered in the textbox (title). b) Show/Hide: Shows and hides the label, the textbox and the button of the Title. c) Join: Joins the first name and last name inserted in the textboxes, and stores the results in Full Name. a. Use + operator b. Use AppendText Method. d) Go to Title: transfers the focus to Title Textbox e) Repeat the code written in Join button, so that it occurs in "Textchanged" event.

7 Exercise 2: Create the following form: Write code in the displayed buttons so that you create a simple calculator

8 Work Sheet 4 Group boxes and panels Group boxes and panels: are used to group and contain controls, when moving them all controls (inside them) moves. Create the following form that contains a group box and a panel. Notice the differences between them through the following properties: Group box Caption No Scrollbar Same border panel No caption Scrollbars Change border Exercise: Add a Button "Hide", in the form above, to hide the "Greetings GroupBox".

9 Create the following form: Work Sheet 5 Check boxes and Radio buttons 1. Study the following properties for check boxes: Text. Checked. Check state. 2. Study the following properties for Radio buttons: Text. Checked. 3. write code to do the following: 1. Activate the 4 checkboxes in the form, so that whenever a checkbox is checked, the corresponding property is applied, otherwise it becomes false.

10 2. Activate the 2 radio buttons, so that whenever the "Personal" is checked, the first panel is shown, and the other is hidden, and whenever the "Education" is checked, vice versa. 3. Add a button, "Reset", that changes the checkstate property of any chosen checkbox to "indeterminate". Exercise 1: Create the following form, but first add the six radio buttons without the groupboxes, and check their behavior. Question: can you choose "Arial" with "Bold" at the same time? - Now, add the group boxes and check the difference in the radio buttons behavior.

11 - Activate the radio buttons so that they change the size, name and style of the label font. - Check the behavior of the "Style" radio buttons, can you select "Bold" and "Italic" at the same time? - Activate the checkboxes, and note the difference.

12 Build the following form, where: Work Sheet 6 Message box and picture box 1. When the user clicks on the button, the following message box shows: 2. If the user clicks on the OK button, a label shows with you clicked the Ok button. 3. If the user clicks on the Cancel button, a label shows with you clicked the Cancel button. 4. Each time the user clicks on the picture box, the image changes.

13 Work Sheet 7 Mouse Events Create the following form, where: Label 2 Label 3 1. While the cursor moves over the image, the coordinates x and y for the curser position appear on the form. 2. When the user clicks on the image, the coordinates x and y for the curser position appear on the form. 3. When the cursor enters the text box, the font size increases, and when the cursor leaves the text box, the font size returns to its default size. 4. The text in label 2 will be changed to up, down or hover according to the event performed on the mouse.

14 5. The text in label 3 will be changed to left if the user clicked on the left mouse button, and to right if the user clicked on the right mouse button.

15 Work Sheet 8 Keyboard Events Work Sheet 7 Create the following form, where: We will study the following Keyboard Events: KeyEventArgs Events Properties Alt Ctrl Key Down Shift Key Up Keycode KeyData KeyValue KeyPressEventArgs Events Properties Key Press KeyChar

16 Work Sheet 9 NumericUpDown, ToolTip, and LinkLabel Create the following form, where: Textbox3 Label5 1. The value in the age textbox must be between 18 and 30 (numericupdown). 2. When the user chooses his age, the value will show in label5 too. 3. When the curser hovers over the age textbox, a note (using tooltip control) shows as shown in the picture. 4. The user can write his age in textbox3, the value will be stored in the numericupdown. 5. When the user clicks on Philadelphia link, the university website opens. 6. When the user clicks on calculator link, the calculator application opens. 7. When the user clicks on MS word link, the MS word application opens. 8. When the user clicks on Pictures link, the Pictures folder opens.

17 Work Sheet 10 Menus First: Create the following form, with the displayed menu: Discuss the following concepts: Menustrip Menuitem (Add, modify and delete) Separater Line Submenus Shortcuts (Using &) ShortCut property + ShowShortcut Righttoleft property Second: Create another form, with the following Menu

18 Add an ordinary label to the form, then Activate the displayed menu items as follows: A) Close Closes the form B) Red Changes the font color of the label into red C) Blue Changes the font color of the label into blue D) Green Changes the font color of the label into green E) Times New Roman Changes the font name of the label to "Times New Roman" F) Arial Changes the font name of the label to "Arial" G) Tahoma Changes the font name of the label to "Tahoma" H) Bold, Italic and Underline each changes the style of the label font Hint: Make them act like Checkboxes, working with properties (CheckOnClick and Checked)

19 Work Sheet 11 Multiple Forms 1. Create the following form: 2. Now create form2: To create another form on your project: Go to "Solution Explorer", right-click on your project name, and select this option.

20 Click New item, and the following screen will appear: Select "Windows Form", and you can change the form name if you like.

21 When you press add, a new form will be created, and opened in a designed tab, and displayed in the Solution Explorer. Now, only add a button in this new form 3. Add a third form, and add one button. "Cancel". 4. Return to Form1, and on button "Form2" call form2. private void button1_click(object sender, EventArgs e) { Form2 f2 = new Form2(); f2.show();

22 } 5. Activate "Cancel" button on Form2, so that it closes the form. 6. Return to Form1, and on button "Form3" call form3, and change the title of it as the user specifies in the textbox. In form3: public partial class Form3 : Form { public Form3(string title) { InitializeComponent(); this.text = title; } In form1: private void button2_click(object sender, EventArgs e) { Form3 f3 = new Form3(textBox1.Text); f3.show(); } 7. Activate the cancel button in Form3, to close the form. 8. Activate the Close button in Form1, to close the form. Notes: 1. You can call the same form several times, and opens it several times, because you are actually creating an object several times. 2. When you close the main form (which called the other forms), all forms are closed.

23 Work Sheet 12 ListBoxes First: Review listbox control item and its main properties, methods and default event. Create the following form, and add a Listbox with the following items in it: - Review the property SelectionMode and change its value (One, MultiSimple, MultiExtended) - Change the property Sorted into True, and check the effect. - Add two labels to the form. - In the first label, display the selecteditem (use the default event SelectedIndexChanged). - In the second label, display the selectedindex. (check its value when no items are selected) - Discuss the properties SelectedItems and SelectedIndecies. - If a user selects either C++ or C#, display a message "Welcome to C languages". (hint: use method GetSelected) - Add a button labeled "Count" and another label. When pressing the button, display number of items in the listbox in the new label.

24 Second: Practice several actions on the listbox. Create the following form: Activate the displayed buttons as follows: 1. Add: Adds the item entered in the textbox into the listbox. 2. Remove: Removes the selected item in the listbox (Ex: Change it to remove the written item in the textbox). 3. Clear List: Clears/removes all items in the listbox 4. Clear Selected: Removes the selection on items in the listbox.

25 Exercise 5: Create the following form: Activate the displayed buttons, so that: 1. > : moves the selected item from left listbox to the right one. 2. <: moves the selected item from right listbox to the left one 3. >>: moves all items from left listbox to the right one. 4. <<: moves all items from right listbox to the left one. Change the code in > and < buttons, so that they move the selected items.

26 Create the following form, where: Work Sheet 13 Combo box Study the following properties: Items Text. Dropdownstyle. SelectedItem SelectedIndex Exercise:

27 Create the following form that contains a ComboBox to choose between two group boxes: Add/Sub and Mul/Div as the following:

28 Work Sheet 14 List View, Image list 9. Create the following form: Study the following properties: Items View Columns MultiSelect LargeImageList SmallImageList SelectedItems subitems Count Study the following Methods: Items.Add() Subitems. Add() Items.Clear()

29 The following event (ItemSelectionChanged) is used to reach a selected item using the object (e): e.isselected e.item e.item.subitems 10. Add two Image Lists to the form, one for small images and name it small and the other for large images and name it large. For each imagelist, study the following properties : Images. Image size 11. Connecting the list view with the image lists: a) Now, for the list view, change the smallimagelist property to small, and largeimagelist property to large. b) For each item in the list view, change the image index.

30 Exercise: Create the following form

31 Work Sheet 15 TreeView Create the following form, and study the following: Properties: Nodes Check Boxes Image List Selected Node Checked FirstNode \ LastNode Parent. FullPath NextNode \ prevnode Text Name Tag Methods: Collapse()

32 Expand() ExpandAll() GetNodeCount() Add() Exercise:

33 Creating a Database in Visual Studio 2012 Record Field 1. Basic Database Concepts: a. A database: is a collection of related data, organized into entities called tables that are connected together by relationships. b. A Table: is a part of the database that contains related information about a certain entity (Students, Teachers, Faculties, etc.). A table consists of fields that represent the needed information. A certain data type should be specified for each field (e.g. StudentName "string or varchar", CreditHours "Int", etc.) c. Primary Key: A unique field, that shouldn't be repeated in any record, and shouldn't be null. StudentID StudentName Major Ahmad CS Ali CIS Mohammad MIS Maha SE 2. SQL (Structured Query Language): SQL: is a language used to manage databases. SQL is divided into two parts: a. DDL: Data Definition Language, which consists of statements used to create tables, fields, constraints, and other database objects. b. DML: Data Manipulation Language, which consists of statements that inserts, updates and deletes data into/from tables. 3. Basic DML Statements: a. Insert: used to insert records into table. Syntax: INSERT INTO table_name( column1, column2...columnn) VALUES ( value1, value2...valuen); Example: INSERT INTO Students( StudentID, StudentName, Major)

34 VALUES (1, "Ahmad", "CS"); b. Update: used to change data that is already inserted into the table. Syntax: UPDATE table_name SET column1 = value1, column2 = value2...columnn=valuen [ WHERE CONDITION ]; Example: UPDATE Students SET Major = "MIS" WHERE StudentID = 1; c. Delete: Deletes records from table according to certain conditions: Syntax: DELETE FROM table_name WHERE {CONDITION}; Example1: This statement deletes all records of students with majors "MIS" DELETE FROM Students WHERE Major = "MIS"; Example2: This statement deletes all records in table students. DELETE FROM Students;

35 4. Creating a local database in Visual Studio Note: This is a different way to create a local database, you can use it, or use the one explained in slides of Chapter5 - Create a new project, for example "DatabaseTest". Change the size of the form as desired. - To create the database, Add item to your project

36 The name of the created database - From "Data" category, choose "Service-based Database", make sure the extension of your database is ".mdf", then click "Add".

37 - Choose a database model, select "Dataset", then Next. - Retrieving database information, but of course we are creating an empty database at the beginning, so no information will be retrieved.

38

39 - Press Finish. - Check the "Solution Explorer", you will find the created database, and dataset.

40 - Now go to window, "Server Explorer". If it is not already displayed on the screen, you can get it from "View" menu.

41 - Notice that the database "Database1.mdf" is created, and below it, the objects that can be created within this database are displayed. Check "Tables" you will find it empty since we haven t created any tables yet. - To add a new table, right-click on tables, and select "Add New Table" - The table design tab will appear - Notice that a new table with name "Table" is created, with only one field called "Id" by default, and considered the primary key. - Of course you can change the name of this field, if you wish, and you can specify another field as a primary key.

42 - Rename the "Id" field into "Student_Id", make sure that the Data type is still int, and check the "Allow Nulls" is not checked because this is the primary key. - You can add other fields into your table as follows. - Suppose you want to specify another field as primary key, just right-click on it and choose "Set Primary Key". - If you want to remove the primary key from "Student_Id", also you should rignt-click it, and choose "Remove Primary Key" - Of course, you can delete any field by clicking the "Delete" option.

43 - Now, check the below section from the screen, you can find a script of code that is used to create the table you designed above. - From this section, you can change the name of your table, to "Students" for example. - To save this table into your database, don't use the regular "Save" or "Save as" commands/buttons, since they will only create a script file with the code. - To save your table into your database, press "Update"

44 - The following dialogue will be displayed - Press "Update Database" - In the "Data Tools Operations" window, messages will be displayed indicating that the database is updated, by creating the new table.

45 - To make sure that your table has been created, go to the "Server Explorer" window, and press "Refresh" to show the table. - Then you can view your table, with all the fields created in it.

46 - Now, the table is created, but you need to add new data in it. You will have to design your form, to display the data, and enable the user to manipulate (insert, update and delete) it. - Add labels and textboxes and a button to your form as follows. - Now, we need a control that is used to display the data in the table, we use "DataGridView", from "Data" category in the "ToolBox". - Add it to your form, as follows.

47 - Go to the small arrow, at the top of the datagridview, and go to "Choose data source", but when you open it, you won t be able to display the new database at the beginning. - To refresh your database, and retrieve the needed table, go to section "Data Source", if it is not displayed on your screen, you can get it from "View" menu.

48 - The Data Source window will appear as following. - Press the highlighted button to configure your dataset. - Which will display the following wizard:

49 - Check on Table "Students", which will automatically check all the fields in this table, and press "Finish"

50 - Now, return back to the "Data Source" window, and you will find your table with all its fields there. - Return back to the datagridview, and choose Data Source, and click on the required table.

51 En - The DataGridView will look as the following, after you have bind it with table "Students". - You can change the size (width) of each field, by changing this property from the property window for each column (field).

52 - This property sheet will be displayed, so that you can change the properties of the selected columns. - Select "StudentName" and go to its property sheet, choose width, and change it in to 200.

53 - Now, to activate the button "Add New Record", double-click to open the default eventhandler. - When you first view the code file, you will notice that an event-handler Form_Load, is automatically generated with the following code.

54 - This method "Fill", should fill the DataGridView, with the data already inserted into this table, i.e. it refreshes the data. - Before starting coding the button, don't forget to define the following libraries (namespaces) that should be used in your code. - Return to button1_click method, and start your code, by defining the connection string, which will describe how your project will be connected to the database. - Note: You can also get the connection string from the properties of the database file, from Data Source window, and send it to the SqlConnection constructor as a parameter. - The next step, you should define the SQL statement that you want to execute, which should be INSERT in this case. The statement is built as a string. In this statement you need to write down the table name, and the fields' names in correct spelling, so that no errors will be generated, copy the names from the properties of each of these objects. - Of course, you need to fill values in this INSERT statement, so you will use the values inserted by the user in the TextBoxes. - After you define the string, you need to send it to an sqlcommand, that should be executed to apply the insert, as follows.

55 - The next step, is to open the connection using method: cn.open(); Then execute the command using method: exesqlinsert.executenonquery(); - You can display a message to indicate to the user that your process is done successfully. - You can use the same "Fill" method used in Form_Load method, to refresh the DataGridView. this.studentstableadapter.fill(this.database1dataset.students); - Now, run your project, fill the textboxes with data, and press the button.

56 - When OK button is pressed in the message, a new record will be added to the table. - Try to add another record, with the Student Name written in Arabic Language, the result will be as follows:

57 - The visual studio will not identify the Arabic language in the DataGridView, to force it to identify it, write the letter 'N' before the field that you want the database to accept Arabic letters in it, in the INSERT statement. string sqlinsert = "INSERT INTO Students (Student_Id, StudentName, Major) values ("+textbox1.text+", N'"+textBox2.Text+"', '"+textbox3.text+"')"; - Finally, don't forget to close the connection when you finish by using cn.close(); - Now, suppose the user has entered wrong values into the table. For example, the student id is kept null, or the user duplicates the user id. Then the insert process will throw an exception (generate a runtime error). To avoid such an error, add the (try and catch) block as the following.

58 private void button1_click(object sender, EventArgs e) { SqlConnection cn = new SqlConnection(global::DatabaseTest.Properties.Settings.Default.Database1ConnectionString) ; try { string sqlinsert = "INSERT INTO Students (Student_Id, StudentName, Major) values (" + textbox1.text + ", N'" + textbox2.text + "', '" + textbox3.text + "')"; SqlCommand exesqlinsert = new SqlCommand(sqlInsert, cn); cn.open(); exesqlinsert.executenonquery(); MessageBox.Show("Add new record successfully!", "Message", MessageBoxButtons.OK, MessageBoxIcon.Information); this.studentstableadapter.fill(this.database1dataset.students); } catch (Exception ex) { MessageBox.Show(ex.Message, "Error Message", MessageBoxButtons.OK, MessageBoxIcon.Error); } } finally { cn.close(); } - Add the following buttons to the form:

59 The entire code will be as the following: private void Form1_Load(object sender, EventArgs e) { // TODO: This line of code loads data into the 'database1dataset.students' table. You can move, or remove it, as needed. this.studentstableadapter.fill(this.database1dataset.students); } private void button1_click(object sender, EventArgs e) // Add a new record { SqlConnection cn = new SqlConnection(global::DatabaseTest.Properties.Settings.Default.Database1ConnectionString) ; try { string sqlinsert = "INSERT INTO Students (Student_Id, StudentName, Major) values (" + textbox1.text + ", N'" + textbox2.text + "', '" + textbox3.text + "')"; SqlCommand exesqlinsert = new SqlCommand(sqlInsert, cn); cn.open(); exesqlinsert.executenonquery(); MessageBox.Show("Add new record successfully!", "Message", MessageBoxButtons.OK, MessageBoxIcon.Information); this.studentstableadapter.fill(this.database1dataset.students); } catch (Exception ex) { MessageBox.Show(ex.Message, "Error Message", MessageBoxButtons.OK, MessageBoxIcon.Error); } finally // this means, that this command should be executed at the end, either an exception was thrown or not. { cn.close(); } } private void button2_click(object sender, EventArgs e) // Update { SqlConnection cn = new SqlConnection(global::DatabaseTest.Properties.Settings.Default.Database1ConnectionString) ; try { string sqlupdate = "UPDATE Students SET StudentName = N'"+textBox2.Text+"', Major = '"+textbox3.text+"' WHERE Student_Id = "+textbox1.text; SqlCommand exesqlupdate = new SqlCommand(sqlUpdate, cn); cn.open();

60 exesqlupdate.executenonquery(); MessageBox.Show("Record updated successfully!", "Message", MessageBoxButtons.OK, MessageBoxIcon.Information); this.studentstableadapter.fill(this.database1dataset.students); } catch (Exception ex) { MessageBox.Show(ex.Message, "Error Message", MessageBoxButtons.OK, MessageBoxIcon.Error); } } finally { cn.close(); } private void button3_click(object sender, EventArgs e) //Delete { SqlConnection cn = new SqlConnection(global::DatabaseTest.Properties.Settings.Default.Database1ConnectionString) ; if (textbox1.text!= "") { try { string sqldelete = "DELETE FROM Students WHERE Student_Id = " + textbox1.text; SqlCommand exesqldelete = new SqlCommand(sqlDelete, cn); cn.open(); exesqldelete.executenonquery(); MessageBox.Show("Record Deleted successfully!", "Message", MessageBoxButtons.OK, MessageBoxIcon.Information); this.studentstableadapter.fill(this.database1dataset.students); } catch (Exception ex) { MessageBox.Show(ex.Message, "Error Message", MessageBoxButtons.OK, MessageBoxIcon.Error); } } finally { cn.close(); } else MessageBox.Show("A Student id should be entered, to delete the student", "Error", MessageBoxButtons.OK, MessageBoxIcon.Error); }

61 private void button4_click(object sender, EventArgs e) //Delete All { SqlConnection cn = new SqlConnection(global::DatabaseTest.Properties.Settings.Default.Database1ConnectionString) ; try { string sqldelete = "DELETE FROM Students"; SqlCommand exesqldelete = new SqlCommand(sqlDelete, cn); cn.open(); exesqldelete.executenonquery(); MessageBox.Show("All Records are deleted successfully!", "Message", MessageBoxButtons.OK, MessageBoxIcon.Information); this.studentstableadapter.fill(this.database1dataset.students); } catch (Exception ex) { MessageBox.Show(ex.Message, "Error Message", MessageBoxButtons.OK, MessageBoxIcon.Error); } } finally { cn.close(); } private void button5_click(object sender, EventArgs e)//refresh { this.studentstableadapter.fill(this.database1dataset.students); } Searching the data base: Suppose you need to search the database for a certain data according to the user entry in a textbox, and display the resulting data in the grid view, you have to do the following: In this case, you will need to create a special datatable to store the data resulted from the given query, and change the datasource of the datagridview, the following code will explain the steps: private void button5_click(object sender, EventArgs e) //search { try { con.open(); string selectstat = "select * from stu where name = '" + textbox4.text+"'"; SqlCommand cmd = new SqlCommand(selectStat, con); cmd.executenonquery();

62 } } DataTable dt = new DataTable(); SqlDataAdapter da = new SqlDataAdapter(cmd); da.fill(dt); datagridview1.datasource = dt; con.close(); // disp_data(); } catch (Exception ex) { MessageBox.Show(ex.Message); con.close(); } But, make sure to add the following statements in the other methods in your project (where you need to display all data in the original table in the datagridview) datagridview1.datasource = database1dataset.students;