DataBinding to WP8 Toolkit ExpanderView

Question

I'm attempting to databind to a Windows Phone 8 Toolkit Expander view with the following XAML and C# class. I know that the DataContext is set properly because the Headers have the proper text. However, the rest of the items aren't set properly (except for the ExpanderTemplate)

<phone:PanoramaItem Header="Skill Sheet">
    <ListBox Name="SkillSheet" ItemsSource="{Binding}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <toolkit:ExpanderView Header="{Binding}"
                                        ItemsSource="{Binding}"
                                        IsNonExpandable="False">
                    <toolkit:ExpanderView.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding groupName}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" LineHeight="{StaticResource LongListSelectorGroupHeaderFontSize}" />
                        </DataTemplate>
                    </toolkit:ExpanderView.HeaderTemplate>

                    <toolkit:ExpanderView.ExpanderTemplate>
                        <DataTemplate>
                            <TextBlock Text="Test" />
                        </DataTemplate>
                    </toolkit:ExpanderView.ExpanderTemplate>


                    <!--This is the area that is not getting databound-->
                    <toolkit:ExpanderView.ItemTemplate>
                        <DataTemplate>
                            <ListBox ItemsSource="{Binding skillNames}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding skill}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </DataTemplate>
                    </toolkit:ExpanderView.ItemTemplate>
                </toolkit:ExpanderView>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</phone:PanoramaItem>

And here are the classes that the XAML is getting bound to:

public class TreeMapSkill
{
    public string skill { get; set; }
}

public class TreeMapping
{
    public string groupName { get; set; }

    public List<TreeMapSkill> skillNames { get; set; }

    public TreeMapping()
    {
        skillNames = new List<TreeMapSkill>();
    }
}

public class TreeMappingList
{
    public List<TreeMapping> mapping { get; set; }

    public TreeMappingList() { }

    public TreeMappingList(Dictionary<string, List<string>> map)
        : base()
    {
        this.mapping = new List<TreeMapping>();

        foreach (string key in map.Keys)
        {
            TreeMapping tMap = new TreeMapping();
            tMap.groupName = key;
            foreach (string val in map[key])
                tMap.skillNames.Add(new TreeMapSkill() { skill = val });
            this.mapping.Add(tMap);
        }
    }

The Dictionary in the constructor is simply a list of skills associated to a specific group. I can also provide a sample object if it's needed for additional reference.

Answer 1

Why are you adding a ListBox inside the Expander's ItemTemplate? It is already a controls collection so you don't need a ListBox in there. Just put your DataTemplate inside.

<toolkit:ExpanderView.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding skill}" />
    </DataTemplate>
</toolkit:ExpanderView.ItemTemplate>

The second thing is you need to specify the property path on the binding of the ItemSource property for the expander.

<toolkit:ExpanderView Header="{Binding}"
                      ItemsSource="{Binding skillNames}"
                      IsNonExpandable="False">