Загрузка изображений в ListBox

Question

Я хочу отображать изображения в ListBox в WPF. То, чего я хочу достичь, это следовать

1. Чтение с устройства изображений и получение информации, такой как имя и т. Д. (СДЕЛАНО)
2. создание элементов в списке и отображение большого пальца по умолчанию (некоторые изображения по умолчанию) вместо фактического большого пальца, так как большой палец будет читаться позже для изображения. (DONE)

3. Теперь получите их миниатюры и сохраните их в папке (СОВЕРШЕНО). Выполняется заданием.

4. СЕЙЧАС покажите фактический большой палец изображения. (НЕ СДЕЛАНО).

ШАГ 4, где я застрял. В основном то, что я хочу сделать, похоже на окна, которые сначала отображают значок изображения / видео, а затем заполняют их пальцы.

Пожалуйста, помогите. Я новичок в WPF и, следовательно, сталкиваюсь с проблемами.

Answer 1

Возможно, я не правильно понял ваш вопрос, но если я правильно понял: вы хотите отобразить изображение в каком-либо элементе управления WPF.

1) Привязать путь к изображению к элементу управления (я использовал 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) Создать конвертер, который преобразует FilePath в ImageSource (я нашел его где-то в Интернете):

 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
                }

            }
}

Надеюсь, это поможет.

Answer 2

    <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; }
}

Answer 3

Существуют различные подходы к этому, можно было бы использовать PriorityBinding, который сначала отображает значок заполнителя, а затем большой палец.(Вам, вероятно, нужно назначить свойство, которое содержит изображение, только после его полной загрузки.)