In this tutorial, we will see how to pull images from the database and display them in a Silverlight DataGrid.We will make use of the Employees table in the Northwind database to display images. Since the focus of this article is to display images from the database in a Silverlight DataGrid, I will be binding the DataGrid with a custom List<> object and will be pulling only the images from the database using an Image Handler.

Step 2: Drag and drop a DataGrid from the toolbox. After setting up a few properties, the markup will look similar to the following:

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;

</UserControl>

public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
PopulateGrid();
}
private void PopulateGrid()
{
List<Employee> empList = new List<Employee>();
empList.Add(new Employee() {ID = 1,FName = "Mary",MName = "",
LName = "Shields",DOB = DateTime.Parse("12/11/1971"),Sex = 'F' });
empList.Add(new Employee() {ID = 2,FName = "John",MName =
"Matthew",LName="Jacobs",DOB=DateTime.Parse
("01/17/1961"),Sex ='M' });
empList.Add(new Employee() {ID = 3,FName = "Amber",MName = "Carl",
LName = "Agar", DOB = DateTime.Parse("12/23/1971"),Sex = 'F' });
empList.Add(new Employee() {ID = 4 FName = "Kathy",MName = "",
LName = "Berry", DOB = DateTime.Parse("11/15/1976"),Sex = 'F' });
empList.Add(new Employee() {ID = 5,FName = "Lenaldo",MName =
"Ashco",LName = "Bilton",DOB = DateTime.Parse("05/11/1978"),Sex = 'M'
});
empList.Add(new Employee() ID = 6,FName = "Karl",MName = "",
LName = "Buck",DOB = DateTime.Parse("03/7/1965"),Sex = 'M' });
empList.Add(new Employee() {ID = 7,FName = "Jim",MName = "",
LName = "Brown",DOB = DateTime.Parse("09/11/1972"),Sex = 'M' });
empList.Add(new Employee() {ID = 8,FName = "Jane",MName = "G",
LName = "Hooks",DOB = DateTime.Parse("12/11/1972"),Sex = 'F' });
empList.Add(new Employee() { ID = 9, FName = "Cindy", MName = "",
LName = "", DOB= DateTime.Parse("06/28/1964"), Sex = 'F' });
empList.Add(new Employee() {ID = 10,FName="Robert",MName ="Preston",
LName = "Fox",DOB = DateTime.Parse("01/11/1978"),Sex = 'M'
});
dGrid.ItemsSource = empList;
}
}
public class Employee
{
public int ID { get; set; }
public string FName { get; set; }
public string MName { get; set; }
public string LName { get; set; }
public DateTime DOB { get; set; }
public char Sex { get; set; }
}

Step 3: Since we are retrieving the images from the database, we would need a connection string to the db. Add the following connection string to your web.config

Step 4: We will be using an HttpHandler to pull images from the database. Handlers provide a lot of flexibility while accessing server-side resources. To create an Http handler, right click project DisplayImageInGrid.Web > Add New Item > Generic Handler > DisplayImageHandler.ashx. Add the following code to the handler.

The steps for retrieving images from database, using the handler are as follows:

1. The EmployeeID whose image is to be retrieved, is passed to the handler via query string. We use the Request.QueryString[“id”] to retrieve the EmployeeID(emp_id) from the handler url. The ID is then passed to the ‘ShowEmpImage()’ method where the image is fetched from the database using SqlDataReader and returned in a byte[] object.
2. We pass this byte[] to the ConvertToBitmap() function where we use the TypeConverter class to convert a byte array to bitmap.
3. The last step is to save the image to the page's output stream and indicate the image format as shown here convBmp.Save(context.Response.OutputStream, ImageFormat.Jpeg)

Note: Silverlight does not support .bmp images. For this reason, we set the ImageFormat to Jpeg while saving the image to the OutputStream.

Step 5: With the handler set to retrieve images, let us now see how to display this image in a Silverlight DataGrid. In order to do so, we will use a DataGridTemplateColumn to display the image. We will be using the ColumnCollection to gain control over the DataGrid's column-order, look & feel and data representation. Add the following markup in the Page.xaml

As you might have guessed, we will be displaying the image in the img1 control. We also use the ‘ImageFailed’ event to handle errors while displaying images.

What is left now is to pass the EmployeeID dynamically for each row and display the image for that respective EmployeeID. To achieve this requirement, I have used the DataGrid.LoadingRow event which enables you to make any necessary changes to a new row before it can be used.

Note: For simplicity sake, we have not hosted the service on IIS. we are using the server that comes built-in with Visual Studio 2008. The server automatically allocates a port number. If you would like to keep the port number fixed, Right click the project > select the ‘Web’ tab > Select the radiobutton ‘Specific port’ > I am using the port 7642. Build the Solution. If the protocol, path or the port number of the service differs from that of the Silverlight application, it is a Cross Domain call in Silverlight. You would need a clientaccesspolicy.xml kept in the root of the server where the service is hosted in order to make Cross Domain calls. Read more about it over here On running the application, we get the image displayed for each EmployeeID passed to the handler. A screenshot of the application with the images displayed in the DataGrid is as shown below:

Remember that this is not an optimized solution when you are loading several rows with images, at a single point of time. So use this approach carefully!