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:
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>