11.3 Assignment

Overview

11.3 Assignment

Dynamic UI Generation

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.

Interpret display metadata

Acceptance Criteria

Acceptance criteria

GetControlDescription uses the configured description and falls back to the member name.
GetControlType returns the configured type or None.
HasControl identifies members carrying the control attribute.

Instructions

1.Use your 11.2 end code as the starting code for this assignment.

A Use your 11.2 end code as the starting code for this assignment.

Generate labeled controls for product properties

Acceptance Criteria

Acceptance criteria

The property grid has the specified two columns, widths, row sizing, and margins.
Each supported ControlType creates and binds the required control; None produces no editable control.
Labels occupy column 0 and their controls occupy column 1.
On load, the view inspects DataContext properties and creates the annotated controls.

Instructions

3.Dynamically generate the UI for products.

The EntityView will be a user control which is a reusable wpf element. You can place this element and reuse it like you would a button or a listbox. You will put the code that dynamically generates UI for an object in this user control.

A Create a new UserControl named EntityView.

Class Diagram: Class EntityView; Members and relationships are shown in the editable reference; unrelated members may be omitted. — Class Diagram: Class EntityView

B Write BuildLabeledControl:

BuildLabeledControl takes a propertyInfo object and creates a control for the property based on the ControlType of its EntityControlAttribute.

1 Instantiate a new variable of type Grid. Assign the following properties:

Width = 270 Height = 23 Margin = new Thickness(0, 0, 15, 5)

2 Define and instantiate two ColumnDefinition objects. Assign the Width of the first one to new GridLength(120) and the Width…

Define and instantiate two ColumnDefinition objects. Assign the Width of the first one to new GridLength(120) and the Width of the second one to new GridLength(150).

3 Add the two column definitions to the grid's ColumnDefinitions list.

4 Call DisplayUtil's GetControlType passing in the propertyInfo parameter. Store the result in a variable named controlType.

5 Write a switch statement that switches on the controlType:

Write cases for each of the ControlTypes in the ControlType enum.

For ControlType.None and the default case do nothing and break.

For each of the other cases, instantiate a new type of each of the corresponding control. Call Grid.SetColumn passing in the control and 2. Then, add the control to the grid variable's Children.

case ControlType.TextBox:
TextBox textBox = new TextBox();
Grid.SetColumn(textBox, 2);
grid.Children.Add(textBox);
break;

For the ComboBox control, after instantiating a new combo box, assign the combo box's ItemsSource to a call to Enum.GetValues and pass in the propertyInfo's PropertyType.

For the Label control, use a TextBox for the control. Set its IsEnabled to false.

6 After the switch statement, define and instantiate a variable of type RowDefinition. Set its Height to GridLength.Auto.

7 Add the RowDefinition to the propertyGrid's RowDefinitions.

8 Call Grid.SetRow passing in the grid variable and the count of the propertyGrid's RowDefinitions - 1.

9 Define and instantiate a variable of type Label. Assign its content to a call to DisplayUtil's GetControlDescription. Pass…

Define and instantiate a variable of type Label. Assign its content to a call to DisplayUtil's GetControlDescription. Pass int he propertyInfo.

10 Call Grid.SetColumn passing in the label and 0. Add it to the grid's Children.

11 Add the grid to the propertyGrid's Children.

C Create an event handler for the EntityView's Loaded event.

1 In the EntityView's xaml, click on the UserControl to see its properties. In the event handlers section, double click the…

In the EntityView's xaml, click on the UserControl to see its properties. In the event handlers section, double click the box next to the Loaded event to add an event handler.

2 In the new UserControl_Loaded event handler, assign the propertyGrid field to a new instance of a Grid.

3 Assign the EntityView's Content to the propertyGrid.

4 Get the properties of the type of the EntityView's DataContext and store it in a variable.

PropertyInfo[] properties = this.DataContext.GetType().GetProperties();

5 Looping through each PropertyInfo in the properties array:

Check if the property has a control by calling DisplayUtil's HasControl. If it does, call BuildLabeledControl and pass in the property.

Open a selected product in its generated editor

Acceptance Criteria

Acceptance criteria

EntityWindow initializes its components and receives the supplied object as DataContext.
MainWindow creates an instance of the selected product type and opens its entity dialog.
The dialog displays the controls corresponding to that product’s attributes.

Instructions

4.Create the EntityWindow.

A Add a new window named EntityWindow to the project.

B Add a parameter of type object to the EntityWindow's constructor. In the constructor, assign the window's DataContext to the…

Add a parameter of type object to the EntityWindow's constructor. In the constructor, assign the window's DataContext to the passed in object after initializing the component.

C In the EntityWindow's xaml, in between the grid tags, add the following line:

<local:EntityView Height="225" Width="400"/>

5.Update the MainWindow.

A Remove the two list boxes and their event handlers.

B Add a combo box named productComboBox and button named viewProductButton to the MainWindow. Add an event handler for the…

Add a combo box named productComboBox and button named viewProductButton to the MainWindow. Add an event handler for the viewProductButton's click event.

C In the Window_Loaded event handler, remove all the existing code. Add code that will populate the productComboBox's items…

In the Window_Loaded event handler, remove all the existing code. Add code that will populate the productComboBox's items with the different types of products.

D In the viewProductButton_Click event handler:

1 Get the selected item from the combo box and store it as a type in a variable.

2 Call Activator.CreateInstance and pass in the selected type. Store the result in a variable.

3 Define and instantiate an EntityWindow variable. Pass in the object from the previous step to the constructor.

4 Show the EntityWindow.

E Check your work:

1 Pick one of the types from the combo box and click on the view product button. A new window should pop up with neatly lined…

Pick one of the types from the combo box and click on the view product button. A new window should pop up with neatly lined up controls for each of the selected product's properties.

2 The brand combo box should be filled with options for all of the brands.

3 The controls for the properties should be blank since none of the properties have values.

4 Test each product and ensure each one populates a window accordingly.

Completion review

6.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.

Interpret display metadata Generate labeled controls for product properties Open a selected product in its generated editor