Broken lines between siblings on a treeview

5 posts, 1 answers
  1. Edmund Covington
    Edmund Covington avatar
    16 posts
    Member since:
    Jan 2014

    Posted 28 Jan 2014 Link to this post

    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
  2. Boris
    Admin
    Boris avatar
    276 posts

    Posted 29 Jan 2014 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Edmund Covington
    Edmund Covington avatar
    16 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 in reply to Boris Link to this post

    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
  5. Answer
    Boris
    Admin
    Boris avatar
    276 posts

    Posted 30 Jan 2014 Link to this post

    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 >>
  6. Edmund Covington
    Edmund Covington avatar
    16 posts
    Member since:
    Jan 2014

    Posted 30 Jan 2014 in reply to Boris Link to this post

    That worked very well. Thanks very much for your help.
Back to Top
UI for WPF is Visual Studio 2017 Ready