Replacing checkboxes with images in Xceed's WPF DataGrid

Question

I'm using the MVVM pattern with Xceed's WPF DataGridControl and I've bound a column of my grid to a boolean property on my view-model/data-context.

By default it displays as a checkbox, instead I'd like to display an image e.g. a smile face for True and a sad face for False. It doesn't need to behave like a checkbox as the column is read-only.

What is the best way to achieve this?

score 1 · Answer 1 · answered Oct 21 '11 at 18:15

There was a blog posted on Xceeds website about how to style a DataCell based on other values. So essentially, you can create a DataTemplate with an image control in it and you can create a condition where you set the happy face if the value is true and a sad face if the value is false. Here is the following link that shows how to do this:

http://xceed.com/CS/blogs/techside/archive/2011/07/06/datacell-styling-vs-cellcontenttemplate.aspx

score 0 · Answer 2 · answered Jul 22 '11 at 14:28

you have to create data grid template column to achieve custom style.

    <DataGrid.Columns>
     <DataGridTemplateColumn Header="First Name" IsReadOnly="True" Width="Auto" MinWidth="100" CanUserSort="True">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
<Grid>
                                        <Image Source="smile.jpg"/>
                                        <Image Source="smile.jpg"/>
</Grid>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn> 

    </DataGrid.Columns>

you can further use datatriggers to play with visibility of images

Replacing checkboxes with images in Xceed's WPF DataGrid

2 Answers2