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

Broken lines in RadTreeView

7 Answers 216 Views

TreeView

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

7 Answers, 1 is accepted

answered on 18 Oct 2012, 07:01 PM

BrokenLine.png

I have the same issue, see attached image. if i resize the control, it will sometimes line up the lines correctly, looks like either its a alignment issue or some snapping issue?

HierarchicalDataTemplate:

<telerik:RadTreeView.ItemTemplateSelector>

<view:TreeItemTemplateSelector>

<view:TreeItemTemplateSelector.ParentTemplate>

<HierarchicalDataTemplate ItemsSource="{Binding Children}">

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Text}" />

</StackPanel>

</HierarchicalDataTemplate>

</view:TreeItemTemplateSelector.ParentTemplate>

<view:TreeItemTemplateSelector.FieldTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Text}" />

</StackPanel>

</DataTemplate>

</view:TreeItemTemplateSelector.FieldTemplate>

</view:TreeItemTemplateSelector>

</telerik:RadTreeView.ItemTemplateSelector>

Custom ContentTemplate:

<Style TargetType="{x:Type telerik:RadTreeViewItem}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">

<Grid x:Name="RootElement">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition/>

</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="EditStates">

<VisualState x:Name="Display"/>

<VisualState x:Name="Edit">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditHeaderElement">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>

<DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image"/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected"/>

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedUnfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="LoadingOnDemandStates">

<VisualState x:Name="LoadingOnDemand">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LoadingVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Expander">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>

</Storyboard>

</VisualState>

<VisualState x:Name="LoadingOnDemandReverse"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused"/>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStates">

<VisualState x:Name="Expanded">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsHost">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Collapsed"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="2"/>

<Border x:Name="MouseOverVisual" Background="Transparent" BorderBrush="{StaticResource scb_CheckBoxCheck}" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">

</Border>

<Border x:Name="SelectionUnfocusedVisual" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">

</Border>

<Border x:Name="SelectionVisual" Background="{StaticResource scb_CheckBoxCheck}" BorderBrush="{StaticResource scb_CheckBoxCheck}" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">

</Border>

<StackPanel x:Name="IndentContainer" Orientation="Horizontal">

<Rectangle x:Name="IndentFirstVerticalLine" Stroke="#FFCCCCCC" Visibility="Collapsed" VerticalAlignment="Top" Width="1" />

</StackPanel>

<Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="20">

<Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center"/>

<Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="#FFCCCCCC" VerticalAlignment="Top" Width="1"/>

<ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>

<Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">

<Grid.RenderTransform>

<TransformGroup>

<RotateTransform Angle="0" CenterY="0.5" CenterX="0.5"/>

</TransformGroup>

</Grid.RenderTransform>

<Path Data="M1,0A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>

<Path Data="M0,-1.1L0.1,-1 0,-0.9" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill" StrokeThickness="1" VerticalAlignment="Top" Width="4"/>

</Grid>

<CheckBox x:Name="CheckBoxElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

</CheckBox>

<RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

</RadioButton>

<Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" Margin="2" VerticalAlignment="Center"/>

<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="3" RadiusX="3" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>

<Grid Grid.ColumnSpan="2" Grid.Column="4">

<ContentPresenter ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<ContentPresenter x:Name="EditHeaderElement" ContentTemplate="{TemplateBinding HeaderEditTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</Grid>

<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

answered on 23 Oct 2012, 05:37 PM

WpfApplication3.zip

Hi Quoc,

Can you please try to reproduce the issue in the attached sample and post the steps or the modified solution that reproduce the issue? That would help us further investigate the case.

Thank you in advance.

Regards,
Tina Stancheva
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

answered on 24 Oct 2012, 10:20 AM

sampleBrokenLines.jpg

Hi Tina,

I was able to replicate in the sample. I changed the Alignment of the Grid that contains the RadTreeView, and specified a width and height. i changed the Grid background to black and foreground of the text to white so the lines are more visible.

<Grid Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Width="500" Height="500" >

<telerik:RadTreeView IsLineEnabled="True"

IsRootLinesEnabled="false"

ItemsSource="{Binding Items}">

<telerik:RadTreeView.ItemTemplateSelector>

<view:TreeItemTemplateSelector>

<view:TreeItemTemplateSelector.ParentTemplate>

<HierarchicalDataTemplate ItemsSource="{Binding Children}">

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Text}" Foreground="White" />

</StackPanel>

</HierarchicalDataTemplate>

</view:TreeItemTemplateSelector.ParentTemplate>

<view:TreeItemTemplateSelector.FieldTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Text}" Foreground="White" />

</StackPanel>

</DataTemplate>

</view:TreeItemTemplateSelector.FieldTemplate>

</view:TreeItemTemplateSelector>

</telerik:RadTreeView.ItemTemplateSelector>

</telerik:RadTreeView>

</Grid>

If you now resize the window horizontally at particular points you'll be able to see the broken lines. I have included a screen shot.

answered on 29 Oct 2012, 09:16 AM

Hello Quoc,

Thank you for getting back to us. I can now better understand your setup and I can confirm that this is a bug. It is caused by the layout of the panel hosting the RadTreeView control - when its HorizontalAlignment is centered on the screen (either when the property is set to Center or when the HorizontalAlignment is Stretched and its Width is small enough to position the panel at the center of the screen), the RadTreeView lines are incorrectly positioned during the resize of the panel.

This is actually a known issue and this it is logged in our PITS where you can track its progress, as well as vote to increase its priority.

Kind regards,
Tina Stancheva
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.