Display Images from Database in Windows Phone 7 (WP7) using WCF service

Abstract: The Windows Phone 7 (WP7) Developer Toolkit RTW provides an excellent mechanism to built Rich UX applications on mobile devices (phone). One of the interesting aspect of WP7 programming is that it provides the Silverlight platform for application development.

The Windows Phone 7 (WP7) Developer Toolkit RTW provides an excellent mechanism to built Rich UX applications on mobile devices (phone). One of the interesting aspect of WP7 programming is that it provides the Silverlight platform for application development. I am a great fan of Silverlight and WPF development and I am going to adopt a similar programming mechanism with WP7, for consuming WCF service and perform the data communication.

In this article, I have designed a WCF service which makes a call to a Database and reads data from the table. This table contains Images stored in binary form and through the WCF service, we make the byte array data available to the WP7 application.

I am using SQL Server 2008 and the Table schema is as below: The name of the table is ‘ImageEmployee’:

Creating a WCF Service

Step 1: Open VS2010 and create a blank solution, name it as ‘WP7_FIrstApp’. In the solution add a WCF service application, name it as ‘WCF_DataServiceApp’.

Step 2: Open IService1.cs and define the following Interface and DataContract:

C#

[ServiceContract]

publicinterfaceIService

{

[OperationContract]

ImageEmployee GetEmpByEmpNo(int EmpNo);

}

[DataContract]

publicclassImageEmployee

{

[DataMember]

publicint EmpNo { get; set; }

[DataMember]

publicstring EmpName { get; set; }

[DataMember]

publicdecimal Salary { get; set; }

[DataMember]

publicint DeptNo { get; set; }

[DataMember]

publicbyte[] EmpImage { get; set; }

}

VB.NET (Converted Code)

<ServiceContract>

PublicInterface IService

<OperationContract>

Function GetEmpByEmpNo(ByVal EmpNo AsInteger) As ImageEmployee

EndInterface

<DataContract>

PublicClass ImageEmployee

<DataMember>

PublicProperty EmpNo() AsInteger

<DataMember>

PublicProperty EmpName() AsString

<DataMember>

PublicProperty Salary() AsDecimal

<DataMember>

PublicProperty DeptNo() AsInteger

<DataMember>

PublicProperty EmpImage() AsByte()

EndClass

Step 3: Open Service1.Svc and implement the above service contract, ‘IService’ interface as shown below:

The above method makes a call to the database table ‘ImageEmployee’ and by comparing EmpNo, the record for the employee is returned.

Step 4: Build the service and publish it on IIS.

Creating Windows Phone (WP7) application

In this task, we will create a WP7 client application. I am using VS2010 and WP7 RTW development environment.

Step 1: In the solution created above, add a new WP7 application as shown below in the screenshot:

The template for ‘Silverlight for Windows Phone’ will appear after downloading WP7 Developer Toolkit RTW and installing it on your machines

Step 2: Since WP7 provides Silverlight development platform, you can design the UI using XAML. By default, the MainPage.Xaml provides Grid with name ‘LayoutRoot’ which contains StackPanel of name ‘TitlePanel’. The XAML elements in the StackPanel is as shown below:

Step 6: This converter class needs to be used in the MainPage.xaml. To do this open ‘MainPage.xaml’ and declare an object on the converter class in the resources of the Grid ‘ContentPanel’ as shown below:

<Grid.Resources>

<src:ImageConverter x:Key="imgConverter"></src:ImageConverter>

</Grid.Resources>

Step 7: Now bind the above object in the image element in MainPage.xaml as shown below:

Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet

Feedback - Leave us some adulation, criticism and everything in between!

I am very much pleased with the contents you have mentioned.I wanted to thank you for this great article!!

Thanks

Comment posted by
Bill
on Friday, November 5, 2010 1:13 PM

Did you forget a step? I am getting an error in Step 6 of the WP7 application stating that "src is an undeclared prefix".

Comment posted by
Bill
on Friday, November 5, 2010 1:17 PM

Also, I am getting the following error: "The type 'src:ImageConverter' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built."<br/><br/>ImageConverter is in the same project/namespace as MainPage, so I am a little confused as to why I would need an assembly reference.

Hi
I'm coding your VB version. First of all, the line
Implements IService
Public Function GetEmpByEmpNo(ByVal EmpNo As Integer) As ImageEmployee
is
Implements IService
Public Function GetEmpByEmpNo(ByVal EmpNo As Integer) As ImageEmployee Implements IService.GetEmpByEmpNo

When I right click on Service.svc and click on View on Explorer i'm getting an error

"Server error on Application /"

[ServiceActivationException:Service '/Service1.svc' can't be activated due to an exceptión during the compilation.
The exception message was : WCF_DataServiceApp.Service1 type can't be found supplied as an attribute value of Service on directive ServiceHost, or supplied on configuration item system.serviceModel/serviceHostingEnvironment/serviceActivations..]

Hi
I'm coding your VB version. First of all, the line
Implements IService
Public Function GetEmpByEmpNo(ByVal EmpNo As Integer) As ImageEmployee
is
Implements IService
Public Function GetEmpByEmpNo(ByVal EmpNo As Integer) As ImageEmployee Implements IService.GetEmpByEmpNo

When I right click on Service.svc and click on View on Explorer i'm getting an error

"Server error on Application /"

[ServiceActivationException:Service '/Service1.svc' can't be activated due to an exceptión during the compilation.
The exception message was : WCF_DataServiceApp.Service1 type can't be found supplied as an attribute value of Service on directive ServiceHost, or supplied on configuration item system.serviceModel/serviceHostingEnvironment/serviceActivations..]

I am getting the following error:
System.InvalidOperationException was unhandled
Message=Could not find default endpoint element that references contract 'ServiceReference1.IService1' in the ServiceModel client configuration section. This might be because no configuration file was found for your application, or because no endpoint element matching this contract could be found in the client element.
StackTrace:
at System.ServiceModel.DiagnosticUtility.ExceptionUtility.BuildMessage(Exception x)
at System.ServiceModel.DiagnosticUtility.ExceptionUtility.LogException(Exception x)
at System.ServiceModel.DiagnosticUtility.ExceptionUtility.ThrowHelperError(Exception e)
at System.ServiceModel.Description.ConfigLoader.LoadChannelBehaviors(ServiceEndpoint serviceEndpoint, String configurationName)
at System.ServiceModel.ChannelFactory.ApplyConfiguration(String configurationName)
at System.ServiceModel.ChannelFactory.InitializeEndpoint(String configurationName, EndpointAddress address)
at System.ServiceModel.ChannelFactory`1..ctor(String endpointConfigurationName, EndpointAddress remoteAddress)
at System.ServiceModel.ChannelFactory`1..ctor(String endpointConfigurationName)
at System.ServiceModel.EndpointTrait`1.CreateSimplexFactory()
at System.ServiceModel.EndpointTrait`1.CreateChannelFactory()
at System.ServiceModel.ClientBase`1.CreateChannelFactoryRef(EndpointTrait`1 endpointTrait)
at System.ServiceModel.ClientBase`1.InitializeChannelFactoryRef()
at System.ServiceModel.ClientBase`1..ctor()
at Cou.ServiceReference1.Service1Client..ctor()
at Cou.MainPage.MainPage_Loaded(Object sender, RoutedEventArgs e)
at System.Windows.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)

Comment posted by
Dibin dev
on Saturday, April 16, 2011 5:03 AM

i coding your c# version . i am getting an unspecified error when 'bitmap.SetSource(memmorystearm);'
If you have a solution for that please help me .

Comment posted by
ramu paideti
on Saturday, July 30, 2011 8:12 AM

Hi Mahesh,

Really this is very useful code for us.

For retrieving and display the image is we are using converter class.

Now my requirement is how to store the captured image/isolated storage image into the same database.

i.e how to insert a new record from windowsphone7.

Please send me the solution, really i required it as urgent one.

Thanks in advance.

Comment posted by
richie12200
on Saturday, August 20, 2011 2:13 AM

Hi can you sent the complete code for me??

Comment posted by
richie12200
on Saturday, August 20, 2011 2:15 AM

Hi can you sent the complete code for me??

Comment posted by
richie12200
on Saturday, August 20, 2011 2:48 AM

Hi Mahesh ! i got this Error message
The server was unable to process the request due to an internal error. For more information about the error, either turn on IncludeExceptionDetailInFaults (either from ServiceBehaviorAttribute or from the <serviceDebug> configuration behavior) on the server in order to send the exception information back to the client, or turn on tracing as per the Microsoft .NET Framework 3.0 SDK documentation and inspect the server trace logs.

and i use the SQL 2008 R2 Express for my database how can i handle this problem?

Comment posted by
richie12200
on Saturday, August 20, 2011 2:58 AM

Hi Mahesh ! i got this Error message
The server was unable to process the request due to an internal error. For more information about the error, either turn on IncludeExceptionDetailInFaults (either from ServiceBehaviorAttribute or from the <serviceDebug> configuration behavior) on the server in order to send the exception information back to the client, or turn on tracing as per the Microsoft .NET Framework 3.0 SDK documentation and inspect the server trace logs.

and i use the SQL 2008 R2 Express for my database how can i handle this problem?

Comment posted by
Edo
on Saturday, September 24, 2011 12:31 PM

How can i find the sample code for this example because i have try so many times and it doesn't work. Please help me

Comment posted by
DonDi
on Sunday, September 25, 2011 2:04 PM

Hellooo, can anyone send to me this sample because it doesn't work. My email is edon.bajrami7@gmail.com

Comment posted by
DonDi
on Monday, September 26, 2011 5:26 PM

Hi, i try this code and i have some problems with the Converter class part it doesn't work for me. I change this part and i use the following code:

This is the reference for the error i facing.
http://forums.create.msdn.com/forums/p/65575/401237.aspx
Well,It worked for me..

Comment posted by
Paresh
on Thursday, December 13, 2012 11:35 PM

Sir, how can we implement Asynchronous image loading in ListBox? You know i have just started with WP7 app development so. Yes having been involved in Android app development since more than 2 years so i know about Asynchronous term. Looking forward for your help for implementing Asynchronous image loading in ListBox.

Comment posted by
avin jalal
on Thursday, April 4, 2013 9:53 PM

hello,
I am getting the same error in step 6 and i am using c# please help me

Comment posted by
avin jalal
on Thursday, April 4, 2013 10:11 PM

i read that comment about that error but i dont understand
and i dont have any idea about how to solve the error
i am beginner :(
please please help me

Comment posted by
BalaKrishnan
on Monday, May 13, 2013 9:04 AM

Hai i new to windows phone 7. so i need help.how to insert image in to data base in (wp7) using wcf service in vb.net

Comment posted by
william hoffmann
on Saturday, November 30, 2013 4:45 PM

please send the VB sln file .. i tires to get all the paramaters in a project file but failed on the <src:ImageConverter x:Key="imgconverter" /> into the xaml page. thx in advance

Comment posted by
carol
on Sunday, December 8, 2013 5:38 AM

i tires to get all the paramaters in a project file but failed on the <src:ImageConverter x:Key="imgconverter" /> into the xaml page. thx in advance

Comment posted by
ranjit
on Friday, January 17, 2014 5:16 AM

Hi Mahesh,
I appriciate for this good article, i was looking for this simce a week. Many Thanks!! Please keep up the good work!!

Can you please also help me to browse appropriate photo of the employee while create/add any record into database. Mainly how to save image into database while creating/ adding emplyee record.
Your help would be really appriciated. Many thanks in advance!!

Comment posted by
siman
on Sunday, July 27, 2014 12:56 PM

Hi , i have actually try , everything is working fine. But i would like to ask, as my database the data type is save as image. but i cant seems to type anything in the image field at the database. can you let me know how you actually write or put in the image field from the database?

Thanks and i'm sorry. Hope to hear from ur replies

Comment posted by
Neenu James
on Friday, August 8, 2014 3:38 AM

I am getting the following error: "The type 'src:ImageConverter' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built."
What is its solution??....Can you help me,please..Its very urgent.....

Comment posted by
Gopinath
on Thursday, March 19, 2015 11:33 PM

Hi

I am very much pleased with the contents you have mentioned.I wanted to thank you for this great article!!. Please mail me the Code or share the link. I am very new to windows phone application.