TreeView中额外内边距与外边距的定义位置及修改方法

核心问题分析 #

你当前的代码存在一个关键错误：在DataTemplate里手动嵌套了TreeViewItem。TreeView控件会自动为每个绑定的数据项生成TreeViewItem容器，这种嵌套导致每个节点有两层TreeViewItem，内层的TreeViewItem自带默认的Margin、Padding和最小高度，这就是额外空间的主要来源。此外，TreeViewItem的默认模板里，展开按钮、内容容器等元素也有默认间距，需要手动覆盖。

修改后的代码 #

<TreeView x:Name="ProvenanceTree" Grid.Column="0" 
          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
          ItemsSource="{x:Bind ProvenanceTreeItems}" SelectionMode="Single" ItemInvoked="ProvenanceTree_ItemInvoked">
    <TreeView.ItemContainerStyle>
        <Style TargetType="TreeViewItem">
            <Setter Property="Height" Value="20"/>
            <Setter Property="MinHeight" Value="10"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <!-- 覆盖默认模板，移除内部所有额外间距 -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Grid x:Name="Root" Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <!-- 展开折叠按钮，可根据需求隐藏或调整尺寸 -->
                            <ToggleButton x:Name="ExpandCollapseChevron" 
                                          Margin="0" Padding="0"
                                          HorizontalAlignment="Left"
                                          VerticalAlignment="Center"
                                          IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                          Style="{StaticResource TreeViewItemExpandCollapseChevronStyle}"/>
                            <!-- 内容容器，移除默认内边距 -->
                            <ContentPresenter x:Name="ContentPresenter"
                                              Grid.Column="1"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Padding="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <!-- 子项容器，消除默认间距 -->
                            <ItemsPresenter x:Name="ItemsHost"
                                            Grid.Row="1"
                                            Grid.Column="1"
                                            Margin="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <DataTemplate x:DataType="local:IProvenance">
            <!-- 移除嵌套的TreeViewItem，直接放置内容Grid -->
            <Grid Background="{x:Bind HighlightColor.dilutedBrush}" Margin="0" Padding="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="Auto" MinWidth="75"/>
                    <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="100"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{x:Bind name}" TextTrimming="CharacterEllipsis" ToolTipService.ToolTip="{x:Bind name}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                <TextBlock Text="{x:Bind typeName}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1"/>
                <TextBlock Text="{x:Bind annotation}" TextTrimming="CharacterEllipsis" ToolTipService.ToolTip="{x:Bind annotation}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2"/>
            </Grid>
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

关键修改点 #

1. 移除DataTemplate内的TreeViewItem：让TreeView自动生成容器，避免双层嵌套带来的默认间距。
2. 覆盖TreeViewItem的默认模板：
   • 将展开按钮的Margin和Padding设为0
   • 把子项容器ItemsPresenter的Margin设为0
   • 确保ContentPresenter使用模板绑定的Padding（即你设置的0）
3. 若不需要展开折叠按钮，可添加<Setter Property="Visibility" Value="Collapsed"/>到ToggleButton的属性中，进一步节省空间。

内容的提问来源于stack exchange，提问作者Jules May