4.5 Scratchpad Learning Activity

Overview

4.5 Scratchpad Learning Activity

In this lab you will be focusing on the WPF user interface and associating objects with window controls. Additionally, you will focus on event handlers and validation.

Work through the stories in order. Use the acceptance criteria to check each feature, and complete the nested tasks using the specified names, values, and scenarios.

If you want, you can follow along with the instructor-led lab videos
1.If you want, you can follow along with the instructor-led lab videos

4.5 Scratchpad Lab Walkthrough, Part 1 [12.29]

4.5 Scratchpad Lab Walkthrough, Part 1 [12.29]

4.5 Scratchpad Lab Walkthrough, Part 2 [18.29]

4.5 Scratchpad Lab Walkthrough, Part 2 [18.29]

4.5 Scratchpad Lab Walkthrough, Part 3 [15.46]

4.5 Scratchpad Lab Walkthrough, Part 3 [15.46]
A This scratchpad is a continuation of the 4.3 Scratchpad.
Create a user interface for the Scratchpad window.
Acceptance Criteria
Acceptance criteria
  • The window contains the named list and buttons shown in the reference.
  • The ListBox uses height 200, width 200, and margin 10, 20, 0, 0.
Instructions
2.Create a user interface for the Scratchpad window.
A Open the Toolbox by going to View > Toolbox.
B Drag a ListBox to the Window.
C With the ListBox selected, navigate to the Properties window and change the Name to peopleListBox.
Snip: ListBox Name for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: ListBox Name

The Properties window can be found by going to View > Properties.

D Change the ListBox's Height to 200, it's Width to 200 and it's Margin to "10, 20, 0, 0".
E Drag a Label onto the window. Make the name peopleListBoxLabel, the Margin "10, 0, 0, 0", and the Content "People in Airport".
F Drag a button to the window. Make the Name addPersonButton, the Margin "10, 225, 0, 0", and the Content "Add person"
G Your window should look like the image below.
Snip: User Interface for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: User Interface
Add functionality for a People list.
Acceptance Criteria
Acceptance criteria
  • The completed implementation satisfies this requirement: Define a list of type Person named people and instantiate it at the field level.
  • The completed implementation satisfies this requirement: Add a property of type IEnumerable<Person> named People and return the people list.
  • The completed implementation satisfies this requirement: Define a method named AddPerson that takes has an age parameter of type int and a firstName parameter of type string.
Instructions
3.Add functionality for a People list.
A In the Airport class:
1 Define a list of type Person named people and instantiate it at the field level.

You will need to add a reference to the People project and add a using.

2 Add a property of type IEnumerable<Person> named People and return the people list.

An IEnumerable is a "copy" of a list; it allows the list to be read but keeps it from being manipulated.

3 Define a method named AddPerson that takes has an age parameter of type int and a firstName parameter of type string.
4 In the AddPerson method:

Instantiate a new Person object named person.

Assign the person object's Age and FirstName properties using the parameters.

Add the person to the people list.

B In the MainWindow.cs, add a person that is 11 with the name "Suzi" and a person that is 23 named "Sam".
Show the people in the ListBox
Acceptance Criteria
Acceptance criteria
  • The completed implementation satisfies this requirement: Define a ToString method with an override that returns a string.
  • The completed implementation satisfies this requirement: Use string.Format to produce a readable result.
Instructions
4.Show the people in the ListBox
A In the MainWindow.cs after adding the people, paste the code below.
this.peopleListBox.ItemsSource = this.dfw.People;

Using ItemsSource with an IEnumerable binds the IEnumerable to this property so even if this code were to be put above the adding the people it would produce the same result.

B Run the application. Two Person objects should be shown in the ListBox.
C In the Person class, override the ToString method:
1 Define a ToString method with an override that returns a string.
2 Use string.Format to produce a readable result.
return string.Format("{0} ({1})", this.FirstName, this.Age);
D Run the application. Two readable people should be shown in the ListBox.
Snip: People for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: People
Add a person to the list using a button click.
Acceptance Criteria
Acceptance criteria
  • The completed implementation satisfies this requirement: Add a new person to the list that is 34 and has the first name "Bob".
  • The completed implementation satisfies this requirement: Assign the ItemsSource of the peopleListBox to null.
  • The completed implementation satisfies this requirement: Assign the ItemsSource of the peopleListBox to the People property.
Instructions
5.Add a person to the list using a button click.
A Select the 'Add person' button in the MainWindow.xaml.
B Navigate to the Properties window and select the Events tab (the lightning bolt).
C Double click the 'Click' event.
Snip: Click Event for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: Click Event

In VS 2017 click events that had camel-cased names would remain camel-cased. In 2019 the event handler is automatically capitalized.

D In the AddPersonButton_Click event handler:
1 Add a new person to the list that is 34 and has the first name "Bob".
2 Run the application and click the 'Add person' button. Nothing should happen. The ItemSource hasn't been refreshed.
3 Assign the ItemsSource of the peopleListBox to null.
4 Assign the ItemsSource of the peopleListBox to the People property.
5 Run the application and click 'Add person'. Bob should be added to the list.

Assigning the ItemsSource to null and then to the People IEnumerable again resets the binding to the updated list.

Add an additional window to the project.
Acceptance Criteria
Acceptance criteria
  • PersonWindow is added to the project and sized to 300 by 300.
  • The new window contains the person-entry controls required by the following tasks.
Instructions
6.Add an additional window to the project.
A Right-click the Scratchpad project and click Add... > Window...
B Select the Window (WPF), name it PersonWindow and click Add.
Snip: Add New Window for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: Add New Window
C Change the Height of the Window to 300 and the Width to 300.
D Show the Window:
1 In the AddPersonButton_Click event handler, define a Window type variable named window and assign it to a new PersonWindow object.
2 Call window.ShowDialog()

There is another method named Show() that also shows the window, but does not gain control of the application, allowing the user to have multiple windows open at a time. We don't want that functionality so we will use ShowDialog to ensure the user interacts with only one window at a time.

3 Run the application and click 'Add person'. The PersonWindow should pop up and you shouldn't be able to interact with the…

Run the application and click 'Add person'. The PersonWindow should pop up and you shouldn't be able to interact with the MainWindow until you close the PersonWindow.

Add a new person using the new window.
Acceptance Criteria
Acceptance criteria
  • Click Continue or press F5. Fred should be shown in the ListBox.
  • The completed implementation satisfies this requirement: Remove the line of code that adds Bob to the list.
  • The completed implementation satisfies this requirement: Set a breakpoint in the MainWindow, on the line that calls AddPerson.
Instructions
7.Add a new person using the new window.
A In the PersonWindow.xaml.cs constructor, add a Person type parameter named person.

You will need to add a using statement.

B In the AddPerson event handler:
1 Remove the line of code that adds Bob to the list.
2 Instantiate a new Person object named person before instantiating the PersonWindow.

You will need to add a using statement.

3 Pass the person object into the PersonWindow as an argument.
C In the PersonWindow.xaml.cs, define a Person field and in the constructor (before InitializeComponent), assign it to the…

In the PersonWindow.xaml.cs, define a Person field and in the constructor (before InitializeComponent), assign it to the person parameter.

D In the PersonWindow constructor after the call to InitializeComponent, assign the person object's FirstName property to…

In the PersonWindow constructor after the call to InitializeComponent, assign the person object's FirstName property to "Fred" and the Age property to 38.

E In the Airport class, write a method named AddPerson that has a parameter of type Person named person and in the method body…

In the Airport class, write a method named AddPerson that has a parameter of type Person named person and in the method body add that person to the people list.

This is called an overloaded method. You can have many methods of the same name with different parameters and functionality and decide which one to call.

F In the AddPerson event handler after the call to ShowDialog, call the AddPerson method and pass in the person object.
G Check Your Work:
1 Set a breakpoint in the MainWindow, on the line that calls AddPerson.
2 Start the application and click 'Add person' and close the window.
3 Note that the person object is Fred, but that we don't have an explicit return. This is because we are passing the reference…

Note that the person object is Fred, but that we don't have an explicit return. This is because we are passing the reference around and giving "permission" to the PersonWindow to modify the object.

Snip: Fred Object for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: Fred Object
4 Click Continue or press F5. Fred should be shown in the ListBox.
Use the PersonWindow to manipulate the Person object.
Acceptance Criteria
Acceptance criteria
  • Close the window. Fritz (10) should be added to the list of people.
  • The completed implementation satisfies this requirement: Change the Height of the PersonWindow to 150 and the Title to "Add Person".
  • The completed implementation satisfies this requirement: Add a Label to the Window with the following attributes:
Instructions
8.Use the PersonWindow to manipulate the Person object.
A Add controls to the PersonWindow.
1 Change the Height of the PersonWindow to 150 and the Title to "Add Person".
2 Add a Label to the Window with the following attributes:

x:Name = "ageLabel" Content="Age:" HorizontalAlignment="Left" Margin="10, 10, 0, 0" VerticalAlignment="Top"

3 Add a Label to the Window with the following attributes:

x:Name = "firstNameLabel" Content="First Name:" HorizontalAlignment="Left" Margin="10, 41, 0, 0" VerticalAlignment="Top"

4 Add a TextBox to the Window with the following attributes:

x:Name = "ageTextBox" HorizontalAlignment="Right" Height="23" Margin="0, 14, 10, 0" VerticalAlignment="Top" Width="180"

5 Add a TextBox to the Window with the following attributes:

x:Name = "firstNameTextBox" HorizontalAlignment="Right" Height="23" Margin="0, 41, 10, 0" VerticalAlignment="Top" Width="180"

6 Add a Button to the Window with the following attributes:

x:Name="okButton" Content="OK" HorizontalAlignment="Right" Margin="0, 0, 95, 5" VerticalAlignment="Bottom" Width="75"

7 Add a Button to the Window with the following attributes:

x:Name="cancelButton" Content="Cancel" HorizontalAlignment="Right" Margin="0, 0, 10, 5" VerticalAlignment="Bottom" Width="75"

8 Your PersonWindow should look like the image below:
Snip: PersonWindow for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: PersonWindow
B In the PersonWindow constructor:
1 Remove the lines of code that hardcode the Fred values.
2 Paste this code under InitializeComponent.
this.ageTextBox.Text = this.person.Age.ToString();

This code assigns the Text attribute of the ageTextBox to whatever the person object's Age property is as a string.

3 Repeat the previous step for the firstNameTextBox.
C Select the ageTextBox in the PersonWindow.xaml and add a LostFocus event to it.
Snip: LostFocus for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: LostFocus

This event fires when a user clicks in to the text box and then either tabs out or clicks out of it.

D Select the firstNameTextBox in the PersonWindow.xaml and add a LostFocus event to it.
E In the AgeTextBox_LostFocus event handler, paste the code below:
this.person.Age = int.Parse(this.ageTextBox.Text);

This line of code assigns the person field's Age property to the Text entered in to the TextBox as an int.

F In the FirstNameTextBox_LostFocus event handler, assign the person's FirstName property to the Text from the firstNameTextBox.
G Check Your Work:
1 Start the application and click 'Add person'.
2 Change the Age to 10 and the First Name to Fritz.
3 Close the window. Fritz (10) should be added to the list of people.
Add functionality to the OK and Cancel buttons.
Acceptance Criteria
Acceptance criteria
  • Click Cancel. Nothing should be added to the list.
  • Hit the ESC key. The window should close and nothing should be added to the list.
  • Enter an Age and a First Name and click OK. The window should close and the person should be added to the list.
  • Enter an Age and a First Name and press Enter. The window should close and the person should be added to the list.
Instructions
9.Add functionality to the OK and Cancel buttons.
A Click the OK button and navigate to Properties menu. Under the Common properties, select the ~IsDefault combo box.

This makes it so that when a user hits Enter this button is "clicked".

B Click the Cancel button and navigate to Properties menu. Under the Common properties, select the ~IsCancel combo box.

This makes it so that when a user hits ESC this button is "clicked".

C Give the OK button a Click event.
D In the OkButton_Click event, assign this.DialogResult to true.

DialogResult is a boolean determines what happened with the window. If the window was closed or canceled, DailongResult will be false. In our case we made it so that DialogResult is true if Enter is pressed or OK is clicked.

E In the MainWindow put the ShowDialog call in an if statement that checks if the return is true and the adding of the person…

In the MainWindow put the ShowDialog call in an if statement that checks if the return is true and the adding of the person and ListBox update in the body.

Snip: ShowDialog for 4.5 Scratchpad Learning Activity (NEW). Use the adjacent task instructions to identify the required controls, output, or debugger values.
Snip: ShowDialog

This logic statement tests if the opening and closing of the window was successful. If it was (the user pressed Enter or clicked OK) the condition will pass.

The return from ShowDialong is a nullable type meaning that there's potential for it to be null, which means we need to explicitly check if it's true.

F Check Your Work:
1 Start the application and click 'Add person'.
2 Click Cancel. Nothing should be added to the list.
3 Click 'Add person'.
4 Hit the ESC key. The window should close and nothing should be added to the list.
5 Click 'Add person'.
6 Enter an Age and a First Name and click OK. The window should close and the person should be added to the list.
7 Click 'Add person'.
8 Enter an Age and a First Name and press Enter. The window should close and the person should be added to the list.
Submit a zipped Visual Studio solution after completing the following:
10.Submit a zipped Visual Studio solution after completing the following:
A Make the code StyleCop compliant.
B Remove all bin and obj folders from the entire solution.
Completion review
11.Review the feature acceptance criteria
A Confirm the required results

Return to each story and verify its acceptance criteria. Preserve the submission format and destination stated in the activity; a reading, setup guide, lab, video demonstration, and oral final may require different evidence.

Create a user interface for the Scratchpad window. Add functionality for a People list. Show the people in the ListBox Add a person to the list using a button click. Add an additional window to the project. Add a new person using the new window. Use the PersonWindow to manipulate the Person object. Add functionality to the OK and Cancel buttons.