DataTable with text and images material design

Question

I want to bind a DataTable to DataGrid with mixed text and images. I use Material Design in XAML and .NET Community Toolkit 8.0 MVVM.

My View:

    <Grid>
        <DataGrid ItemsSource="{Binding DataTableContent}" />
    </Grid>

My ViewModel

public partial class ViewModel : ObservableObject
    {

        [ObservableProperty]
        DataTable _dataTableContent;

        public ViewModel()
        {
            _dataTableContent = new DataTable();
            _dataTableContent.Columns.Add("Test123");
            _dataTableContent.Rows.Add("A");
            _dataTableContent.Rows.Add(PackIconKind.Printer);
        }
    }

How can I use the Icon in a DataTable. I found a few examples how to use them in XAML directly but that doesn't seem to help in my case.

Thank you in advance!

Answer 1

If you can disable AutoGenerateColumns that helps:

<DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Data}" >  


<DataGrid.Columns>
    <DataGridTemplateColumn>
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <ContentPresenter Content="{Binding Name}" />    
        </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>                           
</DataGridTemplateColumn>  

    <DataGridTemplateColumn>  
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>  
                <ContentPresenter Content="{Binding BooleanValue}" />      
            </DataTemplate>  
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>  

    <DataGridTemplateColumn>  
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>  
                <ContentPresenter Content="{Binding Icon}" />          
            </DataTemplate>  
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>  

</DataGrid.Columns>

</DataGrid>