WPF中如何在DataGrid行详情内添加带图片的ListView？

你的需求完全可行，图片无法显示主要是两个核心问题：XAML绑定错误，以及WPF Image控件加载远程URL的特性限制，以下是具体修复步骤：

1. 修复XAML绑定错误（最直接原因） #

你的ListView的ItemsSource绑定了imagepath（List），此时ListView每个子项的DataContext是单个string类型的URL，但你在Image控件里依然绑定{Binding imagepath}，这会找不到对应属性，导致图片无法加载。

修正后的ListView部分XAML代码 #

<ListView Name="listview1" ItemsSource="{Binding imagepath}">
    <ListView.ItemTemplate>
        <DataTemplateGeneratingPattern>
            <StackPanel>
                <!-- 绑定当前子项的DataContext，即单个URL字符串 -->
                <Image Source="{Binding}" Width="100" Height="100" />
           Introducing the converter for remote URLs -->
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2. 处理WPF Image加载远程URL的特性 #

WPF的Image.Source默认支持本地路径，但直接绑定远程URL字符串时，需要通过值转换器将字符串转换为BitmapImage才能确保正常加载：

步骤1：创建URL转BitmapImage的转换器 #

using System;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace First_WPF_Project
{
    public class UrlToImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is string url && !string.IsNullOrEmpty(url))
            {
                try
                {
                    BitmapImage bitmap = new BitmapImage();
                    bitmap.BeginInit();
                    bitmap.UriSource = new Uri(url);
                    bitmap.EndInit();
                    return bitmap;
                }
                catch
                {
                    // 加载失败时可返回默认图片或null
                    return null;
                }
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

步骤2：在XAML中引用并使用转换器 #

先在Window/UserControl的资源节点中声明转换器：

<Window.Resources>
    <local:UrlToImageConverter x:Key="UrlToImageConverter" />
</Window.Resources>

然后修改Image的绑定逻辑：

<Image Source="{Binding Converter={StaticResource UrlToImageConverter}}" Width="100" Height="100" />

3. 后台代码优化（非必要但更规范） #

你在循环里每次添加URL后都重复给Employee.imagepath赋值，可调整为循环结束后一次性赋值，避免冗余操作：

async void getAllData() 
{
    Query docref = database.Collection("users");
    QuerySnapshot snap = await docref.GetSnapshotAsync();

    foreach (DocumentSnapshot docsnap in snap)
    {
        if (docsnap.Exists)
        {
            Users employee = docsnap.ConvertTo<Users>();
            List<string> imageUrls = new List<string>();
            string urlLinks = "";
            
            for (int i = 0; i < employee.ImageUrl.Length; i++)
            {
                string url = employee.ImageUrl[i].ToString();
                urlLinks += url + Environment.NewLine;
                imageUrls.Add(url);
            }
            // 循环结束后统一赋值
            employee.imagepath = imageUrls;
            DataGridXAML.Items.Add(employee);
        }
    }
}

额外建议 #

• 确保Firebase返回的ImageUrl是完整的HTTPS地址（如https://xxx.storage.googleapis.com/xxx.jpg），避免相对路径或格式错误。
• 可添加图片加载失败的占位图，提升用户体验。
• 建议使用ObservableCollection<string>代替List<string>作为imagepath的类型，后续URL列表变化时UI会自动更新。

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