Search code examples
c#wpftreeviewtreeviewitem

how to add border around treeViewItem, including the arrow WPF/C#


I am trying to change the design of a TreeView, so that I add a border around every TreeViewItem. As you may know, if I add a border to a TreeViewItem, like so

<TreeView Name="treeView">
    <TreeView.ItemContainerStyle>
    <Style TargetType="TreeViewItem">
      <Setter Property="IsExpanded" Value="true">
      </Setter>
        <Setter Property="BorderBrush" Value="Green"></Setter>
        <Setter Property="BorderThickness" Value="2,2,2,2" />
     </Style>
  </TreeView.ItemContainerStyle>
  <TreeView.ItemTemplate>
      <-- my template -->
  </TreeView.ItemTemplate>
</TreeView>

the border won't be around the arrow, it will be like this:

how treeViewItem border works

What I want to do is something which looks like in the pic below:

enter image description here

How could I achieve this? Is it even possible?

Thank you.


Solution

  • I've managed to make something, which is quite laughable really but it's all i could come up with... I read about ItemPresenter and ControlTemplate, I think it could be done using that, but I found the Expander class to be a little confusing, especially since I had third level children and I was unable to find something relevant about making the Expander work for them. So, my solution was to make a template, in which I had created a grid consisting of two rows: the first one being of normal height, the second one being a rectangle with the height of 1 and -160 margin (to compensate for the indent).

    <StackPanel Background="Transparent" Margin="20,20,20,20">
        <Border BorderThickness="1" BorderBrush="Gray" Margin="0">
            <TreeView Name="treeView" BorderThickness="0" Background="Transparent" Height="400" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <TreeView.ItemContainerStyle>
                    <Style TargetType="TreeViewItem">
                        <Setter Property="IsExpanded" Value="{Binding IsExpanded}" />
                    </Style>
                </TreeView.ItemContainerStyle>
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Border Grid.Column="0" Grid.Row="0">
                                <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Click="CheckBox_Click" VerticalAlignment="Center">
                                    <TextBlock Text="{Binding Description}" Width="250" Margin="0,0,0,0"/>
                                </CheckBox>
                            </Border>
                            <Rectangle Grid.Row="1" Grid.Column="0"  HorizontalAlignment="Stretch" Fill="Gray" Height="1" Margin="-160"/>
                        </Grid>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>
        </Border>