Populate a WPF Listbox Child Items with Dynamic content on Selection

Question

I am trying to implement UI a scenario . Its for representation Of table Of Contents , A treeview like structre with MainChapter , Sub chapter , Sub-sub chapter etc The class representation is more like

MainChapters
 Name 
 Prop1
 Prop2
 List<SubInfo>

SubInfo 
 List<Pages>

Pages
  Name  
  List<MediaElements>
  List<SubInfo>

MediaElement 
   Name 
   Type

The UI i am planning to implement is Bind MainChapters to a listbox and once a specific item in listbox is selected i am planning to bind SubInfo as a child item to the Listbox The design requirement is like in the image attached ![Sample structre oF expected UI][1]

So i can i use WPF Listbox for the mentioned kind of UI implementation or any other suggestions or easiest ways ?

This can be achieved by adjusting the item template of the listbox, so if you can share the same, I may try to adjust it for you. I need the regular data template or list item and data template/control for child content — pushpraj, Jun 04 '14 at 05:24
Can we add dynamic levels to Itemtemplate , as you can see Pages of MainChapter might contain SubInfo ie subchapter and subpages to any level? — Sebastian, Jun 04 '14 at 05:26
You can have dynamic levels, but hiding and showing on a specific trigger such as IsSelected is good choice in your case. it will recurse as you bind the child in the template and will become dynamic — pushpraj, Jun 04 '14 at 05:28
I will work on a basic level and share the code if not achieved the expected result. — Sebastian, Jun 04 '14 at 05:30

pushpraj · Accepted Answer · 2014-06-05T01:26:48.360

here is a sample for you, in this sample I am controlling the visibility of a subgroup using the IsSelected property of the ListBoxItem

    <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness=".5" Padding="1">
                    <StackPanel>
                        <TextBlock Text="{Binding}" />
                        <GroupBox Header="child group" MaxHeight="100"
                                  Visibility="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Converter={StaticResource BooleanToVisibilityConverter}}">
                            Child data
                        </GroupBox>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.Items>
            <sys:DateTime />
            <sys:DateTime />
            <sys:DateTime />
        </ListBox.Items>
    </ListBox>

hiding child panel with mouse click

added a toggle button as header
replaced the original template from button to get desired look
binded IsChecked property to IsSelected of ListBoxItem
revised the binding of child panel visibility to a shorter syntax

that's it to have a toggle button to hide the child content

    <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness=".5" Padding="1">
                    <StackPanel>
                        <ToggleButton x:Name="toggleChild" Content="header text, click to close" 
                                      IsChecked="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <ContentPresenter />
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>
                        <GroupBox Header="child group" MaxHeight="100" 
                                  Visibility="{Binding IsChecked, ElementName=toggleChild, Converter={StaticResource BooleanToVisibilityConverter}}">
                            Child data
                        </GroupBox>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.Items>
            <ListItem />
            <ListItem />
            <ListItem />
        </ListBox.Items>
    </ListBox>

Did the sample and worked like a charm for me. Only facing one problem and its with scrolling . I cant scroll the child data . While i am scrolling it disappers — Sebastian, Jun 04 '14 at 11:07
I think the problem is due to StackPanel, as height is not fixed in StackPanel, so perhaps you may define a `MaxHeight="100"` to `inner ListBox` and see if it is what you are looking for, 100 is just a number what you can choose. Also set `ScrollViewer.CanContentScroll="False"` on your both ListBoxes for a smoother scrolling, I guess it is pretty needed in your case. — pushpraj, Jun 04 '14 at 11:59
Yes that did the trick.Its working.. If i can do one more thing , i guess my requiements is completly done. The thing i need is can i make the Isselected property to False if i am clicking on the header second time ( First time it expands..) And if user clicks again it should hide — Sebastian, Jun 04 '14 at 15:43
i think you can make use of event triggers and this can be achieved by setting the property to false or set the visibility to collapsed, since it is bound so it will push the value back too. I may also try to prepare some sample, meanwhile u give it a try. — pushpraj, Jun 04 '14 at 16:58
updated my answer to get the toggle working simple binding only — pushpraj, Jun 05 '14 at 01:27
Yes all things now working as expected and by the end learn few more on Listbox ItemTemplate and its scope.Thanks a lot — Sebastian, Jun 05 '14 at 06:49
I tried the same implementation in WP8 and struggling at a specific point.To set Ischecked of ToggleButton from Xaml .I tried this BUt FindAnscestor will not supported in WP8.So how can i convert it for WP8 syntax ? — Sebastian, Jun 06 '14 at 11:03
Here is wat i tried http://stackoverflow.com/questions/24081242/findancestor-implementation-in-wp8-listbox — Sebastian, Jun 06 '14 at 11:54

Populate a WPF Listbox Child Items with Dynamic content on Selection

1 Answers1