WPF TreeView Boottstrap Style

Question

Is possible to design TreeView like this https://www.phpflow.com/demo/bootstrap_treeview_example_demo? I tried styling it, but i crash at second level (on the picture is it item named 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>

How from this i make menu like in Bootsrtap example? I tried something like this style, but i don't be able to indent lower menu items.

<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

You can refer to the way of implementation here：https://github.com/NaBian/HandyControl/blob/master/HandyControl/Themes/Styles/TreeView.xaml

Answer 2

The problem is that you are not setting margin on your ItemsPresenter control. Just replace <ItemsPresenter /> inside Expander control with <ItemsPresenter Margin="19,0,0,0" /> and see the magic!

It 'll automatically add-up margins for nested children.