基于WPF数据表格列值显示图片

Question

我从SQL Server表中查询了一个数据表。
这个数据表只包含一列，其中的数字范围是0-9。
我需要在WPF datagrid中显示它。我已经完成了普通datagrid的显示。
但是我需要为该列中特定的数字显示单独的图片和一些文本。
通过Datagrid可以实现吗？

- Olivarsham

Answer 1

使用 DataGridTemplateColumn 并绑定一个 IValueConverter 来将你的 int 转换为 ImageSource

这里是一个可用的小例子：

MainWindow.xaml

<Window x:Class="StackOverflow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:StackOverflow"
        Title="MainWindow" Height="350" Width="525">

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

    <DataGrid>

        <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Converter={StaticResource IntToImageConverter}}" />
                            <TextBlock Text="Image number : " Margin="5, 0, 0, 0" />
                            <TextBlock Text="{Binding}" Margin="5, 0, 0, 0" />
                    </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>

        <sys:Int32>0</sys:Int32>
        <sys:Int32>1</sys:Int32>

    </DataGrid>

</Window>

MainWindow.xaml.cs

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

namespace StackOverflow
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class IntToImageConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            ImageSource result = null;
            var intValue = (int)value;
            switch (intValue)
            {
                case 0:
                    {
                        result = new BitmapImage(new Uri(@"your_path_to_image_0"));
                        break;
                    }

                case 1:
                    {
                        result = new BitmapImage(new Uri(@"your_path_to_image_1"));
                        break;
                    }
            }
            return result;
        }

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

- Sisyphe

---

我应该将从数据库服务器查询的datatable加载到datagrid中的哪里？ - Olivarsham

那就又是另一个问题了 :) 你不知道怎样从表中检索数据，然后把它绑定到一个数据表格(DataGrid)吗？我给你的例子只是演示如何把数字替换为图片，仅用于说明原来你的问题。 - Sisyphe

我已经从数据库服务器检索到数据。如何将其附加到数据网格？ - Olivarsham

你是在哪个数据结构中检索到它的？你应该为这个特定问题开一个新的提问，这与原始问题没有任何关系。此外，正如你所提到的：“我已经将其显示为普通数据网格”，似乎这是你已经解决的问题。 - Sisyphe

我将其显示为文本列，即仅将其绑定到数据网格的Itemssource。所以我只提到“我已经像普通数据网格一样显示了”。我需要知道如何在代码后台中创建它。 - Olivarsham

你只需要在DataGrid上设置正确的ItemsSource即可。绑定已经在单元格DataTemplate中管理好了。 - Sisyphe