When we use ScrollViewer Styles and Templates the default behavior of arrow keys (Up, Down) to navigate b/w next or previous items in the ItemsControl is not working.
If this Style is not there then it is working properly, why this customization preventing the default behavior? how can it be fixed?
<Window x:Class="ContainerNavigation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ContainerNavigation"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ScrollViewer Style="{StaticResource LeftScrollViewer}">
<StackPanel Margin="20">
<StackPanel Margin="0 0 0 20">
<TextBlock Text="Section 1" Margin="0 0 0 10"/>
<ItemsControl Padding="10" KeyboardNavigation.TabNavigation="None">
<Button Content="Button 1" Margin="0 0 0 10"/>
<Button Content="Button 2" Margin="0 0 0 10"/>
<Button Content="Button 3" Margin="0 0 0 10"/>
<Button Content="Button 4" Margin="0 0 0 10"/>
<Button Content="Button 5" Margin="0 0 0 10"/>
</ItemsControl>
</StackPanel>
<StackPanel>
<TextBlock Text="Section 2" Margin="0 0 0 10"/>
<ItemsControl Padding="10" KeyboardNavigation.TabNavigation="None">
<Button Content="Button 6" Margin="0 0 0 10"/>
<Button Content="Button 7" Margin="0 0 0 10"/>
<Button Content="Button 8" Margin="0 0 0 10"/>
<Button Content="Button 9" Margin="0 0 0 10"/>
<Button Content="Button 10" Margin="0 0 0 10"/>
</ItemsControl>
</StackPanel>
</StackPanel>
</ScrollViewer>
<Button Content="Section 3" Grid.Column="1" Margin="100"/>
</Grid>
</Window>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="LeftScrollViewer" TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Column="1" BorderThickness="0,1,1,1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
</Border>
<ScrollBar x:Name="PART_VerticalScrollBar"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Grid.Row="1"
Grid.Column="1"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
In the given image when we don't use Style on ScrollViewer, keyboard & Tab navigation works as expected i.e. the focus is on Button 3 via keyboard Up, Down arrow keys. Default behavior working fine
Tried IsTabStop, Focusable properties on different elements, to inherit from default control style <Style x:Key="LeftScrollViewer" TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource {x:Type ScrollViewer}}"> but it didn't help, I want the focus to jump b/w Sections 1, 2 and 3 via Tab key and navigate b/w the items in ItemsControl via Up, Down arrow keys along with custom Style for ScrollViewer. I see that after keeping Style the arrow keys are moving the scrollbar instead of navigating b/w the items.