Loading Images into ListBox

Question

I want to display images into a ListBox in WPF. What i want to achieve is following

1. Read from a device for images and get information like name etc. (DONE)
2. create items in listbox and display default thumb (some default pic) in place of actual thumb as thumb will be read later for the image. (DONE)

3. Now get their thumbnails and store them in a folder (DONE). Being done by a task.

4. NOW show the actual thumb of the image. ( NOT DONE).

STEP 4 is where i am stuck. Basically what i want to do is similar to windows which will first display images/videos icon then fill their thumbs.

Please help. I am new to WPF and hence facing problems.

Answer 1

There are various approachs to this, one would be using a PriorityBinding which first displays the placeholder icon, then the thumb. (You probably need to assign the property which holds the image only after it is fully loaded.)

Answer 2

I might not properly understand your question but if i got it right: you want to display an image in some WPF control.

1) Bind path to your image to the control (I used DataGrid):

 <DataGrid ItemsSource="{Binding Path=ImageCollection}"
        <DataGrid.Columns>                    
                            <DataGridTemplateColumn Header="Image">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Image Width="40" Height="20" Source="{Binding FilePath, Converter={StaticResource ResourceKey=ImageConverter}}"/>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>
</DataGrid>

2) Create converter that converts FilePath to ImageSource (I found it somewhere in the Internet):

 public class ImageConverter : IValueConverter
    {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                var path = value as string;

                if (path == null)
                {
                    return DependencyProperty.UnsetValue;
                }
                //create new stream and create bitmap frame
                var bitmapImage = new BitmapImage();
                bitmapImage.BeginInit();
                try
                {
                    bitmapImage.StreamSource = new FileStream(path, FileMode.Open, FileAccess.Read);
                    //load the image now so we can immediately dispose of the stream
                    bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
                    bitmapImage.EndInit();
                    //clean up the stream to avoid file access exceptions when attempting to delete images
                    bitmapImage.StreamSource.Dispose();
                    return bitmapImage;
                }
                catch (Exception)
                {        
                    //do smth
                }

            }
}

Hope, this helps.

Answer 3

    <ListBox ItemsSource="{Binding Items}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Image}"/>
                    <Grid Grid.Column="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Grid.Row="1" Text="{Binding Desc}"/>
                        <TextBlock Grid.Row="2" Text="{Binding Notes}"/>
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

---

public partial class ImageListBox : INotifyPropertyChanged
{
    private ObservableCollection<Item> _items;
    public ObservableCollection<Item> Items
    {
        get { return _items; }
        set { _items = value; OnPropertyChanged("Items"); }
    }

    public ImageListBox()
    {
        DataContext = this;
        Items = new ObservableCollection<Item>(new List<Item>
                                                     {
                                                         new Item { Image = "Images/_(1).png" , Desc = "Desc1",Name = "Name1",Notes = "Notes1"},
                                                         new Item { Image = "Images/_(2).png" , Desc = "Desc2",Name = "Name2",Notes = "Notes2"},
                                                         new Item { Image = "Images/_(3).png" , Desc = "Desc3",Name = "Name3",Notes = "Notes3"},
                                                         new Item { Image = "Images/_(4).png" , Desc = "Desc4",Name = "Name4",Notes = "Notes4"},
                                                         new Item { Image = "Images/_(5).png" , Desc = "Desc5",Name = "Name5",Notes = "Notes5"},
                                                     });
        InitializeComponent();
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(String propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
    }
}

public class Item
{
    public String Image { get; set; }
    public String Name { get; set; }
    public String Desc { get; set; }
    public String Notes { get; set; }
}