简体   繁体   中英

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:

treeViewItem 边框的工作原理

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

在此处输入图片说明

How could I achieve this? Is it even possible?

Thank you.

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM