在选择时使用动态内容填充 WPF 列表框子项

Question

我正在尝试实现 UI 一个场景。它用于表示目录，一个树视图，如带有 MainChapter 的 structre ， Sub chapter ， Sub-sub Chapter 等 类表示更像

MainChapters
 Name 
 Prop1
 Prop2
 List<SubInfo>

SubInfo 
 List<Pages>

Pages
  Name  
  List<MediaElements>
  List<SubInfo>

MediaElement 
   Name 
   Type

我计划实现的 UI 是将 MainChapters 绑定到列表框，一旦选择了列表框中的特定项，我计划将 SubInfo 作为子项绑定到列表框 设计要求如附图所示 ![预期 UI 的示例结构][1]

那么我可以将 WPF Listbox 用于上述类型的 UI 实现或任何其他建议或最简单的方法吗？

Answer 1

这是一个示例，在此示例中，我使用 ListBoxItem 的 IsSelected 属性控制子组的可见性

    <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>

用鼠标点击隐藏子面板

• 添加了一个切换按钮作为标题
• 从按钮替换了原始模板以获得所需的外观
• 将 IsChecked 属性绑定到 ListBoxItem 的 IsSelected
• 将子面板可见性的绑定修改为更短的语法

就是有一个切换按钮来隐藏子内容

    <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>