Microsoft Silverlight 4 Data and Services Cookbook

1. We need to make sure we install Visual Web Developer Express 2010 (available for free at http://www.microsoft.com/express/downloads/) or Visual Studio 2010 (trial version available at http://www.microsoft.com/visualstudio/en-us/download).

2. Go to http://www.silverlight.net/getstarted/ to download and install the Silverlight 4 Tools for Visual Studio 2010. Open Visual Studio 2010 after installation. Visual Studio 2010 ships with Silverlight 3 templates installed out of the box, the tools add support for version 4.

3. Go to http://www.microsoft.com/expression/ to download and install Blend 4.

1. Open Visual Studio 2010 with the Silverlight 4 tools installed. Once inside the Integrated Development Environment (IDE), go to File | New | Project.... In the New Project dialog that appears, select the Silverlight node under Visual C# and select Silverlight Application. Name the application as SilverlightHotelBrowser and click the OK button. In the dialog that appears as shown in the next screenshot, select ASP.NET Web Application Project as the type of web project that will be used to host the Silverlight application. Also, make sure that Silverlight 4 is selected as the target version of Silverlight 4.

2. After Visual Studio has finished executing the project template, two projects are created in the solution: the Silverlight project and a web application project that is responsible for hosting the Silverlight content. The created solution structure can be seen in the following screenshot:

3. Our service will return the hotel information. A hotel can be represented by an instance of the Hotel class. This class should be included in the web project—SilverlightHotelBrowser.Web.

There are a few things to note about this class:

The following code defines this class:

[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; }
}

4. We'll now add a WCF service to the web project as well. Right-click on SilverlightHotelBrowser.Web and select Add | New Item.... Add a Silverlight-enabled WCF Service by selecting the Silverlight node under Visual C# and name it as HotelService. Click the Add button. Two files are added, namely, HotelService.svc and HotelService.svc.cs.

5. In this service class, we can now add a method that returns a hardcoded list of hotels. Remove the DoWork method and replace it with the following code:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class HotelService
{
[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"
}
};
}
}

Note the attributes that have been used in this class. The ServiceContract attribute specifies that the class contains a service contract that defi nes what functionality the service exposes. The OperationContract attribute is added to operations which can be invoked by clients on the service. This effectively means that if you add methods to the service without this attribute, it can't be invoked from a client

6. Now we'll build the solution and if no errors are encountered, we're ready for takeoff—takeoff for writing Silverlight code.

Let's first make the service known to the Silverlight application. Right-click on the Silverlight application and select Add Service Reference.... In the dialog box that appears, as shown in the following screenshot, click on Discover and select your service. As it is in the same solution, the service will appear. Enter HotelService in the Namespace field.

Click on the OK button to confirm. The service is now usable from the Silverlight application.

7. The UI was shown earlier and is quite easy. The XAML code for the Grid named LayoutRoot inside the MainPage.xaml file is as follows:

<Grid x:Name="LayoutRoot" Width="400" Height="300" Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<ComboBox x:Name="HotelComboBox" Width="250" SelectionChanged="HotelComboBox_SelectionChanged" DisplayMemberPath="Name" VerticalAlignment="Center">
</ComboBox>
<Grid x:Name="HotelDetailGrid" Grid.Row="1" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="NameTextBlock" Grid.Row="0" Grid.Column="0" FontWeight="Bold" Text="Name: " HorizontalAlignment="Right">
</TextBlock>
<TextBlock x:Name="NameValueTextBlock" Grid.Row="0" Grid.Column="1" Text="{Binding Name}"> </TextBlock>
<TextBlock x:Name="LocationTextBlock" Grid.Row="1" Grid.Column="0" FontWeight="Bold" Text="Location: " HorizontalAlignment="Right">
</TextBlock>
<TextBlock x:Name="LocationValueTextBlock" Grid.Row="1" Grid.Column="1" Text="{Binding Location}">
</TextBlock>
<TextBlock x:Name="CountryTextBlock" Grid.Row="2" Grid.Column="0" FontWeight="Bold" Text="Country: " HorizontalAlignment="Right">
</TextBlock>
<TextBlock x:Name="CountryValueTextBlock" Grid.Row="2" Grid.Column="1" Text="{Binding Country}">
</TextBlock>
<TextBlock x:Name="PriceTextBlock" Grid.Row="3" Grid.Column="0" FontWeight="Bold" Text="Price: " HorizontalAlignment="Right">
</TextBlock>
<TextBlock x:Name="PriceValueTextBlock" Grid.Row="3" Grid.Column="1" Text="{Binding Price}">
</TextBlock>
</Grid>
</Grid>

8. In the code-behind class, MainPage.xaml.cs, we connect to the service and the results are used in a data binding scenario. We won't focus here on what's actually happening with the service call and the data binding; all this is covered in detail later in this book.

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;
}
private void HotelComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
HotelDetailGrid.DataContext = (sender as ComboBox) .SelectedItem as HotelService.Hotel;
}

8. We will compile the solution again and then press the F5 button. The application should now run, allowing us to select a hotel in the ComboBox. Each selection change will trigger an event that shows the details of the selected item using data binding.

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.

1. Using TFS source control with a Silverlight application in Visual Studio is exactly the same as using it with any other type of Visual Studio project. Team Explorer is used for this purpose and this is automatically installed out of the box with Visual Studio 2010. (For Visual Studio 2008, it has to be separately installed from http://www.microsoft.com/downloads/details.aspx? FamilyID=0ed12659-3d41-4420-bbb0-a46e51bfca86&DisplayLang=en.)

2. Blend 4 also supports source control out of the box. However, for Blend 3, TFS update KB967483 must be downloaded and installed from http://code.msdn.microsoft.com/KB967483. This update enables TFS source control for Expression Blend 3.

3. Once these are installed, we can use TFS source control from within Blend for any solution bound to the TFS source control. Right-click on any file in the Solution Explorer window to view the source control options just as we would do in Visual Studio's Solution Explorer window. We can now check out, check in, and merge files from Expression Blend.

1. We must make sure that we have the correct permissions on our Team Foundation Server to handle the tasks we need to do. We need different permissions to (for example) create projects than to check out files. Have a look at this MSDN article to learn how to set these permissions: http://msdn.microsoft.com/en-us/library/ms252587.aspx.

2. Next, we'll need to connect to TFS using Team Explorer. Have a look at this MSDN article to learn how to do that: http://msdn.microsoft.com/en-us/library/ms181474.aspx.

3. We'll now need to create a workspace on our machine. We can look at the workspace as a local folder containing copies of the source-controlled files on the TFS. For more information, have a look at this MSDN article: http://msdn.microsoft.com/en-us/library/ms181384.aspx.

4. After we've created a local workspace, we can download the files from the TFS to that local folder. More information about this can be found at http://msdn.microsoft.com/en-us/library/ms181385.aspx.

5. We're now able to open our source-controlled solution in Blend and/or Visual Studio and check out files, merge files, add projects, and so on depending on the permissions.

1. We'll use the DeployHelloWorld application to demonstrate deployment, which is available with the code downloads in the Chapter01/DeployHelloWorld folder. Build the application and notice that Visual Studio has created a *.xap file in the ClientBin directory. This file, which is nothing more than a *.zip file but with another extension, contains the assembly (one or more) to which our Silverlight application was compiled, optional resources, and the AppManifest.xaml file.

2. While looking at the files created by default by Visual Studio in the web project, a sample HTML (DeployHelloWorldTestPage.html) and ASPX (DeployHelloWorldTestPage.aspx) page are created for us as shown in the following screenshot:

3. Both pages have an OBJECT tag included. One of the parameters is named as Source and it has a reference to the *.xap file in the ClientBin as shown in the following code. If we want to deploy the *.xap file to another location, we need to update this reference. We'll use the default as of now.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/DeployHelloWorld.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.41108.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.4 1108.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>

Note that the value of minRuntimeVersion may differ slightly because of different Silverlight version releases.

4. If using the HTML page, the following files need to be copied:

5. If using the ASPX page, we need to copy the following files:

6. We'll need to test the page in a browser. If it fails to load, check the MIME types served by the web server software. There should be *.xap and *.xaml in there. (They are specified as the data type in the OBJECT tag.)