如何在 GridViewColumn 中将值显示为图像？答案

【问题标题】：How to display values as images in GridViewColumn?如何在 GridViewColumn 中将值显示为图像？
【发布时间】：2010-09-29 15:48:52
【问题描述】：

我有一个 GridViewColumn，我已经绑定了：

<GridViewColumn Header="Validated" DisplayMemberBinding="{Binding Path=Validated, Converter={StaticResource imageConverter}}" />

Binding Path = Validated 返回一个枚举值，imageConverter 采用该值并返回一个 System.Windows.Media.Imaging.BitmapImage。我检查了创建这些 BitmapImage 对象之一时引用的对象的值，它似乎包含正确大小的图像。

我现在的问题是 GridView 中显示的是 BitmapImage 的 URI（作为文本），而不是图像本身。

这次我做错了什么？

【问题讨论】：

标签： c# .net wpf xaml

【解决方案1】：

更改 imageConverter 以返回图像的 uri 而不是实际图像。

<GridViewColumn Header="Validated">
  <GridViewColumn.CellTemplate>
    <DataTemplate>
        <Image Source="{Binding Path=Validated, Converter={StaticResource imageConverter}}" />
    </DataTemplate>
  </GridViewColumn.CellTemplate>
</GridViewColumn>

【讨论】：

需要注意的是DisplayMemberBinding不应该设置在GridViewColumn中，否则会优先，CellTemplate会被忽略。

【解决方案2】：

取自本网站： http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/96f18c2b-cade-42d9-b544-c64a7ce3d82b

首先你应该有一个包含图像信息的类，至少是它的地址。

public class VideoGame
{
  public string Name
  {
    get;
    set;
  }

  public string Image
  {
    get;
    set;
  }
}

其次，将一些实例添加到一个 ObservableCollection 中。

public partial class Window1 : Window
{
  private ObservableCollection<VideoGame> _games =
    new ObservableCollection<VideoGame>();

  public ObservableCollection<VideoGame> Games
  {
    get { return _games; }
  }

  public Window1()
  {
    _games.Add(new VideoGame() {
      Name = "Crysis",
      Image = @"C:\Crysis_Boxart_Final.jpg" });
    _games.Add(new VideoGame() {
      Name = "Unreal Tournament 3",
      Image = @"C:\Gearsofwar.JPG" });
    _games.Add(new VideoGame() {
      Name = "Gears of War",
      Image = @"C:\Crysis_Boxart_Final.jpg" });

    InitializeComponent();
  }
}

三、设置GridViewColumn.CellTemplate的DataTemplate。

<Window x:Class="VerticalAlignSnippet.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="512" Width="512" Name="myWindow">
  <Grid>
    <ListView Name="myListView"
             ItemsSource="{Binding ElementName=myWindow, Path=Games}">
      <ListView.View>
        <GridView>
          <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Name}" />
          <GridViewColumn Header="Image">
            <GridViewColumn.CellTemplate>
              <DataTemplate>
                <Grid>
                  <Image Source="{Binding Image}" />
                </Grid>
              </DataTemplate>
            </GridViewColumn.CellTemplate>
          </GridViewColumn>
        </GridView>
      </ListView.View>
    </ListView>
  </Grid>
</Window>

这种方法是在 XAML 中完成的。您可以利用 XamlReader 在后面的代码中加载这个 DataTemplate。

  string str = "<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"><Grid><Image Source=\"{x:Null}\" /></Grid></DataTemplate>";


    DataTemplate template = new DataTemplate();

    template = XamlReader.Parse(str) as DataTemplate;
    .....
    gv1.Columns[3].CellTemplate = template;

【讨论】：