WPF TreeView Bootstrap 样式

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

问题是您没有在 ItemsPresenter 控件上设置边距。只需将 Expander 控件中的 <ItemsPresenter /> 替换为 <ItemsPresenter Margin="19,0,0,0" /> 即可看到魔法！

它会自动为嵌套子项添加边距。

Answer 2

实现方式可以参考这里：https://github.com/NaBian/HandyControl/blob/master/HandyControl/Themes/Styles/TreeView.xaml

WPF TreeView Bootstrap 样式

WPF TreeView Boottstrap Style

wpf

wpf-controls