WPF Toolkit Accordion - How To Data Bind

Question

Hi

I have been trying (and failing) to dynamically create an accordion using databinding.

I have a collection called MenuGroups, which contains a string 'ModuleName' and an IList collection called MenuItems. I wish to bind the MenuGroups to the headers and the MenuItems to the content.

The closest I have managed so far uses this XAML:

<WPFToolkit:Accordion ItemsSource="{Binding MenuGroups}" HorizontalAlignment="Stretch" SelectionMode="OneOrMore">
    <WPFToolkit:Accordion.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ModuleName}" />
        </DataTemplate>
     </WPFToolkit:Accordion.ItemTemplate>

     <WPFToolkit:Accordion.ContentTemplate>
            <DataTemplate>
                <TextBox Text="{Binding MenuItems/MenuItemName}"/>
            </DataTemplate>
     </WPFToolkit:Accordion.ContentTemplate>
</WPFToolkit:Accordion>

This produces the headers correctly, but only the first menu item in each group is displayed in the content. I have tried various different connotations of the above, but as yet I have not achieved the desired result. I tried a ListView instead of a TextBlock in the content template thinking I would need that for multiple items,but that produced a blank content area.

Can anybody help?

Answer 1

The / character in a property path means bind to the current item in a collection. Since you aren't setting the current item in some other way, it will always just be the first item. See PropertyPath XAML Syntax.

If you want the content to be the entire list of MenuItems, you should use an ItemsControl, or one of its subclasses such as ListBox.

Something like this will give you a text box for every MenuItem in the collection:

<WPFToolkit:Accordion.ContentTemplate>
    <DataTemplate>
        <ItemsControl ItemsSource="{Binding MenuItems}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding MenuItemName}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </DataTemplate>
</WPFToolkit:Accordion.ContentTemplate>