Aleksandr Zolotov
Aleksandr Zolotov

Reputation: 1100

How to add GridViewColumn with image cells properly in WPF app

If I add just string value columns - all working well:

gridView.Columns.Add(new GridViewColumn
{
    Header = "ExecFileName",
    DisplayMemberBinding = new Binding("ExecFileName")
});

but how I can add column with BitmapImage or ImageSource value in cellls of this column for example ?

Whatever I did - I always see only path to the image file - how I can show image itself ?

P.S.: I am creating GridView from code, in xaml I have only:

<ListView x:Name="ResultListView" 
          BorderThickness="2,0,2,0" 
          BorderBrush="Gray" 
          Height="Auto" 
          Width="Auto" 
          Margin="0,0,0,10" 
          RenderTransformOrigin="0.502,2.299" 
          AutomationProperties.IsColumnHeader="True" 
          Loaded="ResultListView_Loaded" 
          MouseDoubleClick="ResultListView_MouseDoubleClick" >
</ListView>

Upvotes: 0

Views: 897

Answers (2)

FrankM
FrankM

Reputation: 1117

Since you are creating the GridView in code-behind, you also need to create the Binding to the ImageSource/BitmapSource in the code-behind.

Here is an example that produces this list view:

Screenshot

The MainWindow.xaml file is:

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication6"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="250"
        d:DataContext="{d:DesignData d:Type=local:MainWindow}">
    <Grid>
        <ListView x:Name="ResultListView" 
                  ItemsSource="{Binding Items}"
                  BorderThickness="2,0,2,0" 
                  BorderBrush="Gray" 
                  Height="Auto" 
                  Width="Auto" 
                  Margin="0,0,0,10" 
                  RenderTransformOrigin="0.502,2.299" 
                  AutomationProperties.IsColumnHeader="True">
        </ListView>
    </Grid>
</Window>

The code-behind is this (MainWindow.xaml.cs):

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace WpfApplication6
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Item> Items { get; } = new ObservableCollection<Item>(new[]
        {
            new Item { ExecFileName = @"C:\Temp\icon1.png" },
            new Item { ExecFileName = @"C:\Temp\icon2.png" }
        });

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            FrameworkElementFactory factory = new FrameworkElementFactory(typeof(Image));
            factory.SetBinding(Image.SourceProperty, new Binding("ImageSource"));

            GridView gridView = new GridView();
            gridView.Columns.Add(new GridViewColumn
            {
                Header = "FileName",
                DisplayMemberBinding = new Binding("ExecFileName")
            });
            gridView.Columns.Add(new GridViewColumn
            {
                Header = "Image",
                CellTemplate = new DataTemplate() { VisualTree = factory }
            });
            ResultListView.View = gridView;
        }
    }

    public class Item
    {
        public string ExecFileName { get; set; }

        public BitmapImage ImageSource
        {
            get
            {
                return new BitmapImage(
                    new Uri(ExecFileName, UriKind.RelativeOrAbsolute));
            }
        }
    }
}

Upvotes: 2

Aleksandr Zolotov
Aleksandr Zolotov

Reputation: 1100

I just give a short answer - what was be my mistake exactly:

I'm trying add column as usual for string value cells:

            gridView.Columns.Add(new GridViewColumn
        {
            Header = "Icon",
            DisplayMemberBinding = new Binding("Icon")
        });

but I need add like this :

            FrameworkElementFactory factory = new FrameworkElementFactory(typeof(Image));
        factory.SetBinding(Image.SourceProperty, new Binding("Icon"));

        gridView.Columns.Add(new GridViewColumn
        {
            Header = "Icon",
            CellTemplate = new DataTemplate() { VisualTree = factory }
        });

Upvotes: 0

Related Questions