Issue binding datatable to WPF datagrid - wpf

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%")

Answer 2

When you set the AutoGenerateColumns property of the DataGrid to False you need to explitly define the columns yourself so use your original XAML markup with the addition of AutoGenerateColumns="False" and you should see the three columns:
<DataGrid x:Name="WaterfallDataGrid" HorizontalAlignment="Left" Height="540" Margin="10,410,0,0" VerticalAlignment="Top" Width="1650" CanUserSortColumns="False" ColumnWidth="60"
AutoGenerateColumns="False">
<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>
To get rid of the extra blank row that is there for the user to be able to add a new row, you could set the CanUserAddRows property to False:
<DataGrid x:Name="WaterfallDataGrid" CanUserAddRows="False" ...
Yes I am aware of that. The problem is that whilst I can create 3 columns in XAML, I am unable to bind the data to the column via my VB code above.
The following complete code sample does work as expected for me.
MainWindow.xaml.vb:
Class MainWindow
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
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
MainWindow.xaml:
<Window
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:WpfApplicationVb1"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2" x:Class="MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DataGrid x:Name="WaterfallDataGrid" CanUserSortColumns="False" ColumnWidth="60" AutoGenerateColumns="False">
<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>
</Grid>
</Window>