Space between parent nodes of a TreeView

Question

I have a TreeView where parent and child nodes are bound to the same object type. What I want to do is have extra space, or create some other way to separate, only the top level nodes.

For example, if it looks like this normally:

A
 B
 C
  F
D
 E

I want it to look like this:

A
 B
 C
  F
(space here)
D
 E

Below is my code - There is already a lot of styling in order to use the TreeView as a 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

Ok, lets dig up some old question:)

Just use different ItemContainerStyle for the top level and nested levels. The TreeView.ItemContainerStyle will target the top-level items, while the HierarchicalDataTemplate.ItemContainerStyle will target nested items.

<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

Use demo2 here : and add a top margin to the StackPanel for your top level HierarchicalDataTemplate eg:

<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

Try out this

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

Or u can make a DataTemplate for the Items with the Separator inside that template