0

I'm trying to display an image in a DataGrid-Column next to other data. My model looks like this:

public class Person 
{
    public string Name { get; set; }
    public string Address { get; set; }
    public Bitmap Image { get; set; }
}

The ViewModel:

public ObservableCollection<Person> Persons
    {
        get
        {
           return this.persons;
        }

        set
        {
            this.persons = value;
        }
    }

And my DataGrid is this:

<DataGrid Name="Persons"
              Grid.Row="1"
              Grid.Column="0"
              Margin="10"
              AutoGenerateColumns="False"
              IsReadOnly="True"
              ItemsSource="{Binding Path=Persons}">
        <DataGrid.Columns>
            <DataGridTemplateColumn Width="80">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn Width="120"
                                Binding="{Binding Path=Name}"
                                Header="Name" />
            <DataGridTextColumn Width="120"
                                Binding="{Binding Path=Address}"
                                Header="Address" />
        </DataGrid.Columns>
    </DataGrid>

The Name and Adress get displayed correctly, but the image is empty... Do you know what I'm doing wrong?

Thanks in advance and have a nice day

xeraphim
  • 4,375
  • 9
  • 54
  • 102
  • Your question is the duplicate of http://stackoverflow.com/questions/7938779/image-column-in-wpf-datagrid – Transcendent May 30 '14 at 10:18
  • use `` – amnezjak May 30 '14 at 10:22
  • @xeraphim, is `Image` of a `System.Drawing.Bitmap` type? If yes can you change it to use [`System.Windows.Media.Imaging.BitmapImage`](http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapimage(v=vs.110).aspx)? – dkozl May 30 '14 at 10:43
  • @dkozl thanks for your hint, i created a Dto for Persons because i cant change the type of the original model, but it still doesnt show up :( – xeraphim May 30 '14 at 11:06
  • @dkozl i was wrong, it works now :D thanks! if you could do an answer instead of a comment, i'll set it as accepted answer :) thanks! – xeraphim May 30 '14 at 11:09
  • @xeraphim [answer](http://stackoverflow.com/questions/23952174/display-an-image-in-a-datagrid-column/23952617#23952617) added – dkozl May 30 '14 at 11:14

5 Answers5

3

If your Image is of a System.Drawing.Bitmap you should change it to System.Windows.Media.Imaging.BitmapImage and then change also Image.Source binding which at the moment binds to whole Person object to its Image property

<Image Source="{Binding Image}" />
dkozl
  • 32,814
  • 8
  • 87
  • 89
2

Try to use that code to display your image :

 <DataGridTemplateColumn Width="80">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Image Source="{Binding Image}" />
            </DataTemplate>
       </DataGridTemplateColumn.CellTemplate>
     </DataGridTemplateColumn>
MRebai
  • 5,344
  • 3
  • 33
  • 52
  • hey moiz thanks for your answer, but the images still don't show up... in the designer, a hint "cannot resolve property image in data context..." is shown.. – xeraphim May 30 '14 at 10:55
  • could you please show an example of person image set – MRebai May 30 '14 at 10:57
0

Add image floder in your project and add your images in the same folder. use following code to access

<Columns> 
<ItemTemplate >
<asp:ImageButton ID="ImageButton1" runat ="server" CommandName="Preview" ImageUrl="~/images/MSWord_Icon.jpg"/>
</ItemTemplate>
</Columns>
Vikas
  • 50
  • 10
0

You need to set some Height and Width for the image like 

<Image Source="{Binding}" Height="200" Width="200"/>
Harjeet Singh
  • 388
  • 2
  • 6
  • 22
0
xmlns:converter="clr-namespace:ProjectName.Converters"
<Window.Resource>
 <converter:BindableConverter x:Key="bindableConverter"/>
</Window.Resource>    
<DataGridTemplateColumn Header="HeaderName">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Image x:Name="BindImg" Height="35" Width="35" Source="{Binding IsBindable,Converter={StaticResource bindableConverter}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>                             
                            </DataGridTemplateColumn> 


 public class BindableConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string imageSource = string.Empty;
            bool isBinded;
            if (value == null || string.IsNullOrWhiteSpace(value.ToString()))
            {
                imageSource = "../../Resource/Images/unbinded.jpg";
            }
            if (Boolean.TryParse(value.ToString(), out isBinded))
            {
                if (isBinded)
                {
                    imageSource = "../../Resource/Images/binded.jpg";
                }
                else
                {
                    imageSource = "../../Resource/Images/unbinded.jpg";
                }
            }
            return imageSource;
        }

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