C# WPF bind image to byte array / sqlite BLOB

Question

5.00/5 (1 vote)

See more:

I am trying to create a "Contact book" app, using C# WPF, MVVM, SQLITE & DAPPER.
Issue: when i try to bind the Contact picture with an image element in my WPF user control the image is not displayed.

The other Contact properties bound to wpf elements seem to work(Contact name, details etc).
The byte array for the contact Picture gets initialized(i have manually added some test contacts and images to the table with DB Browser for SQLITE), but the image element doesn't display it.

What am i doing wrong?

What I have tried:

Contact Model:

public class Contact
{
    public int Id { get; set; }

    public string FullName { get; set; }

    public byte[] Picture { get; set; }

    public string Information { get; set; }

    public string Phone { get; set; }

    public string WhatsApp { get; set; }

    public string Skype { get; set; }
}

XAML:

<UserControl.Resources>
    <Converter:ByteArrayToBitmapImageConverter x:Name="binaryConverter" x:Key="byteToImageConverter"/>
</UserControl.Resources>

<Grid Margin="5"  Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4" Grid.RowSpan="4" Background="DarkGoldenrod">
           <Image  Source="{Binding SelectedContact.Picture, Converter={StaticResource byteToImageConverter}}" />
       </Grid>

Converter:

public class ByteArrayToBitmapImageConverter : IValueConverter
  {
      public BitmapImage ConvertByteArrayToBitMapImage(byte[] imageByteArray)
      {
          BitmapImage img = new BitmapImage();
          using (MemoryStream memStream = new MemoryStream(imageByteArray))
          {
              img.StreamSource = memStream;
          }
          return img;
      }



      public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
      {
          BitmapImage img = new BitmapImage();
          if (value != null)
          {
              img = this.ConvertByteArrayToBitMapImage(value as byte[]);
          }
          return img;
      }

      public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
      {
          return null;
      }
  }

Posted 22-Nov-18 23:33pm

Member 14064604

Updated 4-Oct-20 9:55am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TurgayTürk · Answer 1 · 2020-10-04T09:56:00

seems like a caching issue..

adjust your 'ConvertByteArrayToBitMapImage' method in your converter class as below and it should work;

public BitmapImage ConvertByteArrayToBitMapImage(byte[] imageByteArray)
{
    BitmapImage img = new BitmapImage();
    using (MemoryStream memStream = new MemoryStream(imageByteArray))
    {
        img.BeginInit();
        img.CacheOption = BitmapCacheOption.OnLoad;
        img.StreamSource = memStream;
        img.EndInit();
        img.Freeze();
    }
    return img;
}

Richard Deeming · Answer 2 · 2018-11-23T01:54:00

You're disposing of the stream before the image tries to read it.

Change your converter to:

C#

public class ByteArrayToBitmapImageConverter : IValueConverter
{
    public static BitmapImage ConvertByteArrayToBitMapImage(byte[] imageByteArray)
    {
        BitmapImage img = new BitmapImage();
        img.StreamSource = new MemoryStream(imageByteArray);
        return img;
    }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var imageByteArray = value as byte[];
        if (imageByteArray == null) return null;
        return ConvertByteArrayToBitMapImage(imageByteArray);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

C# WPF bind image to byte array / sqlite BLOB

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0