Question

I have been searching all over the web trying to find an example of databinding an Accordion control.

I have written a simple test app to try and databind, and I can get the headers to bind, but can’t seem to figure out how to get the content to bind. Could someone help me out?

Here is my XAML:

<tk:Accordion HorizontalAlignment="Left" Margin="12,12,0,0" Name="accordion1" Width="181" Height="325" Background="White" VerticalAlignment="Top">
    <tk:Accordion.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding MenuHeaderName}" />
            </StackPanel>
        </DataTemplate>
    </tk:Accordion.ItemTemplate>
    <tk:Accordion.ContentTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Path=MenuItems.MenuItemName}" />
            </StackPanel>
        </DataTemplate>
    </tk:Accordion.ContentTemplate>         
</tk:Accordion>

And here is my code behind:

public partial class MainPage : UserControl
{
    public class MenuItem
    {
        public MenuItem(string name) { MenuItemName = name; }
        public string MenuItemName { get; set; }
    }

    public class MenuHeader
    {
        public MenuHeader(string name) 
        { 
            MenuItems = new List<MenuItem>(); 
            MenuHeaderName = name; 
        }
        public string MenuHeaderName { get; set; }
        public List<MenuItem> MenuItems { get; set; }
    }

    public MainPage()
    {
        InitializeComponent();

        List<MenuHeader> menuHeaders = new List<MenuHeader>();

        MenuHeader robots = new MenuHeader("Robots");
        robots.MenuItems.Add(new MenuItem("Robots - Item 1"));
        robots.MenuItems.Add(new MenuItem("Robots - Item 2"));
        robots.MenuItems.Add(new MenuItem("Robots - Item 3"));
        menuHeaders.Add(robots);

        MenuHeader pirates = new MenuHeader("Pirates");
        pirates.MenuItems.Add(new MenuItem("Pirates - Item 1"));
        pirates.MenuItems.Add(new MenuItem("Pirates - Item 2"));
        pirates.MenuItems.Add(new MenuItem("Pirates - Item 3"));
        menuHeaders.Add(pirates);

        accordion1.ItemsSource = menuHeaders;
    }
}

Answer 1

Figured it out.

Here is the XAML that works…

    <tk:Accordion HorizontalAlignment="Left" Margin="12,12,0,0" Name="accordion1" Width="181" Height="325" Background="White" VerticalAlignment="Top">
        <tk:Accordion.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding MenuHeaderName}" />
                </StackPanel>
            </DataTemplate>
        </tk:Accordion.ItemTemplate>
        <tk:Accordion.ContentTemplate>
            <DataTemplate>
                <ListBox ItemsSource="{Binding MenuItems}" BorderThickness="0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding MenuItemName}" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </DataTemplate>
        </tk:Accordion.ContentTemplate>         
    </tk:Accordion>