Search code examples
xamltreeviewwinui-3winuitreeviewitem

Where is the padding and margins defined in a TreeView?


I've got a treeview defined as follows:

<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 0 0 0"/>
            <Setter Property="Padding" Value="0 0 0 0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Red"/>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <DataTemplate x:DataType="local:IProvenance">
            <TreeViewItem ItemsSource="{x:Bind Children}" IsExpanded="True">
                <Grid Background="{x:Bind HighlightColor.dilutedBrush}" Margin="0 0 0 0" Padding="0 0 0 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>
            </TreeViewItem>
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

and it appears like this:

View of compressed TreeView

What I'm seeing here is: each TreeViewItem has been compressed down to 20 pixels high, as it should be. (The red border is just so I can see the extent of the container - not intending to keep it!) But surrounding each is a few pixels of background, and there's a few pixels of space between each item.

Ideally, I'd like to get rid of that extra space, and compress the items together. I can increase both the padding and the margin (padding increases the size of the border, as you'd expect, and margin increases the spacing) but setting them to zero obviously doesn't eliminate them, and setting them to negative numbers does nothing.

Where are these minimum sizes defined, and is there any way to override them?


Solution

  • You can override the TreeViewItemPresenterPadding resource.

    <TreeView...>
        <TreeView.Resources>
            <Thickness x:Key="TreeViewItemPresenterPadding">0</Thickness>
        </TreeView.Resources>
    </TreeView>
    

    You can learn about this in the generic.xaml file.