减少 TreeView 使用的水平空间

Posted 2023-02-19

【中文标题】减少 TreeView 使用的水平空间

【英文标题】：Decrease used horizontal space of TreeView

【发布时间】：2021-11-14 19:09:39

【问题描述】：

如何控制展开的 TreeViewItems 使用的水平空间，以便树视图可以占用更少的空间？可以单独通过样式来完成，还是必须完全重新制作树视图才能控制这些样式属性？

【问题讨论】：

覆盖 TreeViewItem 的默认模板并更改 ItemsPresenter 的边距。

【参考方案1】：

您看到的项目是由父 TreeViewItem 的 ItemsPresenter 布局的。这意味着要更改子项的缩进，您必须更改 ItemsPresenter 在布局中的位置。

为此，您必须覆盖TreeViewItem 的默认ControlTemplate。找到ItemsPresenter 并给它一个负左Margin 来减少缩进或给它一个正的左边距g 来增加子项的缩进。

以下Style 取自Microsoft Docs: TreeView ControlTemplate Example。在那里您可以找到以下Style 所依赖的所有资源。

关键是在ItemsPresenter上设置一个负左Margin，命名为“ItemsHost”：

<ItemsPresenter x:Name="ItemsHost"
                ...
                Margin="-12,0,0,0" />

完整的 TreeViewItemStyle（没有资源）：

<Style x:Key="x:Type TreeViewItem"
       TargetType="x:Type TreeViewItem">
  <Setter Property="Background"
          Value="Transparent" />
  <Setter Property="HorizontalContentAlignment"
          Value="Binding Path=HorizontalContentAlignment,
    RelativeSource=RelativeSource AncestorType=x:Type ItemsControl" />
  <Setter Property="VerticalContentAlignment"
          Value="Binding Path=VerticalContentAlignment,
    RelativeSource=RelativeSource AncestorType=x:Type ItemsControl" />
  <Setter Property="Padding"
          Value="1,0,0,0" />
  <Setter Property="Foreground"
          Value="DynamicResource x:Static SystemColors.ControlTextBrushKey" />
  <Setter Property="FocusVisualStyle"
          Value="StaticResource TreeViewItemFocusVisual" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="x:Type TreeViewItem">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="19"
                              Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)"
                                                >
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="StaticResource SelectedBackgroundColor" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="SelectedInactive">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="StaticResource SelectedUnfocusedColor" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ExpansionStates">
              <VisualState x:Name="Expanded">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="ItemsHost">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="x:Static Visibility.Visible" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Collapsed" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ToggleButton x:Name="Expander"
                        Style="StaticResource ExpandCollapseToggleStyle"
                        ClickMode="Press"
                        IsChecked="Binding IsExpanded, 
            RelativeSource=RelativeSource TemplatedParent"/>
          <Border x:Name="Bd"
                  Grid.Column="1"
                  Background="TemplateBinding Background"
                  BorderBrush="TemplateBinding BorderBrush"
                  BorderThickness="TemplateBinding BorderThickness"
                  Padding="TemplateBinding Padding">
            <ContentPresenter x:Name="PART_Header"
                              ContentSource="Header"
                              HorizontalAlignment="TemplateBinding HorizontalContentAlignment"/>
          </Border>


          <!-- Host of the child items -->
          <ItemsPresenter x:Name="ItemsHost"
                          Grid.Row="1"
                          Grid.Column="1"
                          Grid.ColumnSpan="2"
                          Visibility="Collapsed"
                          Margin="-12,0,0,0" />
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="HasItems"
                   Value="false">
            <Setter TargetName="Expander"
                    Property="Visibility"
                    Value="Hidden" />
          </Trigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="HasHeader"
                         Value="false" />
              <Condition Property="Width"
                         Value="Auto" />
            </MultiTrigger.Conditions>
            <Setter TargetName="PART_Header"
                    Property="MinWidth"
                    Value="75" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="HasHeader"
                         Value="false" />
              <Condition Property="Height"
                         Value="Auto" />
            </MultiTrigger.Conditions>
            <Setter TargetName="PART_Header"
                    Property="MinHeight"
                    Value="19" />
          </MultiTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>