How to display values as images in GridViewColumn?

Question

Hi,

I have a GridViewColumn which I have bound as so:

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

The Binding Path = Validated returns an Enumerated value, the imageConverter takes that value and returns a System.Windows.Media.Imaging.BitmapImage. I have checked the value of the object referenced when one of these BitmapImage objects is created, and it appears to contain an image of the correct size.

My problem now is that what is being displayed in the GridView is the URI of the BitmapImage (as text), and not the image itself.

What am I doing wrong this time?

Answer 1

Taken from this website: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/96f18c2b-cade-42d9-b544-c64a7ce3d82b

First you should have a class that contains image information, at least its address.

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

  public string Image
  {
    get;
    set;
  }
}

Second, add some instances into one 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();
  }
}

Third, set the DataTemplate of GridViewColumn.CellTemplate.

<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>

This approach is done in XAML. You can make use of XamlReader to load this DataTemplate in the code behind.

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


    DataTemplate template = new DataTemplate();

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

Answer 2

Change imageConverter to return the uri of the image instead of an actual image.

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