Silverlight

Step by step process to create simple Silverlight Application

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 SilverlightApplication 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 thehotel information. A hotel can be represented by an instance of the Hotel class. This class should be included in the web project—SilverlightApplication.Web.

There are a few things to note about this class:

This class has a DataContract attribute attached to it. This attribute is required to specify that this class can be serialized when sent over the wire to the client application.
Each property is attributed with the DataMember attribute. When adding this attribute to a property, we specify that this property is a part of the contract and that it should be included in the serialized response that will be sent to the client.

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 SilverlightApplication.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 defines 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 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 XAML code for the Grid named LayoutRoot inside the MainPage.xaml file is as follows:

<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

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

public MainPage()

{
InitializeComponent();
HotelService.HotelServiceClient proxy = new SilverlightApplication.HotelService.HotelServiceClient(); proxy.GetHotelsCompleted += new EventHandler <SilverlightApplication.HotelService. GetHotelsCompletedEventArgs> (proxy_GetHotelsCompleted);
proxy.GetHotelsAsync();

}
void proxy_GetHotelsCompleted(object sender, SilverlightApplication.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 as shown below.