Binding to a list within a collection WPF/VB

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>