WPF TreeView Boottstrap Style

Question

Возможно спроектировать TreeView следующим образом https://www.phpflow.com/demo/bootstrap_treeview_example_demo? Я пытался его стилизовать, но у меня сбой на втором уровне (на рисунке это элемент с именем Mobile).

<TreeView >

    <TreeViewItem Header="Electronics">
        <TreeViewItem Header="Mobile">
            <TreeViewItem Header="Samsung"/>
            <TreeViewItem Header="Apple"/>
        </TreeViewItem>
        <TreeViewItem Header="Laptop">
            <TreeViewItem Header="Keyboard" />
            <TreeViewItem Header="Computer Peripherals">
                <TreeViewItem Header="Printers"/>
                <TreeViewItem Header="Monitor"/>
            </TreeViewItem>
            <TreeViewItem Header="Dell" />
        </TreeViewItem>
    </TreeViewItem>

    <TreeViewItem Header="Single Menu Item" />

    <TreeViewItem Header="Other" />

</TreeView>

Как из этого сделать меню, как в примере с Bootsrtap? Я пробовал что-то вроде этого стиля, но я не могу сделать отступ для нижних пунктов меню.

<Style TargetType="TreeViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeViewItem">
                <Grid Margin="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <Border Name="Bd" 
                            Background="#8c8c8c"
                            BorderBrush="LightGray"
                            BorderThickness="0.6" 
                            CornerRadius="7"              
                            Padding="0"     
                            SnapsToDevicePixels="True">
                        <Grid>
                            <Expander Name="Exp" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
                                <Expander.Header>
                                    <ContentPresenter ContentSource="Header" />
                                </Expander.Header>
                                <ItemsPresenter />
                            </Expander>

                            <ContentPresenter Name="CntPres"
                                            ContentSource="Header"
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Center"
                                            Visibility="Collapsed" />
                        </Grid>
                    </Border>
                </Grid>

                <ControlTemplate.Triggers>

                    <Trigger Property="TreeViewItem.HasItems" Value="false">
                        <Setter 
                                TargetName="Exp" 
                                Property="Visibility" 
                                Value="Collapsed" />
                        <Setter 
                                TargetName="CntPres" 
                                Property="Visibility" 
                                Value="Visible" />
                    </Trigger>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Cyan"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Вы можете обратиться к способу реализации здесь: https://github.com/NaBian/HandyControl/blob/master/HandyControl/Themes/Styles/TreeView.xaml

Answer 2

Проблема в том, что вы не устанавливаете поле на вашем ItemsPresenter элементе управления. Просто замените <ItemsPresenter /> внутри Expander control на <ItemsPresenter Margin="19,0,0,0" /> и увидите магию!

Это автоматически добавит поля для вложенных детей.