Silverlight Controls and Silverlight Toolkit

Image control: display an image selected by the user

Hello,

I need to save an image and later display it on an image control. I created an interface where the user can select an image in the disk then hit "Upload" so the selected image is uploaded to the application's path: my SL application is in c:\dev, so I upload the image to "c:\dev\images. The image "myimage.jpg" is uploaded and physically belongs to the SL application. I'm saving also the image's path and name.

From a second interface, I have an image control to which I'd like to say: source = "images\myimage.jpg" ..., but it isn't working, because I found that after the upload, "myimage.jpg" is not included in the silverlight project, so in order to display the image I need to right click on the image in Visual Studio and "Include to project". Is there anyway I can "include" the image in the SL project as soon as it's uploaded ?

I'm also trying something different: When the user selects an image in the 1st interface and hits "Upload" (which I renamed "Save"), I'm saving the image in my SQL Server 2005 database, as an image. I'm working on a WCF service where I'm selecting the image from the database. I'm not done with it yet.

My second question is, is there anyway I can make the image control display an image retrieved from the database? I mean what property of the image control should I be using or how do I "Bind" the image control to the the image that I'm retrieving ?

It would make my life easier if I could just make the first scenario work, but if you have any other ideas......

Regards,
Sanaa RAMZI

Re: Image control: display an image selected by the user

Here have completely description with regard to save image to sql database ,please try it .

http://www.douziwang.cn/index.aspx?postid=Post12

If it not work for you , please let me know

Re: Image control: display an image selected by the user

Hello egoZd,

Thank you for your response. Where is the c# code please ? the article is not complete.

Re: Image control: display an image selected by the user

Hi Ulraviolet,

You don't need to include (embed as a resource) the image in the project. When the user 'uploads' it, you need to save it in a folder on the 'website' (eg. http://localhost:xxxxx/clientbin/images/<imagefilename>). Store the name of the image file in the database and then return that from your WCF service as a field, then in code behind you can set the source of the image to the path plus the image file name.

Unfortunately I have not been able to get it to work, but if you search the forums you will find plenty of posts talking about how to do it that way. My problem is I don't really understand the Image.Source URI mechanism, which is why I gave up and tried it your second way (storing the actual image in the database and retrieving that).

Do basically the same thing as you did from Jesse's tutorial to build your webservice, only obviously return the image data as one of the fields. Make sure you are storing JPG or PNG's, other image types won't work.

Then, in XAML where you bind the image, you need to specify an ImageConverter to convert the image for display as follows:

The ImageConverter is a static resource at the top of your page, like so:

<UserControl.Resources>
<conv:ImageConverter x:Key="ImageConverter"/>
<UserControl.Resources/>

and is implemented as follows - SQL PhotoWeb is my namespace and ServiceRef_AWProducts is the name of my service reference in the Silverlight project, so that's the only line you need to change in this code:

public class ImageConverter : IValueConverter
{

#region IValueConverter Members

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{

SQLPhotoWeb.ServiceRef_AWProducts.Binary data = value as SQLPhotoWeb.ServiceRef_AWProducts.Binary;

BitmapImage image = new BitmapImage();

            using (MemoryStream stream = new MemoryStream(data.Bytes))
            {
                image.SetSource(stream);
            }

return image;

}

        public object ConvertBack(object value, Type targetType,
            object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

#endregion
}

Hope that helps.

Richard

Re: Image control: display an image selected by the user

Hello Richard,

I'll try this and get back to you.

Thank you for your help, again :)

Regards,

Sanaa

Re: Image control: display an image selected by the user

Hello again Richard,

Made it ! :)

From the first application (a website) the user selects the images to upload, in code I create a folder in \clientbin\images, and from the SL application I first tested this: I inserted an image control in my xaml page:

and I did this:

MyImage.Source = new BitmapImage(new Uri("http://localhost:2519/clientbin/images/book217088/page1.jpg"));

and the image showed !

Now I can create folder and upload images to it, and then run the SL application and show any image :)

I'm running out of time so I'm gonna keep it as is and deliver. I will make displaying images from database using WCF my hobby for the next few days.

I can't thank you enough. Saving my life :)

Regards,

Sanaa RAMZI

Re: Image control: display an image selected by the user

Hey Sanaa,

That's great news! Well done indeed! I'm glad I could help. [:D]

Good luck with doing it the second way.

Regards,

Richard