Exercise 2: Creating Master-Detail Data Scaffolding, Making More Detailed Customizations

In this exercise, you will add some additional detail to the window. You will also provide a way for the user to navigate forward and backward through the listings. To help visualize the data a little better, you will also override one of the default templates and provide a visual indication if a listing is proceeding or not.

Task 1 – Adding a Listing Details Grid to the Window

1. For this exercise, you can continue to use the solution from Exercise 1 or open the begin solution located at\Ex02-CreatingMasterDetailDataScaffolding\begin\(Choosing the folder that matches the language of your preference.) You will need to build the solution (click Build | Build Solution) before the designer will show the WPF work done in Exercise 1.

2. If the Data Sources window is not show, click Data | Show Data Sources.

   Figure 9

   Viewings in Data Sources

3. Drag the Viewings Foreign Key table from under Listings in the Data Sources window onto the Window to make a master-details view. Note that the data sources window takes care of all the details of keeping the two views in sync, and creates a DataGrid with all your fields in different columns:

   Figure 10

   Adding the Viewings Into the Designer

Task 2 – Providing Forward and Back Buttons for Navigation

1. Drag 2 new Buttons onto the design surface from the toolbox
2. Set the Name of the first Button to forwardButton.

3. Set the Content property of the forwardButton to Forward.

   Figure 11

   Forward Button Properties

4. Double-click the forwardButton on the designer surface. Visual Studio will switch to code view and add a click handler for this button.

5. Insert the following code into this new click handler.

   (Code Snippet – WPF MasterDetail Lab – Ex2 ForwardClickHandler C#)

   C#

   private void forwardButton_Click(object sender, RoutedEventArgs e)

   FakePre-706a2a94c9f14edb83fe1486844b3301-445c8c75098e4ead950c4cf40c3abd52 CollectionViewSource cvs = (this.FindResource("listingsViewSource")) as CollectionViewSource; cvs.View.MoveCurrentToNext();FakePre-119cac1010a14b2c81f91841320a73af-87c3aad99af74855b52cbb8255a7082e

   (Code Snippet – WPF MasterDetail Lab – Ex2 ForwardClickHandler VB)

   Visual Basic

   Private Sub forwardButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles forwardButton.Click

   Dim cvs = TryCast(Me.FindResource("ListingsViewSource"), CollectionViewSource) cvs.View.MoveCurrentToNext()FakePre-afc6c06a8aa642c2a36b64a77b995823-362fddeffb6e4ed1896ad5c1e05dd9b3

6. Switch back to by right-clicking in the code editor and select View Designer.
7. Set the Name of the second Button to backButton.

8. Set the Content property of the backButton to Back.

   Figure 12

   Back Button Properties

9. Double-click the backButton on the designer surface. Visual Studio will switch to code view and add a click handler for this button.

10. Insert the following code into this new click handler.

    (Code Snippet – WPF MasterDetail Lab – Ex2 BackClickHandler C#)

    C#

    private void backButton_Click(object sender, RoutedEventArgs e)

    FakePre-450d98f275434467bcc416f28acaecd8-9248c7fded6e4205b152d4b37cdc9bc8 CollectionViewSource cvs = (this.FindResource("listingsViewSource")) as CollectionViewSource; cvs.View.MoveCurrentToPrevious();FakePre-13d94400539d4c74a857892f45817e32-acdd2b0585cd46e897242ca1742a780b

    (Code Snippet – WPF MasterDetail Lab – Ex2 BackClickHandler VB)

    Visual Basic

    Private Sub backButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles backButton.Click

    Dim cvs = TryCast(Me.FindResource("ListingsViewSource"), CollectionViewSource) cvs.View.MoveCurrentToPrevious()FakePre-9d21e49547e94d46b8a48ac9b9f0e74c-25a5a46cf434499a855caa033fc0054a

11. Click Debug | Start without Debugging (or press CTRL+F5) to run the app and note that you can page back and forth through your data set, seeing the details for each item as you select it.

Task 3 – Providing a Visualization for the Data in the Listings DataGrid

In this task, you will make a more detailed customization of the DataGrid you just created. The goal is to change one of the columns from showing CheckBox controls to showing a simple Red/Green traffic light style rectangle as an indicator. To do this, you will use a BooleanToBrushConverter already created in the project, to convert the Boolean value in a column to a Red or Green brush.

1. Select the DataGrid control on the design surface by clicking on it. Right-click the design surface and choose Document Outline.

   Figure 13

   DataGrid in Document Outline

2. Expand the DataGrid node in the Document Outline, and find the DataGridCheckBoxColumn (proceedingColumn) inside the Columns node. You will notice that the XAML editor highlights the related code.

   Figure 14

   DataGridCheckBoxColumn (proceedingColumn) in Document Outline

3. In the XAML editor, comment out the DataGridCheckBoxColumn and insert the following DataGridTemplateColumn.

   XAML

   <!-- <DataGridCheckBoxColumn Binding="{Binding Path=Proceeding}" 

   FakePre-f49d87742a4a43078fbbaaaf006592c2-bf6b11c073634b4daefd688cde795cd9<DataGridTemplateColumn Header="Proceeding" Width="SizeToHeader"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Rectangle /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn>

4. Place your cursor on the <Rectangle /> code and the Properties pane will show the properties for the Rectangle.

5. In the Properties window, use the Search field to find the Fill attribute.

   Figure 15

   Rectangle Fill Property

6. Click the small black square located right next to the word Fill. Click Apply Data Binding.

7. In the Data Binding window, click the Converter pane and select Southridge, BooleanToBrushConverter and Create New…

   Figure 16

   Adding BooleanToBrushConverter

8. Click OK in the Create Resource dialogue, keeping the default value for Key.

9. Type Proceeding in the Parameter field. This will tell the Converter which field to get the value from in the current Row.

   Figure 17

   BooleanToBrushConverter Parameter

10. Click Debug | Start without Debugging (or press CTRL+F5) and see your traffic lights in the proceeding column!

    Figure 18

    Running the Application

Next Step

Exercise 3: Creating and Using Resources