WPF如何在WrapPanel布局的ListView中实现图片搭配下方文字显示

1. 新建数据绑定模型类 #

将图片和对应名称封装到同一个数据类中，避免分开存储两个列表无法一一对应的问题：

public class ImageItem
{
    // 图片数据源，类型为WPF的ImageSource（如果是Bitmap需要先转成BitmapSource）
    public ImageSource ImageData { get; set; }
    // 图片对应显示名称
    public string ImageName { get; set; }
}
// 如果需要支持属性动态更新，可实现INotifyPropertyChanged接口

2. 调整XAML中ListView的配置 #

新增ItemTemplate指定每个列表项的布局，实现图片在上、文字在下的效果：

<ListView Width="auto" Name="listviewSource" BorderBrush="{x:Null}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 可根据需求调整Orientation，Vertical是垂直换行，Horizontal是水平换行 -->
            <WrapPanel Width="auto" Height="150" Orientation="Vertical" UseLayoutRounding="True" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <!-- 新增项模板，定义每个列表项的布局 -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="8" Orientation="Vertical">
                <Image Source="{Binding ImageData}" Width="80" Height="80" Stretch="Uniform"/>
                <TextBlock Text="{Binding ImageName}" HorizontalAlignment="Center" Margin="0,4,0,0"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

3. 修改后台绑定逻辑 #

不再单独维护图片和名称两个列表，直接使用封装好的ImageItem列表作为数据源：

List<ImageItem> ImageItemList = new List<ImageItem>();

// 循环处理每个图片和名称的逻辑示例
ImageItem item = new ImageItem();
item.ImageData = bitmapData; // 你的已处理好的图片数据源
item.ImageName = name; // 对应图片的名称
ImageItemList.Add(item);

// 绑定数据源到ListView
listviewSource.ItemsSource = ImageItemList;

内容的提问来源于stack exchange，提问作者Satyam Mishra