WPF Expander Hierarchical data Template of 2 levels

Question

I have a repeating data structure like this

public class Chapter
{   
    public string id { get; set; }      
    public string name { get; set; }            
    public List<BPage> pages { get; set; }                      
    public List<SubChapter> chapters { get; set; }
}
public class SubChapter
{
    public string name { get; set; }
    public string id { get; set; }
    public List<BPage> pages { get; set; }
    public string ParentPageId { get; set; }
    public List<SubChapter> chapters { get; set; }
}
public class BPage
{
    public string name { get; set; }     
    public string label { get; set; }
}

Here is the xaml i am using , But this xaml is giving only one level of data back to me . Second level is missing completely

ie if Chapter 1 contains 2 subchapters and pages , then those info is missing Chapter 1 page 1 page 2
Chapter 1.1 page 1a page 1b
Chapter 1.2 page 2a page 2b

And xaml is

<ListBox ItemsSource="{Binding}"  Name="TOCView"  ItemContainerStyle="{StaticResource ListBoxItemStyle}">
    <ListBox.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding chapters}">
            <Expander>
                <Expander.Header>
                    <BulletDecorator>
                        <Label Style="{StaticResource ResourceKey=ChapterHeadStyle}"  Content="{Binding name}"></Label>
                    </BulletDecorator>
                </Expander.Header>
                <ItemsControl Margin="25,0,0,0" ItemsSource="{Binding pages}" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Button Tag="{Binding}"  Click="btnNavigateToPage_Click"  Style="{StaticResource ResourceKey=BookPageStyle}"  Content="{Binding Path=label}" >
                                </Button>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>
        </HierarchicalDataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

`HierarchicalDataTemplate` can also define it's `ItemTemplate`, see if that is what you are looking for. I would suggest you to combine `Chapter` & `SubChapter` class as the only difference is `ParentPageId` which can be left null in case of root chapters. then defining the nested templates would be much easier. — pushpraj, Sep 17 '14 at 07:43
Already there is one ItemTemplate defined here for HierarchicalDataTemplate — Sebastian, Sep 17 '14 at 08:12

score 0 · Answer 1 · answered Sep 17 '14 at 07:54

Your problem is caused because you have only provided one HierarchicalDataTemplate, but you want to define two hierarchical levels. Therefore, you need to provide another HierarchicalDataTemplate for your second level. Please note that you do not have to define them in the ListBox.ItemTemplate property, instead defining them both in a Resources section:

<HierarchicalDataTemplate DataType="{x:Type YourPrefix:Chapter}"
    ItemsSource="{Binding CollectionPropertyInSubChapterClass}">
    ...
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type YourPrefix:SubChapter}">
    ItemsSource="{Binding CollectionPropertyInBPageClass}">
    ...
</HierarchicalDataTemplate>

As long as you don't specify the x:Key directive for either of them, they will be implicitly applied, so you won't have to provide any value for the ListBox.ItemTemplate property.

I am confused how to combine these 2 with expander . Since i want to show only one chapter & child's at a time . So how can i make it as a complete code — Sebastian, Sep 17 '14 at 07:59
As I said, *define them both in a `Resources` section* [and] *they will be implicitly applied*. Remember, a `HierarchicalDataTemplate` is just an extended `DataTemplate`... treat it in the same way. — Sheridan, Sep 17 '14 at 08:09

WPF Expander Hierarchical data Template of 2 levels

1 Answers1