Accordion Data Binding

Jul 12, 2010 at 9:20 AM


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">
	    <TextBlock Text="{Binding ModuleName}" />
                <TextBox Text="{Binding MenuItems/MenuItemName}"/>

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?



Jul 12, 2010 at 5:41 PM
Hi, You're trying to bind a List to a TextBox. It does not make sense. To see the difference replace TextBox/Text binding with ListBox/ItemsSource. This lists the MenuItems in the ListBox. <tl:Accordion ItemsSource="{Binding MenuGroups}"> <tl:Accordion.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding ModuleName}" /> </DataTemplate> </tl:Accordion.ItemTemplate> <tl:Accordion.ContentTemplate> <DataTemplate> <ListBox ItemsSource="{Binding MenuItems}"> <ListBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding MenuItemName}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </DataTemplate> </tl:Accordion.ContentTemplate> </tl:Accordion> And, Why did you use "/" between MenuItems and MenuItemName?
Jul 13, 2010 at 6:30 AM

Hi - thanks for your reply but as I said in my post I have already tried using a Listbox, and when I use a Listbox the content of the accordion is empty. I'm afraid your XAML does not work, it is exactly the same as that I have already tried. As for the '/' in my databinding, it indicates that I would like to bind to the MenuItemName property of the current item in the MenuItems property of the data context. It's standard syntax as far as I am aware, more details can be found here


Jul 13, 2010 at 6:46 AM

Since I first posted we have changed the structure of our data, and for whatever reason it now databinds correctly. So problem solved, although I'm not entirely sure what the problem was in the first place...