TreeViewItem Padding and Margin Issues

[Mustafa Erhan]

Hi all,

I have some padding and margin problems about treeview items. I wanted to mark it at my attachment image. I'm having trouble about the red and the yellow marked spaces. I tried many things but can not succeed.

Here is my treview : 

01.<telerik:RadTreeView x:Name="radTreeView"
02.    IsTriStateMode="True"
03.    ItemsSource="{Binding SomeSource, Mode=TwoWay}"
04.    IsOptionElementsEnabled="True" >
05.
06.    <telerik:RadTreeView.ItemContainerStyle>
07.        <Style TargetType="telerik:RadTreeViewItem">
08.            <Setter Property="telerik:RadTreeViewItem.IsExpanded" Value="True"/>
09.            <Setter Property="telerik:RadTreeViewItem.IsChecked" Value="True"/>
10.        </Style>
11.    </telerik:RadTreeView.ItemContainerStyle>
12.
13.    <telerik:RadTreeView.ItemTemplate>
14.        <HierarchicalDataTemplate ItemsSource="{Binding Path=Siblings, Mode=TwoWay}">
15.            <telerik:RadTreeViewItem x:Name="treeViewItem"
16.                Header="{Binding Header}" DataContext="{Binding .}"/>
17.        </HierarchicalDataTemplate>
18.    </telerik:RadTreeView.ItemTemplate>
19.
20.</telerik:RadTreeView>

 

Here is my custom styles : 

 

01.<Style TargetType="telerik:RadTreeView"
02.    BasedOn="{StaticResource RadTreeViewStyle}">
03.    <Setter Property="BorderThickness" Value="5"/>
04.    <Setter Property="IsLineEnabled" Value="False" />
05.    <Setter Property="telerik:StyleManager.Theme" Value="Office2016" />
06.</Style>
07.
08.<Style TargetType="telerik:RadTreeViewItem"
09.    BasedOn="{StaticResource RadTreeViewItemStyle}">
10.    <Setter Property="HorizontalAlignment" Value="Left" />
11.    <Setter Property="HorizontalContentAlignment" Value="Left" />
12.    <Setter Property="MinHeight" Value="8" />
13.</Style>

 

Thank you in advance.

 

 

[Sia]

Hello,

Indeed it seems that there is unnecessary large space between the checkbox and the header and fixing it is not a trivial task. Looking at the attached styles I assumed that you use our Office2016  theme and it is set through StyleManager. Please correct me if I am wrong. 

Regarding the Height of the RadTreeViewItems, you need to change the default MinHeight which is 27px. Also you will need to remove the default padding of the CheckBox which is inherited from our style targeting CheckBox. Both should be fixed by setting the following style: 

<Style TargetType="telerik:RadTreeViewItem">
      <Setter Property="MinHeight" Value="20" />
      <Style.Resources>
             <Style TargetType="CheckBox">
                    <Setter Property="Padding" Value="0" />
              </Style>
      </Style.Resources>
</Style>

However there still will be another 4px gap caused by margin of an image in the default ControlTemplate. Please let me know if you need to remove it as well, because you will need to set  a custom ControlTemplate in this case. 

Regards,
Sia
Progress Telerik

[Mustafa Erhan]

Hi Sia,

 

Thank you for your reply. Yes we are using Office2016 theme. I applied the style you sent, but UI not changed. If I increment MinHeight property I can see the effect, but the height can not be less then the picture I posted. I think something else inside is effecting the height. 

Also the checkbox padding has no effect. I incremented the value, to see if its the one, but have no effect at UI. Maybe I'm doing something wrong.

Are there anything I can do to help you investigate the problem ? 

 

Thank you.

[Sia]

Hello again,

Please find attached a sample project with the style applied to the left TreeView, the right one is with the default settings. A screenshot of the result is also attached. Please modify it to correspond to your settings so I can see why the style is not applied in your scenario. 

Regards,
Sia
Progress Telerik

[Mustafa Erhan]

Thank you Sia, when I put your style setters inside that area it worked : 

 

01.<telerik:RadTreeView Grid.Row="1" x:Name="radTreeView" IsTriStateMode="True"
02.    ItemsSource="{Binding FilterItem, Mode=TwoWay}" IsOptionElementsEnabled="True">
03.    <telerik:RadTreeView.ItemContainerStyle>
04.        <Style TargetType="telerik:RadTreeViewItem">
05.            <Setter Property="telerik:RadTreeViewItem.IsExpanded" Value="True"/>
06.            <Setter Property="telerik:RadTreeViewItem.IsChecked" Value="True"/>
07.            <Setter Property="telerik:RadTreeViewItem.MinHeight" Value="20" />
08.            <Style.Resources>
09.                <Style TargetType="CheckBox">
10.                    <Setter Property="Padding" Value="0" />
11.                </Style>
12.            </Style.Resources>
13.        </Style>
14.    </telerik:RadTreeView.ItemContainerStyle>
15.
16.    <telerik:RadTreeView.ItemTemplate>
17.        <HierarchicalDataTemplate ItemsSource="{Binding Path=Siblings, Mode=TwoWay}">
18.            <telerik:RadTreeViewItem x:Name="treeViewItem"
19.                Header="{Binding Header}" DataContext="{Binding .}"/>
20.        </HierarchicalDataTemplate>
21.    </telerik:RadTreeView.ItemTemplate>
22.</telerik:RadTreeView>

[quote]However there still will be another 4px gap caused by margin of an image in the default ControlTemplate. Please let me know if you need to remove it as well, because you will need to set  a custom ControlTemplate in this case.[/quote]

[Sia]

Hello again,

Please find attached the TreeViewItem's custom template that you need to set in order to remove the default margin from the image. However I would advise you to use implicit style instead of setting it through the ItemContainerStyle property. 

Regards,
Sia
Progress Telerik

[Mustafa Erhan]

Thank you very much Sia.

I really appreciated.