AutoScrollToSelectedItem does not work correctly with different HeirarchicalTemplate

2 posts, 0 answers
  1. svetlana
    svetlana avatar
    1 posts
    Member since:
    Oct 2018

    Posted 18 Oct 2018 Link to this post

    I use RadTreeView with Custom style and HeirarchicalTemplate. I work with IsSelected property via twoway binding from viewmodel. While I switch manually or programmatically by elements of the same type AutoScrollToSelectedItem works correctly. As soon as I switch to an item of a different viewmodel type I get a scroll to the middle of the tree, the selected item is not visible on the screen. When opening the tree for the first time without the selected elements, I also have a scroll in the middle, although I expect to see the beginning of the list. 

                <Style x:Key="ExpanderStyle" TargetType="ToggleButton">
                    <Setter Property="IsEnabled" Value="False" />
                    <Setter Property="IsTabStop" Value="False" />
                    <Setter Property="Cursor" Value="None"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Grid x:Name="Button" Margin="0,4,0,0" HorizontalAlignment="Right"
                                      VerticalAlignment="Top" Width="16" Height="16">
                                    <Rectangle Stroke="Transparent" HorizontalAlignment="Stretch"
                                               VerticalAlignment="Stretch" Width="Auto" Height="Auto"
                                               RadiusX="3" RadiusY="3" Fill="Transparent">
                                    </Rectangle>
                                    <Rectangle x:Name="CollapsedVisual" HorizontalAlignment="Left"
                                               VerticalAlignment="Top" Width="2" Height="8" RadiusX="0"
                                               RadiusY="0" Fill="Transparent" Margin="7,4,0,0" />
                                    <Rectangle RadiusX="0" RadiusY="0" Fill="Transparent"
                                               HorizontalAlignment="Left" Margin="4,7,0,0"
                                               VerticalAlignment="Top" Width="8" Height="2" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <Style x:Key="TreeItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource RadTreeViewItemStyle}">
                    <Setter Property="IsExpanded" Value="True"/>
                    <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="ExpanderStyle" Value="{StaticResource ExpanderStyle}"/>
                    <Setter Property="FocusVisualStyle">
                        <Setter.Value>
                            <Style>
                                <Setter Property="Control.Template">
                                    <Setter.Value>
                                        <ControlTemplate>
                                            <Rectangle Margin="0" Stroke="Transparent" StrokeThickness="0"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="Padding" Value="1,0,5,0"/>
                    <Setter Property="IsDropAllowed" Value="True"/>
                    <Setter Property="IsEnabled" Value="True"/>
                    <Setter Property="MinHeight" Value="24"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
                                <Grid x:Name="RootElement">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <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="*"/>
                                            <ColumnDefinition Width="10"/>
                                        </Grid.ColumnDefinitions>
                                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="2"/>

                                        <Border x:Name="MouseOverVisual" BorderBrush="WhiteSmoke" BorderThickness="1" Background="Transparent"
            Grid.ColumnSpan="4" Grid.Column="2" CornerRadius="1" Opacity="0"/>

                                        <Border x:Name="SelectionUnfocusedVisual" BorderBrush="CornflowerBlue" BorderThickness="1" Background="Transparent"
            Grid.ColumnSpan="4" Grid.Column="2" CornerRadius="1" Visibility="Collapsed" >
                                        </Border>

                                        <Border x:Name="SelectionVisual" BorderBrush="CornflowerBlue" BorderThickness="1" Background="Transparent"
                                            Grid.ColumnSpan="4" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                        </Border>

                                        <StackPanel Grid.Column="0" 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">
    <!--                                        <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">
                                                <!--                                        <Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="#FFCCCCCC" 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:Expression_DarkTheme/>
                                            </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:Expression_DarkTheme/>
                                            </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="4" Grid.Column="2" IsHitTestVisible="False" 
               RadiusY="3" RadiusX="3" Stroke="Black" StrokeThickness="1"
               StrokeDashArray="1 2" Visibility="Collapsed"/>

                                        <Grid Grid.Column="4" Grid.ColumnSpan="2">
                                            <ContentPresenter 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.Triggers>
                                    <Trigger Property="IsInEditMode" Value="True">
                                        <Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>
                                        <Setter Property="Visibility" TargetName="EditHeaderElement" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Visibility" TargetName="SelectionVisual" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="IsFocused" Value="True">
                                        <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="True"/>
                                            <Condition Property="IsSelectionActive" Value="False"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Opacity" TargetName="SelectionVisual" Value="0"/>
                                        <Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>
                                    </MultiTrigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter Property="Opacity" TargetName="Header" Value="0.5"/>
                                    </Trigger>
                                    <Trigger Property="IsExpanded" Value="True">
                                        <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="IsLoadingOnDemand" Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard x:Name="LoadingVisualTransform">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                        <Trigger.ExitActions>
                                            <StopStoryboard BeginStoryboardName="LoadingVisualTransform"/>
                                        </Trigger.ExitActions>
                                        <Setter Property="Visibility" TargetName="LoadingVisual" Value="Visible"/>
                                        <!--<Setter Property="Visibility" TargetName="Expander" Value="Collapsed"/>-->
                                    </Trigger>
                                    <Trigger Property="IsDragOver" Value="True">
                                        <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" SourceName="HeaderRow" Value="True">
                                        <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

     

            <telerik:RadTreeView Name="treeViewOperationItems" ItemsSource="{Binding OperationCollection, Mode=TwoWay}" Background="White"
                                 IsLineEnabled="False" Grid.Row="1" Grid.RowSpan="2" Margin="5" ItemContainerStyle="{StaticResource TreeItemStyle}"
                                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                                 AutoScrollToSelectedItem="True">

                <telerik:RadTreeView.Resources>
                    <HierarchicalDataTemplate DataType="{x:Type viewModels:OperationDefVM}" ItemsSource="{Binding Items}">
                        <StackPanel Orientation="Vertical" Margin="10" FocusManager.FocusedElement="{Binding ElementName=textBox}" >
                            <TextBox x:Name="textBox" Text="{Binding Path=Data.Def.UniqueId}" 
                                     helpers:FocusExtension.IsFocused="{Binding IsSelected, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                                     MinWidth="100" Style="{StaticResource TreeTextBoxStyle}"/>
                            <extendEditor:ExtendedEditor Text="{Binding Path=Data.Def.UniqueId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                                         x:Name="edit" Height="40"  Width="400" FontSize="14"/>
                        </StackPanel>
                    </HierarchicalDataTemplate>

                    <HierarchicalDataTemplate DataType="{x:Type viewModels:IndexedStepVM}" ItemsSource="{Binding Items}">
                        <StackPanel Orientation="Horizontal" Margin="10">
                            <Grid Width="30" VerticalAlignment="Center">
                                <TextBlock Text="{Binding Crew}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                            </Grid>
                            <TextBlock Text="{Binding Path=Index, StringFormat='{}{0}. ' }" 
                                       Background="Transparent" Foreground="{StaticResource EditorTextColor}" 
                                       VerticalAlignment="Center"/>
                            <telerik:RadWatermarkTextBox x:Name="textBox"
                                     Text="{Binding Path=Title}"
                                     helpers:FocusExtension.IsFocused="{Binding IsSelected, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                                     TextWrapping="Wrap" AcceptsReturn="True"
                                     WatermarkContent="{Binding Watermark}"
                                     BorderThickness="0" BorderBrush="Transparent" Foreground="{StaticResource EditorTextColor}"
                                     Background="Transparent">
                                <telerik:RadWatermarkTextBox.InputBindings>
                                    <KeyBinding Command="{Binding AddItemAfterMeCommand}" Key="Return" Modifiers="Control"/>
                                    <KeyBinding Command="{Binding SelfKillCommand}" Key="Delete"  Modifiers="Control"/>
                                </telerik:RadWatermarkTextBox.InputBindings>
                            </telerik:RadWatermarkTextBox>
                        </StackPanel>
                    </HierarchicalDataTemplate>

         </telerik:RadTreeView.Resources>
            </telerik:RadTreeView>



  2. Dinko
    Admin
    Dinko avatar
    937 posts

    Posted 23 Oct 2018 Link to this post

    Hello Svetlana,

    Thank you for the provided code snippet.

    I have prepared a sample project based on the provided code snippets to test your scenario. You can find the project attached to this reply. When you run the application, the scroll is in the middle because of the FocusManager which is set to the TextBox. Basically, the last created TextBox will be focused which is messing up the AutoScrollToSelectedItem logic. You can remove this attached property. After removing it the functionality is working as expected. Can you check the attached project on your side and let me know how it goes?

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top