Broken lines in RadTreeView

8 posts, 0 answers
  1. Felix
    Felix avatar
    17 posts
    Member since:
    Jun 2011

    Posted 16 Jun 2011 Link to this post

    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

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 16 Jun 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Quoc
    Quoc avatar
    2 posts
    Member since:
    Oct 2012

    Posted 18 Oct 2012 Link to this post


    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>



  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Oct 2012 Link to this post

    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.

  6. Quoc
    Quoc avatar
    2 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2012 Link to this post


    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.
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Oct 2012 Link to this post

    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.

  8. Ivan Zlatanov
    Ivan Zlatanov avatar
    20 posts
    Member since:
    Jul 2009

    Posted 21 Dec 2012 Link to this post

    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.
  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 21 Dec 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready