Broken lines between siblings on a treeview

[Edmund Covington]

Please can you recommend a way that we can overcome this problem? The lines between siblings on a treeview don't always appear as expected. 

Many thanks

[Boris]

Hello Edmund,

This is a known issue and we plan to fix it for the upcoming Q1 (which is in the middle of February). We also have prepared a workaround which is demonstrated in the attached sample project. In it we are using "Office_Black" theme. We use the RadTreeViewStyle's ExpanderStyle property in order to set the ToggleButton's Width to 21 pixels.

<Style x:Key="ExpanderStyle" TargetType="{x:Type ToggleButton}">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="BorderBrush" Value="{StaticResource TreeView_ExpandElement_BorderBrush_ExpandedStates}"/>
                <Setter Property="Width" Value="21"/>
                <Setter Property="Template">
...

Let us know if this helps you proceed further.

Regards,
Boris Penev
Telerik

[Edmund Covington]

The example I gave doesn't include a toggle button so how can that fix the issue that we have? I was unable to open the project that you included in Visual Studio 2010.

Regards

Ed

[Boris]

Hello Edmund,

The mentioned ToggleButton is part of the RadTreeView and you can see it on the left side of the RadTreeViewItems which have sub-items (looks like an arrow and rotates when clicked). Here is the whole style which you have to use for this fix

<ResourceDictionary>
            <SolidColorBrush x:Key="TreeView_ExpandElement_BorderBrush_ExpandedStates" Color="#FF262626"/>
            <SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D"/>
            <SolidColorBrush x:Key="TreeView_ExpandElement_Background_Normal" Color="#FF989898"/>
            <SolidColorBrush x:Key="TreeView_ExpandElement_Background_MouseOver" Color="#FFFDBA64"/>
            <SolidColorBrush x:Key="TreeView_ExpandElement_Background_ExpandedStates" Color="#595959"/>
            <SolidColorBrush x:Key="TreeView_ExpandElement_BorderBrush_Normal" Color="#FF989898"/>
            <SolidColorBrush x:Key="TreeView_ExpandElement_BorderBrush_MouseOver" Color="#FFFDBA64"/>

            <Style x:Key="ExpanderStyle" TargetType="{x:Type ToggleButton}">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="BorderBrush" Value="{StaticResource TreeView_ExpandElement_BorderBrush_ExpandedStates}"/>
                <Setter Property="Width" Value="21"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.05" Storyboard.TargetName="ExpandedVisualOver" Storyboard.TargetProperty="Opacity" To="1"/>
                                                <DoubleAnimation Duration="0:0:0.05" Storyboard.TargetName="CollapsedVisualOver" Storyboard.TargetProperty="Opacity" To="1"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandedVisual" Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CollapsedVisual" Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CollapsedVisual" Storyboard.TargetProperty="Stroke">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandedVisual" Storyboard.TargetProperty="Stroke">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.05" Storyboard.TargetName="ExpandedStates" Storyboard.TargetProperty="Opacity" To="1"/>
                                                <DoubleAnimation Duration="0:0:0.05" Storyboard.TargetName="CollapsedStates" Storyboard.TargetProperty="Opacity" To="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.05" Storyboard.TargetName="ExpandedStates" Storyboard.TargetProperty="Opacity" To="0"/>
                                                <DoubleAnimation Duration="0:0:0.05" Storyboard.TargetName="CollapsedStates" Storyboard.TargetProperty="Opacity" To="1"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid x:Name="CollapsedStates" Background="Transparent">
                                    <Path x:Name="CollapsedVisual"
                                        Stretch="Fill"
                                        Fill="{StaticResource TreeView_ExpandElement_Background_Normal}"
                                        Data="M0.5,0.5 L5.2,5.4 L5.2,5.4 L0.5,10.5 z"
                                        RenderTransformOrigin="0.5,1"
                                        HorizontalAlignment="Center"
                                        Width="6"
                                        Height="9"
                                        VerticalAlignment="Center"
                                        Stroke="{StaticResource TreeView_ExpandElement_BorderBrush_Normal}"/>
                                    <Path x:Name="CollapsedVisualOver"
                                        Opacity="0"
                                        Stretch="Fill"
                                        Fill="{StaticResource TreeView_ExpandElement_Background_MouseOver}"
                                        Data="M0.5,0.5 L5.2,5.4 L5.2,5.4 L0.5,10.5 z"
                                        RenderTransformOrigin="0.5,1"
                                        HorizontalAlignment="Center"
                                        Width="6"
                                        Height="9"
                                        VerticalAlignment="Center"
                                        Stroke="{StaticResource TreeView_ExpandElement_BorderBrush_MouseOver}"/>
                                </Grid>
                                <Grid x:Name="ExpandedStates" Opacity="0" Background="Transparent">
                                    <Path x:Name="ExpandedVisual"
                                        HorizontalAlignment="Center"
                                        Margin="2,1,0,0"
                                        Width="7"
                                        Height="7"
                                        VerticalAlignment="Center"
                                        Stretch="Fill"
                                        Fill="{StaticResource TreeView_ExpandElement_Background_ExpandedStates}"
                                        Stroke="{TemplateBinding BorderBrush}"
                                        Data="M3.27,3.75 L6.5,0.5 L6.5,6.5 L0.5,6.5 z"/>
                                    <Path x:Name="ExpandedVisualOver"
                                        HorizontalAlignment="Center"
                                        Margin="2,1,0,0"
                                        Width="7"
                                        Height="7"
                                        VerticalAlignment="Center"
                                        Opacity="0"
                                        Stretch="Fill"
                                        Fill="{StaticResource TreeView_ExpandElement_Background_ExpandedStates}"
                                        Stroke="{TemplateBinding BorderBrush}"
                                        Data="M3.27,3.75 L6.5,0.5 L6.5,6.5 L0.5,6.5 z"/>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>

All you need to do is to give this style to the ExpanderStyle property of the RadTreeView:

<telerik:RadTreeView Margin="8" x:Name="tree"
                        IsDragDropEnabled="True"
                        SelectionMode="Single"
                        ExpanderStyle="{StaticResource ExpanderStyle}"

Regards,
Boris Penev
Telerik

[Edmund Covington]

That worked very well. Thanks very much for your help.