WPF DataGrid中如何显示本地SQL数据库中存储路径的图片？

嘿，这个需求我之前刚好做过类似的，给你一步步梳理怎么把Clubs表里的图片路径转换成可视化的Logo显示在DataGrid里：

1. 先搞定数据绑定模型 #

首先得写一个实现INotifyPropertyChanged的模型类，这样WPF的数据绑定才能正常响应数据变化，完美对应你的Clubs表字段：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Club : INotifyPropertyChanged
{
    private int _id;
    private string _clubName;
    private string _clubLogoPath;

    public int Id
    {
        get => _id;
        set { _id = value; OnPropertyChanged(); }
    }

    public string ClubName
    {
        get => _clubName;
        set { _clubName = value; OnPropertyChanged(); }
    }

    public string ClubLogoPath
    {
        get => _clubLogoPath;
        set { _clubLogoPath = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 写一个路径转Uri的转换器 #

数据库存的是相对图片路径，而WPF的Image控件需要有效的Uri才能加载图片，所以我们需要一个IValueConverter来完成路径转换：

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

public class ImagePathConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string path && !string.IsNullOrEmpty(path))
        {
            // 拼接完整路径：以程序运行根目录为基准，拼接你的图片文件夹路径
            string fullPath = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "appl.UI", "Images", path);
            
            if (System.IO.File.Exists(fullPath))
            {
                return new BitmapImage(new Uri(fullPath));
            }
        }
        // 路径无效时返回默认图（记得把DefaultLogo.png放到你的图片目录里）
        return new BitmapImage(new Uri(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "appl.UI", "Images", "DefaultLogo.png")));
    }

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

3. 在XAML中配置DataGrid #

接下来在你的WPF窗口/UserControl里，先声明转换器的命名空间，再配置DataGrid的自定义列：

<Window x:Class="YourProjectNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourProjectNamespace" <!-- 替换成你的项目命名空间 -->
        Title="俱乐部列表" Height="450" Width="800">
    <Window.Resources>
        <!-- 注册我们写的路径转换器 -->
        <local:ImagePathConverter x:Key="ImagePathConverter"/>
    </Window.Resources>
    <Grid>
        <DataGrid x:Name="ClubsDataGrid" AutoGenerateColumns="False" CanUserAddRows="False">
            <DataGrid.Columns>
                <!-- ID列 -->
                <DataGridTextColumn Header="ID" Binding="{Binding Id}" Width="60"/>
                <!-- 俱乐部名称列 -->
                <DataGridTextColumn Header="俱乐部名称" Binding="{Binding ClubName}" Width="220"/>
                <!-- Logo列：用TemplateColumn嵌入Image控件 -->
                <DataGridTemplateColumn Header="俱乐部Logo" Width="100">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding ClubLogoPath, Converter={StaticResource ImagePathConverter}}" 
                                   Width="80" Height="80" Stretch="UniformToFill"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

4. 从SQL数据库加载数据并绑定 #

最后一步，把本地SQL数据库里的Clubs数据查出来，转成ObservableCollection<Club>后绑定到DataGrid。这里用Dapper做示例（你也可以用Entity Framework）：

using System.Collections.ObjectModel;
using System.Data.SqlClient;
using Dapper;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        LoadClubsFromDb();
    }

    private void LoadClubsFromDb()
    {
        // 替换成你的本地SQL数据库连接字符串
        string connStr = "Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=YourDatabaseName;Integrated Security=True";
        
        using (var conn = new SqlConnection(connStr))
        {
            conn.Open();
            // 查询数据并映射到Club模型
            var clubs = conn.Query<Club>("SELECT id AS Id, ClubName, ClubLogo AS ClubLogoPath FROM Clubs").ToList();
            // 绑定到DataGrid
            ClubsDataGrid.ItemsSource = new ObservableCollection<Club>(clubs);
        }
    }
}

几个关键注意点 #

• 确保你的appl.UI/Images文件夹在程序运行的输出目录里存在，并且所有PNG图片的“复制到输出目录”属性设置为如果较新则复制（在VS里右键图片文件就能改）。
• 如果数据库里的路径包含子文件夹，记得调整转换器里的路径拼接逻辑。
• 可以给Image控件加FallbackValue属性，进一步优化图片加载失败时的显示效果。

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