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>

Deep WPF tree structures are entirely possible. You set the ItemsSource for the tree to a tree-shaped datastructure, and in your XAML you define a HierarchicalDataTemplate for each object type in the tree, which has it's own ItemsSource for the next level. (Objects with no children can just have a DataTemplate) https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/dd759035(v=vs.95) Please post the error you get, and a simplified code sample so we can see what you've tried. — Robin Bennett, Sep 13 '18 at 13:52
The short answer: *yes*. There is a [documentation on the default TreeView styles, events, etc.](https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/treeview-styles-and-templates) It should include all you need - besides the styling of the Bootstrap TreeView of course. You just have to change the styling/template XAML of your TreeView accordlingly. Here is the [MSDN Guide on how styling and templating works.](https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/styling-and-templating) — IDarkCoder, Sep 17 '18 at 12:30
My answer here https://stackoverflow.com/a/47853215/403671 provides a solution to a similar question, not based on TreeView but on Menu/MenuItem controls. — Simon Mourier, Sep 17 '18 at 17:23

score 2 · Accepted Answer · edited Sep 18 '18 at 15:53

2

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

edited Sep 18 '18 at 15:53

Fabulous

2,393
2
20
27

answered Sep 18 '18 at 15:44

nabian

116
3

Hi, and welcome to Stack Overflow. While the target of your link may answer the OP's question, it is recommended to provide a bit more context in your answer such as the relevant part of the code, or an explanation of why it answers the question since the article at the end of the link may be changed or deleted and will cease to be valid in future. – Fabulous Sep 18 '18 at 15:49

score 1 · Answer 2 · answered Sep 17 '18 at 19:24

1

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.

answered Sep 17 '18 at 19:24

Dipen Shah

25,562
1
32
58

WPF TreeView Boottstrap Style

2 Answers2