Wpf使用扩展器对组合框进行分组

Question

我能够在http://www.jarloo.com/wpf-combobox-with-groupings/

找到一个分组组合框的示例

除了我需要额外的行为外，它非常适合我使用。这些项目应在其各自的标题下可折叠（使用扩展器）。

例如。 水果  苹果  橙子  葡萄 动物  猫  狗  牛

以上项目将以分组样式显示在组合框中，但我希望每个标题（此处为Fruit，Animals）可以使用扩展器进行折叠。你能帮一个例子吗？

谢谢， CHEV

Answer 1

试试这个

<Grid>
<Grid.Resources>
    <Style x:Key="GroupItem" TargetType="{x:Type GroupItem}">
        <Setter Property="Margin" Value="0,0,0,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                    <Expander IsExpanded="True">
                        <Expander.Header>
                            <DockPanel>
                                <TextBlock Text="{Binding Name}" FontWeight="Bold" Margin="2,5,0,2" FontSize="14"/>
                            </DockPanel>
                        </Expander.Header>
                        <Expander.Content>
                            <Border Margin="5,0,0,0">
                                <ItemsPresenter />
                            </Border>
                        </Expander.Content>
                    </Expander>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Grid.Resources>
<ComboBox Height="27" HorizontalAlignment="Left" Margin="162,109,0,0" VerticalAlignment="Top" Width="195" DisplayMemberPath="Item" Name="cboGroup">
    <ComboBox.GroupStyle>
        <GroupStyle ContainerStyle="{StaticResource GroupItem}"/>
    </ComboBox.GroupStyle>
</ComboBox>
</Grid>

Answer 2

你想要的是TreeView而不是ComboBox。 WPF TreeView本身支持此行为。来自MSDN的示例。

注意：这没有您要查找的下拉功能。

您的代码如下所示：

<TreeView SelectedItemChanged="TreeView_SelectedItemChanged">
  <TreeViewItem Header="Fruit">
    <TreeViewItem Header="Apple"/>
    <TreeViewItem Header="Orange"/>
    <TreeViewItem Header="Grape"/>
  </TreeViewItem>
 <TreeViewItem Header="Animals">
    <TreeViewItem Header="Cat"/>
    <TreeViewItem Header="Dog"/>
    <TreeViewItem Header="Cow"/>
  </TreeViewItem>
</TreeView>

修改：添加了其他代码以防止用户点击标题项，而只是折叠/展开节点。

private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
    var item = e.NewValue as TreeViewItem;
    if (item == null ||item.Items.Count == 0) return;
    item.IsExpanded = !item.IsExpanded;
    item.IsSelected = false;
}

编辑，此处为预览显示的内容