Click here to Skip to main content
14,459,650 members
Rate this:
Please Sign up or sign in to vote.
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
Updated 23-Nov-18 3:25am
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

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

Change your converter to:
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;
    }
}
   
Comments
Member 14064604 23-Nov-18 8:23am
   
Unfortunately it doesnt work.

When i set breakpoints to converter, the image returned by ConvertByteArrayToBitMapImage has some null properties, and some properties that are throwing exceptions:

Format = 'img.Format' threw an exception of type 'System.InvalidOperationException'

DpiX = 'img.DpiX' threw an exception of type 'System.InvalidOperationException'


I modified the image source binding to:



The user control i use for displaying a Contact has a listview bound to an observable collection, and the elements bound to the Contact's properties are bound to SelectedContact property in the viewmodel.
Richard Deeming 23-Nov-18 8:28am
   
It sounds like your byte array doesn't contain a valid image.

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100