如何在WPF DataGrid中添加图片列，根据航班号前缀显示航司Logo

核心思路 #

利用WPF DataGrid的AutoGeneratingColumn事件拦截自动生成的"Airline"列，替换为自定义模板列（包含Image控件），通过值转换器从航班号提取航司代码并拼接Logo地址。

步骤1：创建值转换器 #

编写转换器，从航班号截取前两位航司代码，生成对应的Logo URL：

public class AirlineLogoConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string flightNumber && !string.IsNullOrEmpty(flightNumber) && flightNumber.Length >= 2)
        {
            var airlineCode = flightNumber.Substring(0, 2).ToUpper();
            return new Uri($"https://pics.avs.io/71/25/{airlineCode}.png");
        }
        // 可选：返回默认占位图地址
        return null;
    }

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

步骤2：绑定DataGrid的自动列生成事件 #

在XAML中给DataGrid添加AutoGeneratingColumn事件：

<DataGrid x:Name="FlightDataGrid" 
          AutoGeneratingColumn="FlightDataGrid_AutoGeneratingColumn"
          ItemsSource="{Binding}" />

步骤3：处理列生成事件，替换Airline列 #

在后台代码中实现事件逻辑，拦截Airline列并替换为Logo模板列：

private void FlightDataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    // 注意：这里判断DataTable的列名（而非显示标题），避免语言切换影响识别
    if (e.PropertyName.Equals("Airline", StringComparison.OrdinalIgnoreCase))
    {
        // 取消自动生成的文本列
        e.Cancel = true;

        // 创建自定义Logo列
        var logoColumn = new DataGridTemplateColumn
        {
            Header = e.Column.Header // 保留原语言对应的列标题
        };

        // 构建Image控件的模板
        var imageFactory = new FrameworkElementFactory(typeof(Image));
        // 绑定航班号列（需根据你的DataTable实际列名调整，比如"FlightNo"）
        var binding = new Binding("FlightNo")
        {
            Converter = new AirlineLogoConverter()
        };
        imageFactory.SetBinding(Image.SourceProperty, binding);
        
        // 设置图片尺寸与拉伸模式
        imageFactory.SetValue(Image.WidthProperty, 71.0);
        imageFactory.SetValue(Image.HeightProperty, 25.0);
        imageFactory.SetValue(Image.StretchProperty, Stretch.Uniform);

        // 绑定模板到列
        var dataTemplate = new DataTemplate { VisualTree = imageFactory };
        logoColumn.CellTemplate = dataTemplate;

        // 将自定义列添加到DataGrid
        ((DataGrid)sender).Columns.Add(logoColumn);
    }
}

关键注意事项 #

1. 列名判断：通过e.PropertyName判断列（而非显示标题），确保多语言切换下仍能正确识别Airline列。
2. 数据绑定：需确保DataTable中存在航班号列（如示例中的"FlightNo"），若Airline列本身存储航司代码（如LH），可直接绑定"Airline"。
3. 图片异常处理：可在转换器中添加默认占位图，或给Image控件设置FallbackValue，避免加载失败时显示空白。

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