How to display a List of Strings as a DataGrid (table) in XAML and C#

Question

I've been a long time lurker on SO and have only recently decided to set up an account. I've been spending quite a lot of hours trying to solve this problem I've been having without asking but I here it is.

What I'm trying to accomplish:

I have a list of strings, e.g: Mango, Banana, Melon (let's call it fruits) and I want to display it as a table in XAML (WPF), where it appears as row values on the left side, and the right side will be combo boxes that will allow users to pick a value. I'm currently stuck on the displaying part of this problem. I decided to use a DataGrid to display the list, and the code behind will do the data bindings.

Here's the XAML part of it:

<DataGrid x:Name="FruitDataGrid" Height="265" VerticalAlignment="Center" Margin="-7,8,-2,-6" HorizontalAlignment="Left" Width="1188" AutoGenerateColumns="False"> 
 <!-- If AutoGenerateColumns was true only the length is displayed.-->
         <DataGrid.Columns>
         <DataGridTextColumn x:Name="fruitsDisplay" Header="Fruits" MinWidth="450" IsReadOnly="True" />
         <DataGridComboBoxColumn Header="Number of Boxes" MinWidth ="200" CanUserResize="True" Width="*"></DataGridComboBoxColumn>
  </DataGrid.Columns>

Code Behind so far has been really simple, and after many attempts this is the most recent one.

private void populateFruitList()
    {
        FruitDataGrid.DataContext = fruitDataTable;
        //Binds a datatable instance to the datagrid, does not display anything.
    }

What I've been attempting:

Turn the List of Strings into an Observable Collection, or Enumerable, and do FruitDataGrid.itemsource = fruitsObservable;

The above method works, except that it will only display the length of each string value (if autogeneratecolumns is true), which is not what I want. If autogeneratecolumns was false then I can see the rows being shown, but not the string values.

I also tried using DataView or DataGridView but I failed to define it in the XAML, VS2012 says that there isn't such a thing.

I've been trying to do data binding as well as the MSDN Article says, but VS2012 never manages to bind to the list properly.

I then attempted to change my list into a datatable and [use a datagridview as specified here but again the XAML tells me it is not a valid class][2]. I am also aware of the performance impact datagridview might have but at this point I just want to display a table really.

I've also seen that some tutorials use a DataGrid.datasource method but that isn't in the DataGrid I want, I think it's a different class? (the DataGrid I am attempting to use is System.Windows.Controls.DataGrid, and the other one is in Windows Forms [As shown here][3])

Thanks again for taking the time to look into this.

EDIT

Trying to bind to the list in XAML this way:

<DataGrid x:Name="FruitDataGrid" Height="265" VerticalAlignment="Center" Margin="-7,8,-2,-6" HorizontalAlignment="Left" Width="1188" AutoGenerateColumns="False" ItemsSource="fruitDataList"> 

I get the error in XAML "The type converter for IEnumerable does not support converting from a string" which I think is because I'm doing it wrong. The table now shows a lot of empty rows though.

Trying ItemSource="{Binding fruitDataList}" (where fruitDataList is a List) yields a blank table, and an error in VS for BindingExpression path error.

Answer 1

Considering your binding is set to your viewmodel correctly.. do this

ItemsSource="{Binding fruitDataList}"

then

<DataGrid.Columns>
         <DataGridTextColumn 
x:Name="fruitsDisplay"
Binding="{Binding Path=FRUITS_PROPERTY_NAME_IN_COLLECTION}"
Header="Fruits"
MinWidth="450" 
IsReadOnly="True" />

         <DataGridComboBoxColumn
ItemsSource="{Binding TO_List_of_Numbers}" 
Header="Number of Boxes"
MinWidth ="200" 
CanUserResize="True" Width="*"></DataGridComboBoxColumn>

Answer 2

To sum up what the previous issue was, thanks to Muds, and hours of trying, the Binding in the XAML was not properly done.

In FruitDataGrid, this property should be written as ItemSource="{Binding}" this tells the XAML code to bind to whatever object the DataContext is assigned to in the code behind.

After that, within the DataGrid.Column, this property is needed.

Binding="{Binding Path=.}"

It had to be exactly that for me. lack of the dot or not enclosing it in quotes will not display the fruits.

Thus, for clarity:

In the XAML:

<DataGrid x:Name="FruitDataGrid" 
 Height="265" VerticalAlignment="Center" Margin="-7,8,-2,-6" 
 HorizontalAlignment="Left" Width="1188" 
 AutoGenerateColumns="False"
 ItemSource="{Binding}"> 
<!-- If AutoGenerateColumns was true only the length is displayed.-->
<DataGrid.Columns>
<DataGridTextColumn 
      x:Name="fruitsDisplay" 
      Header="Fruits" MinWidth="450" 
      IsReadOnly="True" 
      Binding="{Binding Path=.}"/>    <!--Exactly like this -->
<DataGridComboBoxColumn 
       Header="Number of Boxes" 
       MinWidth ="200" 
       CanUserResize="True" Width="*" />
 </DataGrid.Columns>

And then in the codebehind (filename.xaml.xs)

//Anywhere you plan to bind the list in my case FruitList
List<string> fruitList = new List<string>();
fruitList.add("Melon");
fruitList.add("Mango");
fruitList.add("Banana");

FruitDataGrid.DataContext = fruitList;

And now you'll have a very nice list displayed as a table. What killed 2 days of my time was the binding path should have a . (dot) right there, and I was binding to a string instead of an object (you literally bind to a string "fruitList" when you do Binding = {"fruitList"}. This amateur mistake stems from me insufficiently self-learning XAML.

Thanks again, Muds. I'll select yours as the answer because it helped me, and it feels weird accepting my own answer.