This is a migrated thread and some comments may be shown as answers.

Broken lines between siblings on a treeview

4 Answers 24 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Edmund Covington
Top achievements
Rank 1
Edmund Covington asked on 28 Jan 2014, 03:33 PM
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

4 Answers, 1 is accepted

Sort by
0
Boris
Telerik team
answered on 29 Jan 2014, 03:01 PM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Edmund Covington
Top achievements
Rank 1
answered on 29 Jan 2014, 03:43 PM
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
0
Accepted
Boris
Telerik team
answered on 30 Jan 2014, 08:14 AM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Edmund Covington
Top achievements
Rank 1
answered on 30 Jan 2014, 11:14 AM
That worked very well. Thanks very much for your help.
Tags
TreeView
Asked by
Edmund Covington
Top achievements
Rank 1
Answers by
Boris
Telerik team
Edmund Covington
Top achievements
Rank 1
Share this question
or