c# - How to display List<int> in DataGrid horizontally?

Question

I'd like to display each element of List<int> in DataGrid horizontally.

My data looks like this:

result.Add(new CatModel(1, "AA", new List<int> { 1, 2, 3 }));
result.Add(new CatModel(2, "BB", new List<int> { 4, 5, 6 }));
result.Add(new CatModel(3, "CC", new List<int> { 7, 8, 9 }));

The elements of List<int> should be split into three parts and each element should be shown in a DataGrid cell horizontally:

1    AA    1    2    3
2    BB    4    5    6
3    CC    7    8    9

Now it shows only (Collection). I think I need to work on the XAML, but I cannot find any example.

This question is similar to mine, but the solution is different from what I want. I'd rather like to split the column into three parts and allocate each of them to a cell.

Incidentally, the goal of introducing List<int> is to display arbitrarily many number of elements. You can assume that all rows have exactly the same length, e.g., if the 1st row has 7 elements, all the other rows (this time, the 2nd and the 3rd) have also 7 elements.

Here is my code:

CatModel.cs

using System;
using System.Collections.Generic;

namespace WpfApp1
{
    public class CatModel
    {
        //public CatModel(int Num, String Name, int Test_0001, int Test_0002, int Test_0003)
        public CatModel(int Num, String Name, List<int> Test_List)
        {
            this.Num = Num;
            this.Name = Name;
            //this.Test_0001 = Test_0001;
            //this.Test_0002 = Test_0002;
            //this.Test_0003 = Test_0003;
            this.Test_List = Test_List;
        }
        public int Num { get; set; }
        public String Name { get; set; }
        //public int Test_0001 { get; set; }
        //public int Test_0002 { get; set; }
        //public int Test_0003 { get; set; }
        public List<int> Test_List { get; set; }
    }
}

MainWindow.xaml.cs

using System.Collections.Generic;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<CatModel> result = new List<CatModel>();

            //result.Add(new CatModel(1, "AA", 1, 2, 3));
            //result.Add(new CatModel(2, "BB", 4, 5, 6));
            //result.Add(new CatModel(3, "CC", 7, 8, 9));

            result.Add(new CatModel(1, "AA", new List<int> { 1, 2, 3 }));
            result.Add(new CatModel(2, "BB", new List<int> { 4, 5, 6 }));
            result.Add(new CatModel(3, "CC", new List<int> { 7, 8, 9 }));

            this.dataGrid.ItemsSource = result;
        }
    }
}

MainWindow.xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="List" Height="350" Width="750"
        BorderThickness="1">

    <Grid Width="700" Height="300">
        <DataGrid AutoGenerateColumns="False"  Name="dataGrid" HorizontalAlignment="Left" Margin="10,10,10,10">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Num}" ClipboardContentBinding="{x:Null}" Header="Num" IsReadOnly="True" Width="50"/>
                <DataGridTextColumn Binding="{Binding Name}" ClipboardContentBinding="{x:Null}" Header="Name" IsReadOnly="True" Width="100"/>
                <DataGridTextColumn Binding="{Binding Test_0001}" ClipboardContentBinding="{x:Null}" Header="Test_0001" IsReadOnly="True" Width="*"/>
                <DataGridTextColumn Binding="{Binding Test_0002}" ClipboardContentBinding="{x:Null}" Header="Test_0002" IsReadOnly="True" Width="*"/>
                <DataGridTextColumn Binding="{Binding Test_0003}" ClipboardContentBinding="{x:Null}" Header="Test_0003" IsReadOnly="True" Width="*"/>
                <DataGridTextColumn Binding="{Binding Test_List}" ClipboardContentBinding="{x:Null}" Header="Test_List" IsReadOnly="True" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Answer 1

If for some reason you cannot use the DataTable (as you wrote in your comment), then you will have to use programmatic (in code behind) creation of columns.

    public MainWindow()
    {
        InitializeComponent();

        List<CatModel> result = new List<CatModel>();
        result.Add(new CatModel(1, "AA", new List<int> { 1, 2, 3 }));
        result.Add(new CatModel(2, "BB", new List<int> { 4, 5, 6 }));
        result.Add(new CatModel(3, "CC", new List<int> { 7, 8, 9 }));


        dataGrid.Columns.Clear();
        dataGrid.AutoGenerateColumns = false;

        dataGrid.Columns.Add(new DataGridTextColumn() { Header = nameof(CatModel.Num), Binding = new Binding(nameof(CatModel.Num)) });
        dataGrid.Columns.Add(new DataGridTextColumn() { Header = nameof(CatModel.Name), Binding = new Binding(nameof(CatModel.Name)) });

        for (int i = 0; i < 3; i++)
        {
            string path = $"{nameof(CatModel.List)}[{i}]";
            dataGrid.Columns.Add(new DataGridTextColumn() { Header = path, Binding = new Binding(path) });
        }

        dataGrid.ItemsSource = result;
    }

    public class CatModel
    {
        public CatModel(int num, string name, List<int> list)
        {
            Num = num;
            Name = name;
            List = list;
        }

        public int Num { get; }
        public string Name { get; }
        public List<int> List { get; }
    }

Also keep in mind that if you can change the "CatModel.List" collection (add/remove/insert/replace elements in it), then it should be replaced with ObservableCollection.
Otherwise, the new values of the collection items will not be displayed.