Issue binding datatable to WPF datagrid

Question

My XAML is as follows:

<DataGrid x:Name="WaterfallDataGrid" HorizontalAlignment="Left" Height="540" Margin="10,410,0,0" VerticalAlignment="Top" Width="1650" CanUserSortColumns="False" ColumnWidth="60">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Load" Binding="{Binding Load}"></DataGridTextColumn>
        <DataGridTextColumn Header="PF" Binding="{Binding PF}"></DataGridTextColumn>
        <DataGridTextColumn Header="Spare" Binding="{Binding Spare}"></DataGridTextColumn>
    </DataGrid.Columns>
    </DataGrid>

My VB.net code is as follows:

 Dim dt3 As New DataTable("Waterfall")
        dt3.Columns.Add("Load")
        dt3.Columns.Add("PF")
        dt3.Columns.Add("Spare")
dt3.rows.add(New Objecet() {"full load", "0.8", "20%"})
WaterfallDataGrid.itemSource = dt3.defaultview

While the datatable does get displayed on the datagrid, it creates another 3 new columns (Load, PF and Spar) in addition to the original 3 columns I created in XAML.

How do I bind the VB.net code to the XAML datagrid?

Here is the screenshot following Ed's code

Here is the code that I modify following Mark's comment.

<Window x:Class="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"
        xmlns:local="clr-namespace:Datagrid_Binding"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DataGrid x:Name="WaterfallDataGrid" HorizontalAlignment="Left" Height="170" Margin="85,65,0,0" VerticalAlignment="Top" Width="340" AutoGenerateColumns="False"/>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="25" Margin="380,255,0,0" VerticalAlignment="Top" Width="45"/>

    </Grid>
</Window>

And this is the VB code

Class MainWindow
    Private Sub button_Click(sender As Object, e As RoutedEventArgs) Handles button.Click
        Dim dt3 As New DataTable("Waterfall")
        dt3.Columns.Add("Load")
        dt3.Columns.Add("PF")
        dt3.Columns.Add("Spare")
        'dt3.rows.add(New Object() {"full load", "0.8", "20%"})
        dt3.Rows.Add("full load", "0.8", "20%")
        WaterfallDataGrid.ItemsSource = dt3.DefaultView
    End Sub
End Class

The datagrid does not show any data at all. It shows a collapsed row somehow. Screenshot as follows:

I think the issue is that if I don't pre-defined the columns in XAML and I defined the rows in vb.net but yet the autogeneratecolumn is set to false, there is no way for VB to programmatically create the columns during runtime so what I am seeing here is a collapsed row.

I think the approach would be to pre-defined the columns in XAML and then bind the data to the XAML columns but none of the codes work....really frustrating.

Answer 1

I think that perhaps the screenshot in the question doesn't relate to the code shown. If the only issue with your initial code was the extra columns being generated, you just need to add AutoGenerateColumns="False" to the DataGrid XAML:

<DataGrid x:Name="WaterfallDataGrid"
          HorizontalAlignment="Left"
          Height="540"
          Margin="10,410,0,0"
          VerticalAlignment="Top"
          Width="1650"
          CanUserSortColumns="False"
          ColumnWidth="60"
          AutoGenerateColumns="False">

Also, since DataRowCollection.Add takes a ParamArray argument, you don't need to create the Object array and can just pass in the column values individually, which is a bit easier to read, e.g.

dt3.Rows.Add("full load", "0.8", "20%")