How to mix Grid columns and ItemsControl features?

Question

I'm looking for easies way to create Listbox/ListView/ItemsControl where each item will be Grid's row.

I have simple tree structure (depth=3)

Group
   -> Question1
       ->Answer11
       ->Answer12
   -> Question2
       ->Answer21
       ->Answer22
       ->Answer23

and i'd like to present it as Table.

QUestion1 | Answer11 | Answer12 | -
Question2 | Answer21 | Answer22 | Answer23

As You can see number of columns is known at runtime. What is the easiest way to do that? I've tried mix ListView and GridView, but i had some problems with binding nested collection of answers to columns. Any other easy way to do that in XAML with MVVM?

Answer 1

You could do something like this.

<ListBox x:Name="listbox" ItemsSource="{Binding Questions}">
        <ListBox.ItemTemplate>
            <DataTemplate DataType="{x:Type local:Question}">
                <StackPanel Orientation="Horizontal">
                <TextBlock Width="100" Text="{Binding QuestionText}" />
                    <ItemsControl ItemsSource="{Binding Answers}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate DataType="{x:Type local:Answer}">
                                <TextBlock Width="100" Text="{Binding Text}" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

This creates a list of questions (question text as first column) and the question's answers as a horizontal list to the right of question's text.

This is assuming that your questions and answers are bindable properties. This is also not a true "Grid", but if it's suffice to look like a table, it could work.