Binding to a list within a collection WPF/VB - wpf

Question

I was wondering if its possible to bind a datagrid column to a list (Of T) thats stored within an observable collection!
Here's my current code:
Dim _BindWithThis As New List(Of BindWithThis)
Me.DataContext = _BindWithThis
For i = 0 To 3
Dim NewList As New List(Of Double) From {i + 0.25, i + 0.5, i + 0.75}
_BindWithThis.Add(New BindWithThis() With _
{.InternalNum = i, .DataValue = NewList})
Next
DataGrid1.ItemsSource = _BindWithThis
Dim NC As New DataGridTextColumn
NC.Header = "New Column"
NC.Width = 85
Dim b As New Binding
b.Path = New PropertyPath("DataValue")
NC.Binding = b
DataGrid1.Columns.Add(NC)
This currently displays four rows of "(Collection)". Is it possible to step into one of these "Collection" rows and display the data? I know that this is possible to do with a list box by binding with a specific element in the collection:
ListBox1.ItemsSource = _BindWithThis.Item(0).DataValue
I just can't work out how to do this with a datagrid...
Thanks for any help!
James

Answer 1

Here's my example as promised. This uses the DataGrid.RowDetailsTemplate to allow you to expand/collapse your list of data. Apologies that it's C# and not VB.NET.
Xaml:
<Page.DataContext>
<Samples:DataGridRowDetails2ViewModel/>
</Page.DataContext>
<Grid>
<DataGrid x:Name="dataGrid" ItemsSource="{Binding Items}"
AutoGenerateColumns="False" IsReadOnly="True">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="Name" />
<DataGridTemplateColumn Header="Show details">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ToggleButton Content="Show details"
IsChecked="{Binding IsChecked}"
Checked="ToggleButtonChecked" Unchecked="ToggleButtonChecked"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate DataType="{x:Type Samples:DataItemWithDetails}">
<ItemsControl ItemsSource="{Binding Doubles}" />
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Grid>
C#
public partial class DataGridRowDetails2
{
public DataGridRowDetails2()
{
InitializeComponent();
}
private void ToggleButtonChecked(object sender, RoutedEventArgs e)
{
var button = (ToggleButton)sender;
DataGridRow dataGridRow =
(DataGridRow)dataGrid.ItemContainerGenerator.ContainerFromItem(button.DataContext);
dataGridRow.DetailsVisibility =
(button.IsChecked??false) ? Visibility.Visible : Visibility.Collapsed;
}
}
You would of course use ObservableCollection<> and implement INotifyPropertyChanged for real code.
public class DataGridRowDetails2ViewModel
{
public DataGridRowDetails2ViewModel()
{
Items = new List<DataItemWithDetails>
{
new DataItemWithDetails{ Name = "Item 1"},
new DataItemWithDetails{ Name = "Item 2"},
new DataItemWithDetails{ Name = "Item 3"},
new DataItemWithDetails{ Name = "Item 4"},
};
}
public IList<DataItemWithDetails> Items { get; set; }
public bool IsChecked { get; set; }
}
public class DataItemWithDetails
{
public DataItemWithDetails()
{
Doubles = new List<double> {1, 2, 3, 4};
}
public string Name { get; set; }
public IList<double> Doubles { get; set; }
}

Answer 2

You need to set AutoGenerateColumns="False" and define the columns you want yourself
Here's a quick example which will display your collection in a ListBox instead instead of the default TextBlock
<DataGrid AutoGenerateColumns="False"
ItemsSource="{Binding YourCollection}">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Column Header">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding MySubCollection}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>