1. Although we can start a new solution from Blend, we'll let Visual Studio create the solution for us. The main reason is that we'll be using services later on in this sample and working with services is easier if the hosting site is an ASP.NET web application. Adding an ASP.NET web application is possible from Visual Studio, but not from Blend. Therefore, open Visual Studio 2010 and create a new Silverlight solution. Name it SilverlightHotelBrowser and make sure to select ASP.NET Web Application Project as the hosting website.

2. With the solution created in Visual Studio, right-click on one of the XAML files in the Silverlight project. In the context menu, select Open in Expression Blend... as shown in the following screenshot:

3. Expression Blend will open up and its workspace will be shown. The following is a screenshot of the interface containing some named references:

The following table describes some of the most important items on the Blend workspace:

4. Now that we know our way around the designer, we can get creative. We'll start with MainPage.xaml and split the main Grid (LayoutRoot) into two rows. Instead of writing the XAML code for this, we'll do this in the designer. Click on the icon on the top left of the user control in the designer so that the Grid will be in the Grid layout mode. This can be seen in the following screenshot:

5. Now, click on the left bar next to the user control to add a row. It's possible to change the height of the created row by dragging the handle. The following screenshot shows a row added to the Grid::

6. Select the ComboBox in the Assets window. Use the search function in this window to find it more quickly. On the designer, drag to create an instance of the ComboBox and place it on the top row that was just created. This can be seen in the next screenshot:

7. In the Properties window, give this ComboBox the name HotelComboBox and set the DisplayMemberPath property to Name. In the following screenshot, note that we are making use of the Search functionality within the Properties window. Simply enter part of the name of the property you are looking for (here displ) and Blend will filter the available properties.

8. With the ComboBox still selected in the Properties window, change to the Events view (top arrow in the next screenshot). In the list of events, double-click on the SelectionChanged event, so Blend will create an event handler (bottom arrow in the next screenshot).

9. Let's now move back to the Design view of MainPage.xaml. Select the Grid item in the Toolbox. In the bottom cell of the LayoutRoot (the main grid control) drag to create a nested grid. Create four rows and two columns using the same technique as before. Columns are created quite logically by clicking on the top bar of the control. The result is shown in the following screenshot:

10. With this Grid still selected, change the name to HotelDetailGrid in the Properties window.

11. In each of the cells, drag a TextBlock from the ToolBox. For the TextBlock controls in the first column, change the Text property as shown in the following screenshot. Don't change the Text property of the controls in the second column; we'll look at these in the coming steps.

12. Let's now change the background color of the LayoutRoot grid. To do this, select the LayoutRoot node in the Objects and Timeline window and in the Properties window, change the background by selecting a different color in the editor.

13. InChapter 2, we'll look at how we can make data binding in Blend easier. As of now, we'll just type the XAML code from Blend. In the top-right corner of the Design Surface, select either the Split view or the XAML view. Blend shows us the XAML code that it created in the background. Search for the TextBlock controls in the second column of the HotelDetailGrid and change it as shown in the following code. Note that the generated code might not always be exactly the same as values such as Margin could be different.

<TextBlock
Margin="49,8,40,8"
Grid.Column="1"
Text="{Binding Name}"
TextWrapping="Wrap"/>
<TextBlock
Margin="49,8,40,8"
Grid.Column="1"
Grid.Row="1"
Text="{Binding Location}"
TextWrapping="Wrap"/>
<TextBlock
Margin="49,8,40,8"
Grid.Column="1"
Grid.Row="2"
Text="{Binding Country}"
TextWrapping="Wrap"/>
<TextBlock
Margin="49,8,40,8"
Grid.Column="1"
Grid.Row="3"
Text="{Binding Price}"
TextWrapping="Wrap"/>

14. The workflow between Blend and Visual Studio allows us to jump to Visual Studio for the tasks we can't achieve in Blend, for example, adding a WCF service and referencing it in the Silverlight project. In the Projects window, right-click on a file or a project and select Edit in Visual Studio. If Visual Studio is still open, it will reactivate. If not, a new instance will get launched with our solution.

15. In the website that was created with the project initialization (SilverlightHotelBrowser.Web), we need to have a service that will return the hotel information. A hotel is represented by an instance of the Hotel class as shown in the following code:

[DataContract]
public class Hotel
{
[DataMember]
public string Name { get; set; }
[DataMember]
public string Location { get; set; }
[DataMember]
public string Country { get; set; }
[DataMember]
public double Price { get; set; }
}

16. Of course, we need to add the service as well. To do this, add a Silverlight-enabled WCF service called HotelService. Replace the DoWork sample method with the following code:

[OperationContract]
public List<Hotel> GetHotels()
{
return new List<Hotel>
{
new Hotel
{
Name = "Brussels Hotel",
Price = 100,
Location = "Brussels",
Country = "Belgium"
},
new Hotel
{
Name = "London Hotel",
Price = 200,
Location = "London",
Country = "United Kingdom"
},
new Hotel
{
Name = "Paris Hotel",
Price = 150,
Location = "Paris",
Country = "France"
},
new Hotel
{
Name = "New York Hotel",
Price = 230,
Location = "New York",
Country = "USA"
}
};
}

17. Perform a build of the project so that the service is built and is ready to be referenced by the Silverlight application.

18. In the Silverlight project, add a service reference by right-clicking on the project and selecting Add Service Reference.... Click on the Discover button and the service should be found. Set the namespace to HotelService.

19. In the MainPage.xaml.cs, add the following code to load the hotels in the ComboBox control:

public MainPage()
{
InitializeComponent();
HotelService.HotelServiceClient proxy = new SilverlightHotelBrowser.HotelService.HotelServiceClient();
proxy.GetHotelsCompleted += new EventHandler<SilverlightHotelBrowser.HotelService. GetHotelsCompletedEventArgs>(proxy_GetHotelsCompleted);
proxy.GetHotelsAsync();
}
void proxy_GetHotelsCompleted(object sender, SilverlightHotelBrowser.HotelService. GetHotelsCompletedEventArgs e)
{
HotelComboBox.ItemsSource = e.Result;
}

20. In the SelectionChanged event handler of the ComboBox, add the following code to load the details of a hotel once the user selects a different option:

private void HotelComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
HotelDetailGrid.DataContext = (sender as ComboBox).SelectedItem as HotelService.Hotel;
}

21. Build and run the application in Visual Studio.