locked
Binding Image from SQL database to Image Control RRS feed

  • Question

  • Hello,

    I need help in two way binding an image stored in my SQL Server database of type image to my Image control in the XAML page.

    I tried the following:

    1. defined a partial class of my entity containing the image field.
    2. defined a new property of type bmp that reads the image in the entity and convert it to bmp
    3. return the bmp

    That worked fine in one way (read image from database to image control)

    I need the conversion back from image control to the image field in the database.

        public partial class Customer
        {
            private BitmapImage _binaryPhoto;
            public BitmapImage BinaryPhoto
            {
                get
                {
                    if (_binaryPhoto == null)
                    {
                        _binaryPhoto = new BitmapImage();
    
                        if (CustomerPhoto != null)
                        {
                            byte[] data = (byte[])CustomerPhoto;
                            MemoryStream strm = new MemoryStream(data);
                            _binaryPhoto.BeginInit();
                            _binaryPhoto.StreamSource = strm;
                            _binaryPhoto.EndInit();
                        }
                    }
                    return _binaryPhoto;
                }
                set
                {
                    _binaryPhoto = value;
                   //Help needed here!
                }
            }
        }
    

    Any ideas?

    Thanks

    Monday, January 23, 2012 4:27 AM

Answers

  • I would do the following:

    (1) Use a FileDialog in View for user to select file (image)

    (2) When user pics an image, read that file into byte[] in the codebehind of View (yes in View)

    (3)Save this byte[] to VM's/Model's image property from this method of View.

    Tuesday, January 24, 2012 10:07 PM

All replies

  • you can assign only bitmap imagesource to your Class
    check below sample to convert your image file to bitmap image source
    
    
    BitmapImage imageSource = new BitmapImage();
    Stream stream = openFileDialog.File.OpenRead();
    BinaryReader binaryReader = new BinaryReader(stream);
    byte[] currentImageInBytes = binaryReader.ReadBytes((int)stream.Length);
    stream.Position = 0;
    imageSource.SetSource(stream);
    this.ImagePicture.Source = imageSource;
    
    
    
    
    HTH
    Joseph
    
    

    Monday, January 23, 2012 4:46 AM
  • Thanks Joseph for your reply.

    My problem is not how to set the image from the file to the image control in the source property.

    The code I have pasted above works fine.

    The problem is how to bind the image which is already displayed in the image control back to the entity back to the database when entity is submitted back.

    Hope my problem is clear now.

    Monday, January 23, 2012 5:46 AM
  • I would do the following:

    (1) Use a FileDialog in View for user to select file (image)

    (2) When user pics an image, read that file into byte[] in the codebehind of View (yes in View)

    (3)Save this byte[] to VM's/Model's image property from this method of View.

    Tuesday, January 24, 2012 10:07 PM