none
Displaying a GIF image from SQLite database to WPF listbox RRS feed

  • Question

  • Hi,

    I'm pulling a gif image from an SQLite database table and displaying it into a listbox. I've applied the gif conversion but the listbox only displays: byte[]array

    Can anyone offer assistance? Thanks in advance.

    CS:

     string GifsSelectionQuery = "SELECT gif FROM myTable WHERE Style = 'Jump'";

                    
                     SQLiteCommand GifsCommand = new SQLiteCommand(GifsSelectionQuery , sqliteCon);

                     SQLiteDataReader dataReader1 = GifsCommand .ExecuteReader();

                   
                    while (dataReader1.Read())
                    {
                     object obGifs = dataReader1["gif"];
                         myListBox.Items.Add(obGifs); //adding the gifs to the list box

    }

    XAML:

    <ListBox Name="myListBox" Height="150" Width="150" Margin="10,25,0,0">
                        <ListBoxItem>
                        <Image 
                                             gif:ImageBehavior.AutoStart="True" Height="70" Width="70"
                                             gif:ImageBehavior.RepeatBehavior="Forever"
                                             gif:ImageBehavior.AnimatedSource="{Binding Path=gif}" />
                        </ListBoxItem>
                    </ListBox>

    Wednesday, October 22, 2014 6:22 AM

Answers

  • Set the ItemssSource of the ListBox to a DefaultView of a DataTable:

          string GifsSelectionQuery = "SELECT gif FROM myTable WHERE Style = 'Jump'";
          SQLiteDataAdapter adapter = new SQLiteDataAdapter(GifsSelectionQuery, sqliteCon);
          DataTable dt = new DataTable();
          adapter.Fill(dt);
    
          SQLiteDataReader dataReader1 = GifsCommand.ExecuteReader();
          myListBox.ItemsSource = dt.DefaultView; 
    


    ...and bind to the Gif column int the ItemTemplate of the ListBox and use a converter to convert the byte[] to a BitmapSource:


        <ListBox Name="myListBox" Height="150" Width="150" Margin="10,25,0,0"
                 xmlns:local="clr-namespace:WpfApplication1">
          <ListBox.Resources>
            <local:MyConverter x:Name="conv"/>
          </ListBox.Resources>
            <ListBox.ItemTemplate>
            <DataTemplate>
              <Image Source="{Binding Path=gif, Converter={StaticResource conv}}" />
            </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

     

    namespace WpfApplication1
    {
      public class BinaryImageConverter : IValueConverter
      {
        object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
          if (value != null && value is byte[]) {
            byte[] ByteArray = value as byte[];
            BitmapImage bmp = new BitmapImage();
            bmp.BeginInit();
            bmp.StreamSource = new MemoryStream(ByteArray);
            bmp.EndInit();
            return bmp;
          }
          return null;
        }
    
        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
          throw new NotSupportedException();
        }
      }
    }
    

    Please remember to mark helpful posts as answer and/or helpful.
    • Marked as answer by KelseaS Wednesday, October 22, 2014 12:09 PM
    Wednesday, October 22, 2014 10:39 AM

All replies

  • You can't add byte array into ListBox to display image. You have to convert byte array to BitmapImage before using ImageBehavior. 

    You can try following code

    public static BitmapImage ByteArraytoBitmap(Byte[] byteArray)
    {
        MemoryStream stream = new MemoryStream(byteArray);
        BitmapImage bitmapImage = new BitmapImage();
        bitmapImage.SetSource(stream);
        return bitmapImage;
    }

            while (dataReader1.Read())
            {
                byte[] obGifs = (byte[])dataReader1["gif"];
                BitmapImage img = ByteArrayToBitmap(obGifs);
                myListBox.Items.Add(img);
            }


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor


    Wednesday, October 22, 2014 7:51 AM
  • Set the ItemssSource of the ListBox to a DefaultView of a DataTable:

          string GifsSelectionQuery = "SELECT gif FROM myTable WHERE Style = 'Jump'";
          SQLiteDataAdapter adapter = new SQLiteDataAdapter(GifsSelectionQuery, sqliteCon);
          DataTable dt = new DataTable();
          adapter.Fill(dt);
    
          SQLiteDataReader dataReader1 = GifsCommand.ExecuteReader();
          myListBox.ItemsSource = dt.DefaultView; 
    


    ...and bind to the Gif column int the ItemTemplate of the ListBox and use a converter to convert the byte[] to a BitmapSource:


        <ListBox Name="myListBox" Height="150" Width="150" Margin="10,25,0,0"
                 xmlns:local="clr-namespace:WpfApplication1">
          <ListBox.Resources>
            <local:MyConverter x:Name="conv"/>
          </ListBox.Resources>
            <ListBox.ItemTemplate>
            <DataTemplate>
              <Image Source="{Binding Path=gif, Converter={StaticResource conv}}" />
            </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

     

    namespace WpfApplication1
    {
      public class BinaryImageConverter : IValueConverter
      {
        object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
          if (value != null && value is byte[]) {
            byte[] ByteArray = value as byte[];
            BitmapImage bmp = new BitmapImage();
            bmp.BeginInit();
            bmp.StreamSource = new MemoryStream(ByteArray);
            bmp.EndInit();
            return bmp;
          }
          return null;
        }
    
        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
          throw new NotSupportedException();
        }
      }
    }
    

    Please remember to mark helpful posts as answer and/or helpful.
    • Marked as answer by KelseaS Wednesday, October 22, 2014 12:09 PM
    Wednesday, October 22, 2014 10:39 AM
  • @Magnus.

    This code won´t work. 

    Error here:

    Btw, Who is this guy ? "MyConverter"????

    <local:MyConverter x:Name="conv"/>


    Sergio Rezende System Analist Rio, Brazil


    • Edited by kariokabrs Thursday, August 10, 2017 9:56 PM
    Thursday, August 10, 2017 9:53 PM