Exercise 1: Creating the Application’s Data Scaffolding, Making Basic Customizations

In this exercise, you will create the databinding scaffolding for your application, and display your first data. You will make some initial customizations of the data sources window’s output.

Task 1 – Adding a Database to the Project Using Data Sources

1. Navigate to Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
2. Select the File | Open | Project/Solution menu command. In the Open Project dialog, navigate to \Ex01-CreatingTheAppDataScaffolding\begin\(choosing the folder that matches the language of your preference) and select Southridge.sln file.
3. Open the Window1.xaml file by double-clicking on the file in the Solution Explorer.

4. Select the root window (be careful that you have the Window not the Grid selected – you can tell what is selected by checking the property browser window or the document outline window in Visual Studio). Use the Property Browser to set the Width of the window to 800 and the Height to 600.

   Figure 1

   Updating Window1 Height and Width- C#

   Figure 2

   Updating Window1 Height and Width- Visual Basic

5. Open the Data Sources window by clicking Data | Show Data Sources menu option.

6. Create a new Data Source by clicking the Add New Data Source hyperlink in the Data Sources window.

   Figure 3

   Data Sources

7. Choose the Data Source Type of Database. Click Next.
8. Choose DataSet as the Database Model and click Next.
9. Click New Connection… and choose the following options:
   1. Data source: Microsoft SQL Server Database File
   2. Database file name: \Assets\Southridge.mdf
   3. Log on to server: Use Windows Authentication
10. Click Next. Click Yes to copy the file to your local project.
11. Click Next, keeping the default connection string name.
12. On the Choose Your Database Objects screen:
    1. Under Tables | Listings, check MLS, Title, Price and PrimaryPhoto
    2. Check Tables | Neighborhoods
    3. Check Tables | Viewings
13. Click Finish.
14. You should now see the Data Sources window populated already with database schema. You will also see the related XSD strongly typed DataSet in the Solution Explorer.
15. Build the solution – you should see no build errors.

Task 2 – Using Data Sources to Add Data-Bound Controls to the Window

1. In the Data Sources window, click the Listings dropdown and select Details.

   Figure 4

   Listings Details

2. Drag and drop from the Listing dropdown onto Windows1.

3. Note that the Data-Bindings and Controls are created automatically. Inspect the XAML that was created for you and observe its relationship to the SouthridgeDataSet data source.

   Figure 5

   Listing Details in WPF Designer – C#

   Figure 6

   Listing Details in WPF Designer – Visual Basic

4. On the Design pane, delete the Primary Photo Label and Textbox.
5. Drag and drop and Image control from the Toolbox and place to the right of the details grid.

6. In the Data Sources window, expand the Listings table and then drag and drop the PrimaryPhoto field onto the Image control. This will “paint” the data binding information on to the control.

   Figure 7

   Adding an Image Control

7. Press CTRL+F5 to run the application. You should see data appearing from the first row in the database, and a picture showing.

   Figure 8

   Running the Application

Next Step

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