Binding Dictionary<string, DataTable> to ItemsControl not working

Question

I need to display each datatable(value) in the dictionary when the dictionary item in the list is expanded. And the dictionary item's key should be the expander header. The view model populates the data correctly, but nothing gets displayed on the UI. How do I get the list of datatables to display on the UI So far this is what I have:

<!-- Data grid template -->
<DataTemplate x:Key="ValuesTemplate">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Text="data grid header text" Margin="20,0,0,0" Grid.Row="2"/>
    <DataGrid ItemsSource="{Binding Value[0]}"/>
  </Grid>
</DataTemplate>

<!-- List of data tables -->
<ItemsControl ItemsSource="{Binding myDictionary}" VirtualizingStackPanel.IsVirtualizing="True">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Expander IsExpanded="True" Margin="0,0,0,10">
        <Expander.Header>
          <TextBlock Text="{Binding Key}" Margin="0,0,20,0" VerticalAlignment="Top"/>
        </Expander.Header>
        <ContentControl Content="{Binding}" ContentTemplate="{StaticResource ValuesTemplate}" ScrollViewer.CanContentScroll="True" Margin="20,0,0,0"/>
      </Expander>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 1

In WPF, the ItemsControl.ItemsSource can be bound to any type that implements IEnumerable. So, how is Dictionary<TKey, TValue> represented in terms of IEnumerable? It does so as an IEnumerable<KeyValuePair<TKey, TValue>>.

So, you could ignore the fact that you have a dictionary, and instead think of this as an enumeration of KeyValuePair<TKey, TValue> objects.

---

Now, you have the primary portion implemented mostly correct. You have an ItemsControl, properly bound, and you are applying a DataTemplate to each item. But, remember that each item is a KeyValuePair. So, the TextBlock.Text property is being bound correctly to the Key property, but the Content is being bound to the item (KeyValuePair<TKey, TValue) itself. This might be on purpose, but my guess is that you'd probably want the ContentControl to be bound to the Value property instead.

The second part is that you want to apply a ContentTemplate to each Content within your original DataTemplate. I see at least one, perhaps two potential mistakes:

1. You're ValuesTemplate seems to be working under the assumption that the content is a type of DataTable, when it is actually a type of KeyValuePair<string, DataTable>. In this case I would bind the Content to the Value property.
2. You're ValuesTempalte also seems to be binding the DataGrid.ItemsSource to Values[0]. My assumption here is that, again, you thought your content is a type of DataTable when it isn't, and even if that were the case, why bind the ItemsSource to the first row in the DataTable? Is your DataTable composed of rows, each of which are a sequence themselves? I'm guessing you simply want to do <DataGrid ItemsSource="{Binding}" />.

---

TL;DR;

<!-- Data grid template -->
<DataTemplate x:Key="ValuesTemplate">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Text="data grid header text" Margin="20,0,0,0" Grid.Row="2" />
    <DataGrid ItemsSource="{Binding}" />
  </Grid>
</DataTemplate>

<!-- List of data tables -->
<ItemsControl ItemsSource="{Binding MyDictionary}" VirtualizingStackPanel.IsVirtualizing="True">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Expander IsExpanded="True" Margin="0,0,0,10">
        <Expander.Header>
          <TextBlock Text="{Binding Key}" Margin="0,0,20,0" VerticalAlignment="Top" />
        </Expander.Header>
        <ContentControl Content="{Binding Value}" ContentTemplate="{StaticResource ValuesTemplate}" ScrollViewer.CanContentScroll="True" Margin="20,0,0,0" />
      </Expander>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>