How do you create a table for user-input in WPF? - wpf

Question

I'm quite new to WPF and XAML and have been learning as I go.
I am writing a program in which the user needs to be able to enter data into a table, with pre-defined columns, which is then later sent to a database. I am, however, unable to make a DataGrid that allowes for this behaviour -
I'm using a - XAML is as follows:
<Grid MinHeight="100" MinWidth="600">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="1"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True">
<DataGrid SelectionMode="Single"
SelectionUnit="Cell"
CanUserAddRows="True"
CanUserDeleteRows="True"
IsReadOnly="False"
AutoGenerateColumns="False"
ItemsSource="{Binding SimpleCollection}">
<DataGrid.Columns>
<DataGridTextColumn Header="Rownummer" Binding="{Binding RowNumber}"/>
<DataGridTextColumn Header="Navn på felt" Binding="{Binding FieldName}"/>
<DataGridTextColumn Header="Forretningsmæssig nøgle" Binding="{Binding BusinessKey}"/>
<DataGridTextColumn Header="Er der datoopl." Binding="{Binding ContainsTimestamps}"/>
<DataGridTextColumn Header="Er der koder, der oversættes via BAS" Binding="{Binding ContainsBASTranslatedCodes}"/>
<DataGridTextColumn Header="Metadata" Binding="{Binding Metadata}"/>
<DataGridTextColumn Header="Evt. bemærkninger" Binding="{Binding AdditionalComments}"/>
</DataGrid.Columns>
</DataGrid>
</ScrollViewer>
</Grid>
<Grid>
The class used in the binding:
public class UserTable
{
public int RowNumber { get; set; }
public string FieldName { get; set; }
public string BusinessKey { get; set; }
public string ContainsTimestamps { get; set; }
public string ContainsBASTranslatedCodes { get; set; }
public string Metadata { get; set; }
public string AdditionalComments { get; set; }
public UserTable()
{
this.RowNumber = RowNumber;
this.FieldName = FieldName;
this.BusinessKey = BusinessKey;
this.ContainsTimestamps = ContainsTimestamps;
this.ContainsBASTranslatedCodes = ContainsBASTranslatedCodes;
this.Metadata = Metadata;
this.AdditionalComments = AdditionalComments;
}
public UserTable(int number, string name, string key, string timestamps, string translated, string meta, string additional)
{
RowNumber = number;
FieldName = name;
BusinessKey = key;
ContainsTimestamps = timestamps;
ContainsBASTranslatedCodes = translated;
Metadata = meta;
AdditionalComments = additional;
}
}
The creation of the Collection:
private ObservableCollection<UserTable> _simpleCollection;
public ObservableCollection<UserTable> SimpleCollection
{
get { return _simpleCollection ?? (_simpleCollection = new ObservableCollection<UserTable>()); }
set { _simpleCollection = value; }
}
(I am unsure where to place this - Have had it in the above mentioned class, and now in the .cs file that corresponds with the XAML)
Above code results in the following UI:
As you can probably see, the user is unable to enter anything into the table - There are no empty rows for data-insertion.
Does anyone have any idea about how to fix this?

Answer 1

To be able to add new rows to DataGrid you can create a ViewModel class and encapsulate your ObservableCollection<T> data collection in it, like i am going to show you.
for purpose of simplifying things let's say we have User model like this:
public class User
{
public int Id { get; set; }
public string FullName { get; set; }
public string Email { get; set; }
}
And let's create a simple view model class:
public class UsersViewModel
{
public UsersViewModel()
{
_users = new ObservableCollection<User>();
}
private ObservableCollection<User> _users;
public ObservableCollection<User> User => _users; // C# 6 feature.
}
Now we need to create an instance of UsersViewModel class and assign it as data context to any element that is parent to your DataGrid in our case let's assign it to the MainWindow Grid DataContext, we can do it in XAML or in code behind:
<Window xmlns:vm="clr-namespace:Namespace.In.Which.UsersViewModel.Lives">
<Window.Resources>
<vm:UsersViewModel x:Key="viewModel"></local:UsersViewModel>
</Window.Resources>
<Grid x:Name="mainGrid" DataContext="{StaticResource viewModel}"></Grid>
...
</Window>
Or you can do the same in code behind like this:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
mainGrid.DataContext = new UsersViewModel();
}
}
After that you need to bind the Users property of UserViewModel to DataGrid.ItemsSource property:
<DataGrid ...
ItemsSource="{Binding Users}"></DataGrid>
Now if you if you run your Application you will end up with an editable DataGrid.
You can set AutoGenerateColumns to true and the DataGrid will auto generate the correct columns type for your model.
I tested this steps on my machine and they work. Hopefully it helps you to solve your issue.

Answer 2

For the user to be able to add items in the DataGrid, your UserTable class must have a default parameterless constructor defined.
So you will either have to define one or remove the other constructor that accepts parameters:
public class UserTable
{
public int RowNumber { get; set; }
public string FieldName { get; set; }
public string BusinessKey { get; set; }
public string ContainsTimestamps { get; set; }
public string ContainsBASTranslatedCodes { get; set; }
public string Metadata { get; set; }
public string AdditionalComments { get; set; }
public UserTable() { } //<--
public UserTable(int number, string name, string key, string timestamps, string translated, string meta, string additional)
{
RowNumber = number;
FieldName = name;
BusinessKey = key;
ContainsTimestamps = timestamps;
ContainsBASTranslatedCodes = translated;
Metadata = meta;
AdditionalComments = additional;
}
}