Broken lines in RadTreeView

[Felix]

Hi there

the tree lines in RadTreeView are shown broken (indented to the right about 1-3 pixels) when I use a HierachicalTemplate for the TreeViewItems. Why?

I would like to attach a screenshot, but I dont't know how to do that.

Regards
Felix Brueckner

[Tina Stancheva]

Hi Felix,

We couldn't reproduce the issue locally. I attached the sample project I used for testing to the support thread you started. Please have a look at it and let me know if it works for you or if there is something we're missing/

All the best,
Tina Stancheva
the Telerik team

[Quoc]

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="Auto"/>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="Auto"/>
                              <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>
                          </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>
                      </Grid>
                      <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

[Tina Stancheva]

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

[Quoc]

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.

[Tina Stancheva]

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

[Ivan Zlatanov]

Hi,

I can also confirm this issue. It doesn't matter of what the container of the tree is. It even happens in the DEMO application. What is the current status of this issue?

Kind Regards,

Ivan.

[Tina Stancheva]

Hello Ivan,

Our developers are currently working on providing a fix for this issue. We will do our best to include the fix for the Q1 2013 release. In the meantime, you can track the progress of the task in our PITS.

Greetings,
Tina Stancheva
the Telerik team