Category / Section
How to load different images in GridCell based on cell value in WPF DataGrid (SfDataGrid)?
2 mins read
You can load the image in GridCell using GridImageColumn in WPF DataGrid (SfDataGrid). You can also load different images in a column based on cell value by creating DataTemplate for the GridTextColumn. Using DataTrigger you can load the different images like below code example.
XAML
<Syncfusion:SfDataGrid x:Name="datagrid" AllowEditing="True" AllowFiltering="True" AutoGenerateColumns="False" ItemsSource="{Binding GDCSource}"> <Syncfusion:SfDataGrid.Columns> <Syncfusion:GridTextColumn MappingName="ShowCellIcon" /> <Syncfusion:GridTextColumn MappingName="ShowCellIcon"> <Syncfusion:GridTextColumn.CellTemplate> <DataTemplate> <Image> <Image.Style> <Style TargetType="{x:Type Image}"> <Setter Property="Source" Value="Images/no.png" /> <Style.Triggers> <DataTrigger Binding="{Binding Path=ShowCellIcon}" Value="true"> <Setter Property="Source" Value="Images/yes.png" /> </DataTrigger> </Style.Triggers> </Style> </Image.Style> </Image> </DataTemplate> </Syncfusion:GridTextColumn.CellTemplate> </Syncfusion:GridTextColumn> </Syncfusion:SfDataGrid.Columns> </Syncfusion:SfDataGrid>
In UWP, instead of DataTrigger you can use converter for loading image in GridCell based on Cell value like below code example.
XAML
<Syncfusion:SfDataGrid x:Name="datagrid" AllowEditing="True" AllowFiltering="True" AutoGenerateColumns="True" ItemsSource="{Binding GDCSource}"> <Syncfusion:SfDataGrid.Columns> <Syncfusion:GridTextColumn MappingName="ShowCellIcon"></Syncfusion:GridTextColumn> <Syncfusion:GridTextColumn MappingName="ShowCellIcon"> <Syncfusion:GridTextColumn.CellTemplate> <DataTemplate> <Image Source="{Binding Converter={StaticResource iconConverter}}"> </Image> </DataTemplate> </Syncfusion:GridTextColumn.CellTemplate> </Syncfusion:GridTextColumn> </Syncfusion:SfDataGrid.Columns> </Syncfusion.SfDataGrid>
C#
public class IconConverter :IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { var record = value as Model; //Loading Image based on GridCell value. var image=(record.ShowCellIcon) ? "Images/yes.png" : "Images/no.png"; return image; } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } }