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>
1 Answer, 1 is accepted
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