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>

CodePudding user response：

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.