将图像加载到 ListBox答案

【问题标题】：Loading Images into ListBox将图像加载到 ListBox
【发布时间】：2012-02-15 17:16:26
【问题描述】：

我想在 WPF 中的 ListBox 中显示图像。我想要实现的是以下

从设备中读取图像并获取名称等信息。（完成）
在列表框中创建项目并显示默认拇指（一些默认图片）代替实际拇指，因为稍后将为图像读取拇指。（完成）
现在获取他们的缩略图并将其存储在一个文件夹中 (DONE)。按任务完成。
现在显示图像的实际拇指。（未完成）。

第 4 步是我卡住的地方。基本上我想要做的类似于首先显示图像/视频图标然后填充他们的拇指的窗口。

请帮忙。我是 WPF 新手，因此面临问题。

【问题讨论】：

你能显示步骤 1-3 的代码吗？
我们至少需要一些关于您如何执行此操作的信息。您是否使用 DataTemplates 并将列表框绑定到自定义数据类型的列表？

标签： c# wpf

【解决方案1】：

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

【讨论】：

【解决方案2】：

我可能无法正确理解您的问题，但如果我没听错：您想在某些 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 的转换器（我在 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
                }

            }
}

希望，这会有所帮助。

【讨论】：

【解决方案3】：

对此有多种方法，一种是使用PriorityBinding，它首先显示占位符图标，然后显示拇指。（您可能需要在图像完全加载后分配保存图像的属性。）

【讨论】：