TreeView 的父节点之间的空间

Question

我有一个TreeView，其中父节点和子节点绑定到相同的对象类型。我想要做的是有额外的空间，或者创建一些其他方式来分隔，只有顶级节点。

例如，如果它通常看起来像这样：

A
 B
 C
  F
D
 E

我希望它看起来像这样：

A
 B
 C
  F
(space here)
D
 E

下面是我的代码 - 为了将 TreeView 用作 ComboBox，已经有很多样式了。

    <TreeView 
        x:Name="GroupsCB"
        Style="{StaticResource TreeViewBoxStyle}"
        ItemsSource="{Binding Mode=OneTime}"
        ItemContainerStyle="{StaticResource TreeViewItemStyle}"
        ItemTemplate="{StaticResource GroupTreeItemTemplate}" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Center"
        Margin="0,4,97,0"
        Width="120" Height="26"
        SelectedItemChanged="GroupsCB_SelectedItemChanged"
        />

    <Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
        <Setter Property="IsExpanded" Value="True" />
    </Style>

    <Style x:Key="TreeViewBoxStyle" TargetType="{x:Type TreeView}">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="Padding" Value="5,0,0,0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeView}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ToggleButton Content="{TemplateBinding SelectedItem, Converter={StaticResource GroupNameConv}}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Grid.Row="0" Height="22" Padding="{TemplateBinding Padding}" x:Name="titleButton">
                            <ToggleButton.Style>
                                <Style TargetType="{x:Type ToggleButton}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                                <Border Background="Transparent" BorderBrush="Black" BorderThickness="1,1,1,1">
                                                    <Grid>
                                                        <Path HorizontalAlignment="Right" x:Name="Arrow" VerticalAlignment="Center" Fill="Black"
                                                        Data="M 0 0 L 4 4 L 8 0 Z" UseLayoutRounding="False" Margin="0,0,5,0"/>
                                                        <ContentPresenter Margin="5,0,0,0" />
                                                    </Grid>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=GroupsCB, Path=SelectedItem}">
                                            <Setter Property="IsChecked" Value="false" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>
                        <Popup IsOpen="{Binding IsChecked, ElementName=titleButton}" Placement="Bottom" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide" Grid.Row="1">
                            <Border BorderBrush="Black" BorderThickness="1,1,1,1" Background="White" MinWidth="{TemplateBinding ActualWidth}" Height="auto">
                                <ScrollViewer>
                                    <ItemsPresenter/>
                                </ScrollViewer>
                            </Border>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <HierarchicalDataTemplate 
        x:Key="GroupTreeItemTemplate"
        ItemsSource="{Binding Children, Mode=OneTime}"
        >
        <StackPanel Orientation="Horizontal">
            <StackPanel.Resources>

            </StackPanel.Resources>
            <ContentPresenter 
                Content="{Binding Name, Mode=OneTime}" 
                Margin="2,0,0,0"
                />
        </StackPanel>
    </HierarchicalDataTemplate>

Answer 1

好的，让我们挖掘一些老问题:)

只需对顶层和嵌套层使用不同的ItemContainerStyle。 TreeView.ItemContainerStyle 将针对顶级项，而HierarchicalDataTemplate.ItemContainerStyle 将针对嵌套项。

<Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
    <Setter Property="IsExpanded" Value="True" />
</Style>
<!-- Special style for the top level with top/bottom margin of 5 -->
<Style x:Key="TopTreeViewItemStyle" TargetType="TreeViewItem" BasedOn="{StaticResource TreeViewItemStyle}">
    <Setter Property="Margin" Value="0 5" />
</Style>

...


<TreeView 
    x:Name="GroupsCB"
    Style="{StaticResource TreeViewBoxStyle}"
    ItemsSource="{Binding Mode=OneTime}"
    ItemContainerStyle="{StaticResource TopTreeViewItemStyle}"
...


<HierarchicalDataTemplate 
    x:Key="GroupTreeItemTemplate"
    ItemsSource="{Binding Children, Mode=OneTime}"
    ItemContainerStyle="{StaticResource TreeViewItemStyle}"

Answer 2

使用 demo2 here: 并为您的顶层 HierarchicalDataTemplate 添加顶部边距到 StackPanel 例如：

<HierarchicalDataTemplate 
  DataType="{x:Type local:TopLevelViewModel}" 
  ItemsSource="{Binding Children}"
  >
  <StackPanel Orientation="Horizontal" Margin="0,20,0,0">       
    <TextBlock Text="{Binding Name}" />
  </StackPanel>
</HierarchicalDataTemplate>

Answer 3

试试这个

        <TreeView>
        <TreeViewItem Header="Employee1">
            <TreeViewItem Header="Jesper"/>
            <TreeViewItem Header="Aaberg"/>
            <TreeViewItem Header="12345"/>
        </TreeViewItem>
        **<Separator />**
        <TreeViewItem Header="Employee2">
            <TreeViewItem Header="Dominik"/>
            <TreeViewItem Header="Paiha"/>
            <TreeViewItem Header="98765"/>
        </TreeViewItem>
    </TreeView>

或者您可以为带有分隔符的项目在该模板中创建一个 DataTemplate