WPF Data Grid - Add Image and Button Columns

This example displays columns filled with Image and SimpleButton objects in the GridControl. To specify custom content in grid cells, create a DataTemplate and assign it to the ColumnBase.CellTemplate property.

Implementation details

The image template displays different images based on the IsRead property of the data object:

<DataTemplate x:Key="ImageCellTemplate">
    <Image x:Name="MyIcon" 
           Source="{dx:DXImage 'SvgImages/Icon Builder/Actions_EnvelopeClose.svg'}"/>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Row.IsRead}" Value="True">
            <Setter TargetName="MyIcon" 
                    Property="Source" 
                    Value="{dx:DXImage 'SvgImages/Icon Builder/Actions_EnvelopeOpen.svg'}"/>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

The button template also depends on the IsRead property. If it is false, the button is disabled:

<DataTemplate x:Key="ButtonCellTemplate">
    <dx:SimpleButton Content="Delete"
                     Command="{Binding DataContext.RemoveRowCommand, RelativeSource={RelativeSource AncestorType=dxg:GridControl}}"
                     CommandParameter="{Binding Row}"
                     IsEnabled="{Binding Row.IsRead}"/>
</DataTemplate>

Files to Review

• MainWindow.xaml (VB: MainWindow.xaml)
• MainViewModel.cs (VB: MainViewModel.vb)
• ReadOnSelectionBehavior.cs (VB: ReadOnSelectionBehavior.vb)

Documentation

• CellTemplate
• Assign Editors to Cells

More Examples

• Build Binding Paths in WPF Data Grid Cells
• WPF Data Grid - Assign a ComboBox Editor to a Column
• WPF Data Grid - Use Custom Editors to Edit Cell Values

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)