Search code examples
wpfxamltreeview

Hiding Expand/Collapse icon in TreeView


I use a TreeView to create a generic Json Object editor. However, I want to hide the expand/collapse icons completely. I have searched a lot, but couldn't find any working solution so far. Is there a simple way to override the appropriated style to get rid of the collapse/expand functionality?

<TreeView Name="m_TreeView" ItemTemplateSelector="{StaticResource templateSelector}">
    <TreeView.ItemContainerStyle>
        <Style TargetType="TreeViewItem">
            <Setter Property="IsExpanded" Value="True"/>
            <Setter Property="Focusable" Value="False"/>
        </Style>
    </TreeView.ItemContainerStyle>
</TreeView>

Any ideas how to achive that without creating a complete new TreeViewItem template?


Solution

  • The collapse / expand ToggleButton is defined in the control template of the TreeViewItem and there are not any properties to hide them. Consequently, you have to adapt the TreeViewItem template.

    You can create a copy of the default TreeViewItem style using Visual Studio or Blend and adapt it. The key is to remove the Expander ToggleButton and its triggers. The column for it must be kept for the indentation. The setter for the IsExpanded property expands all items by default.

    <Style TargetType="{x:Type TreeViewItem}">
       <Setter Property="IsExpanded"
               Value="True" />
       <Setter Property="Background"
               Value="Transparent" />
       <Setter Property="HorizontalContentAlignment"
               Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
       <Setter Property="VerticalContentAlignment"
               Value="{Binding 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">
          <Setter.Value>
             <Style>
                <Setter Property="Control.Template">
                   <Setter.Value>
                      <ControlTemplate>
                         <Rectangle />
                      </ControlTemplate>
                   </Setter.Value>
                </Setter>
             </Style>
          </Setter.Value>
       </Setter>
       <Setter Property="Template">
          <Setter.Value>
             <ControlTemplate TargetType="{x:Type TreeViewItem}">
                <ControlTemplate.Resources>
                   <local:DataTypeConverter x:Key="DataTypeConverter" />
                </ControlTemplate.Resources>
                <Grid>
                   <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="19" />
                      <ColumnDefinition Width="Auto"
                                        MinWidth="0" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="*" />
                   </Grid.ColumnDefinitions>
                   <Grid.RowDefinitions>
                      <RowDefinition Height="Auto" />
                      <RowDefinition />
                   </Grid.RowDefinitions>
                   <Border x:Name="Bd"
                           Grid.Column="1"
                           Padding="{TemplateBinding Padding}"
                           Background="{TemplateBinding Background}"
                           BorderBrush="{TemplateBinding BorderBrush}"
                           BorderThickness="{TemplateBinding BorderThickness}"
                           SnapsToDevicePixels="true">
                      <ContentPresenter x:Name="PART_Header"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        ContentSource="Header"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                   </Border>
                   <ItemsPresenter x:Name="ItemsHost"
                                   Grid.Row="1"
                                   Grid.Column="1"
                                   Grid.ColumnSpan="2" />
                </Grid>
                <ControlTemplate.Triggers>
                   <Trigger Property="IsExpanded"
                            Value="false">
                      <Setter TargetName="ItemsHost"
                              Property="Visibility"
                              Value="Collapsed" />
                   </Trigger>
                   <Trigger Property="IsSelected"
                            Value="true">
                      <Setter TargetName="Bd"
                              Property="Background"
                              Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                      <Setter Property="Foreground"
                              Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                   </Trigger>
                   <MultiTrigger>
                      <MultiTrigger.Conditions>
                         <Condition Property="IsSelected"
                                    Value="true" />
                         <Condition Property="IsSelectionActive"
                                    Value="false" />
                      </MultiTrigger.Conditions>
                      <Setter TargetName="Bd"
                              Property="Background"
                              Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}" />
                      <Setter Property="Foreground"
                              Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}" />
                   </MultiTrigger>
                   <Trigger Property="IsEnabled"
                            Value="false">
                      <Setter Property="Foreground"
                              Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                   </Trigger>
                </ControlTemplate.Triggers>
             </ControlTemplate>
          </Setter.Value>
       </Setter>
       <Style.Triggers>
          <Trigger Property="VirtualizingPanel.IsVirtualizing"
                   Value="true">
             <Setter Property="ItemsPanel">
                <Setter.Value>
                   <ItemsPanelTemplate>
                      <VirtualizingStackPanel />
                   </ItemsPanelTemplate>
                </Setter.Value>
             </Setter>
          </Trigger>
       </Style.Triggers>
    </Style>
    

    If you want to remove the indentation of the root level items, you can refer to this related question.

    TreeView with first level indentation.