Unexpected Keyboard Navigation behavior in Item Controls
Posted: 23 Jun 2023, 15:13
Hello,
We have a menu with a stack panel of buttons. Each button contains a stack panel with two internal buttons (Yes/No). The directional navigation of the inner stack panels is set to cycle, because we want to prevent the focus from leaving its panel if directional keys are used. It should always cycle between Yes and No.
Below, you'll find a snippet with two versions. One directly implemented as a stackpanel and the other one as an items control. In blend, both versions work exactly as expected. Click on either button, then use arrow keys to move the focus. The focus will stay within its parent stack panel.
Imported to an unreal project, the green version works as expected too but the olive one doesn't. If you click the first YES button and hit the right arrow key, the focus is lost. Hit the same key again, and the focus will move to the second 'YES' button.
Is there a workaround we could try?
Simplified version:
We have a menu with a stack panel of buttons. Each button contains a stack panel with two internal buttons (Yes/No). The directional navigation of the inner stack panels is set to cycle, because we want to prevent the focus from leaving its panel if directional keys are used. It should always cycle between Yes and No.
Below, you'll find a snippet with two versions. One directly implemented as a stackpanel and the other one as an items control. In blend, both versions work exactly as expected. Click on either button, then use arrow keys to move the focus. The focus will stay within its parent stack panel.
Imported to an unreal project, the green version works as expected too but the olive one doesn't. If you click the first YES button and hit the right arrow key, the focus is lost. Hit the same key again, and the focus will move to the second 'YES' button.
Is there a workaround we could try?
Simplified version:
Code: Select all
<UserControl x:Class="KeyboardFocusTest.XAML_FocusTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
d:DesignHeight="900" d:DesignWidth="1600">
<Grid>
<Grid.Resources>
<Style TargetType="Button" x:Key="Button_KeyboardFocusTest">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="100" Height="100" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock Foreground="Yellow" HorizontalAlignment="Center" Text="{TemplateBinding Content}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10" KeyboardNavigation.DirectionalNavigation="Cycle">
<Button Content="YES" VerticalAlignment="Center" />
<Button Content="NO" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<!-- Buttons directly added to a stackpanel -->
<StackPanel Background="Green" Orientation="Horizontal" Margin="10" KeyboardNavigation.DirectionalNavigation="Cycle">
<Button Content="X" Style="{StaticResource Button_KeyboardFocusTest}" />
<Button Content="Y" Style="{StaticResource Button_KeyboardFocusTest}" />
</StackPanel>
<!-- Buttons dynamically added to a stackpanel using an itemscontrol -->
<ItemsControl Margin="10" Background="Olive" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource Button_KeyboardFocusTest}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<sys:String>X</sys:String>
<sys:String>Y</sys:String>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>