win UI 3 - Load DataGrid from DataTable

Question

Need some help getting DataTable data to display in a DataGrid. The code below works fine if I create a WPF app. When I run it in WinUI 3, I get "system.Data.DataView", etc, as seen in the screenshot following the code.

Any thoughts?

My xaml:

    <Window  
        x:Class="SampleWINUIDataGrid.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:local="using:SampleWINUIDataGrid"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        mc:Ignorable="d">  
      
        <StackPanel Margin="20" HorizontalAlignment="Left">  
            <controls:DataGrid x:Name="myDataGrid" AutoGenerateColumns="True" />  
        </StackPanel>  
      
    </Window>  

My code behind:

using Microsoft.UI.Xaml;  
using System.Data;  
  
namespace SampleWINUIDataGrid  
{  
    public sealed partial class MainWindow : Window  
    {  
        public DataTable MyDataTable { get; set; }  
        public MainWindow()  
        {  
            this.InitializeComponent();  
  
            MyDataTable = new DataTable("table");  
              
            MyDataTable.Columns.Add("name");  
            MyDataTable.Columns.Add("age");  
  
            MyDataTable.Rows.Add("aaa", "11");  
            MyDataTable.Rows.Add("bbb", "22");  
            MyDataTable.Rows.Add("ccc", "33");  
  
            myDataGrid.ItemsSource = MyDataTable.DefaultView;  
        }  
    }  
}  

My results:

Answer 1

You can use x:Bind with a Collection

  <controls:DataGrid x:Name="myDataGrid" AutoGenerateColumns="True" Margin="10, 20, 0, 0"  
                           ItemsSource="{x:Bind MyData}">  

with :

        public class MyDataClass  
        {  
            public String Name { get; set; }  
            public int Age { get; set; }  
  
            public MyDataClass(String Name, int Age)  
            {  
                this.Name = Name;  
                this.Age = Age;    
            }  
        }  
          
        System.Collections.ObjectModel.ObservableCollection<MyDataClass> MyData = new System.Collections.ObjectModel.ObservableCollection<MyDataClass>();  

Test click Button :

        private void myButton_Click(object sender, RoutedEventArgs e)  
        {   
            MyData.Add(new MyDataClass("aaa", 11));  
            MyData.Add(new MyDataClass("bbb", 22));  
            MyData.Add(new MyDataClass("ccc", 33));  
        }  

Answer 2

Another method by adding columns/data dynamically from your DataTable (with AutoGenerateColumns="False") =>

<controls:DataGrid x:Name="myDataGrid" AutoGenerateColumns="False" VerticalAlignment="Top" Margin="10, 20, 0, 0" />  

then

  public DataTable MyDataTable { get; set; }  

and (add the "less than" character before object (editor bug...))

            MyDataTable.Columns.Add("Name");  
            MyDataTable.Columns.Add("Age");  
  
            MyDataTable.Rows.Add("aaa", "11");  
            MyDataTable.Rows.Add("bbb", "22");  
            MyDataTable.Rows.Add("ccc", "33");  

            for (int i = 0; i < MyDataTable.Columns.Count; i++)  
            {  
                myDataGrid.Columns.Add(new CommunityToolkit.WinUI.UI.Controls.DataGridTextColumn()  
                {  
                    Header = MyDataTable.Columns[i].ColumnName,  
                    Binding = new Binding { Path = new PropertyPath("[" + i.ToString() + "]") }  
                });  
            }  



            var collectionObjects = new System.Collections.ObjectModel.ObservableCollection object>();  
            foreach (DataRow row in MyDataTable.Rows)  
            {  
                collectionObjects.Add(row.ItemArray);  
            }  
            myDataGrid.ItemsSource = collectionObjects;