I want to allow users to navigate within a control using the Arrow Keys.
Users should still be able to navigate horizontally with the Tab and Shift + Tab controls but I want them to be able to navigate vertically (which may skip controls that would be focused if they navigated horizontally).
If I use the MoveFocus method on UIElement what seems to happen is that certain controls are skipped such as buttons and editable combo-boxes.
Does anyone know why this is? These controls are focused normally using TAB but FocusDirections of Up/Down/Next seem to skip the controls. If I take a look at PredictFocus it seems to report that Buttons should be focusable in this way but not editable combo-boxes.
Demo code below:
XAML:
<Window x:Class="Focus.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="525"
Height="350">
<Window.Resources>
<Style x:Key="FocusStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="CadetBlue" StrokeThickness="2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="txtBox1" Width="75"/>
<TextBox Width="200"
Name="txtBox1"
Margin="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FocusVisualStyle="{StaticResource FocusStyle}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="button1" Width="75" />
<Button Width="200"
Name="button1"
Height="25"
Margin="5"
Content="Hello"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FocusVisualStyle="{StaticResource FocusStyle}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="txtBox2" Width="75"/>
<TextBox Width="200"
Name="text2"
Margin="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FocusVisualStyle="{StaticResource FocusStyle}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="comboBox" Width="75"/>
<ComboBox Width="200"
Margin="5"
Name="comboBox"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FocusVisualStyle="{StaticResource FocusStyle}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="txtBox4" Width="75"/>
<TextBox Width="200"
Margin="5"
Name="txtBox4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FocusVisualStyle="{StaticResource FocusStyle}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="comboBox2" Width="75"/>
<ComboBox Width="200"
Margin="5"
IsEditable="True"
Name="comboBox2"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FocusVisualStyle="{StaticResource FocusStyle}" />
</StackPanel>
<TextBlock Margin="3" Text="{Binding FocussedControl.Name, StringFormat=Focused Control: {0}}" />
<TextBlock Margin="3" Text="{Binding PredictedFocusControl.Name, StringFormat=Predicted Focus {0}}"/>
</StackPanel>
</Grid>
</Window>
MainWindow.Xaml.cs :
using System.Windows;
using System.Windows.Input;
namespace Focus
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
public IInputElement FocussedControl
{
get { return (IInputElement)GetValue(FocussedControlProperty); }
set { SetValue(FocussedControlProperty, value); }
}
public static readonly DependencyProperty FocussedControlProperty =
DependencyProperty.Register("FocussedControl", typeof(IInputElement), typeof(MainWindow));
public DependencyObject PredictedFocusControl
{
get { return (DependencyObject)GetValue(PredictedFocusControlProperty); }
set { SetValue(PredictedFocusControlProperty, value); }
}
public static readonly DependencyProperty PredictedFocusControlProperty =
DependencyProperty.Register("PredictedFocusControl", typeof(DependencyObject), typeof(MainWindow));
protected override void OnPreviewLostKeyboardFocus(KeyboardFocusChangedEventArgs e)
{
FocussedControl = e.NewFocus;
}
protected override void OnPreviewKeyDown(KeyEventArgs e)
{
base.OnPreviewKeyDown(e);
if (e.Key == Key.Down)
{
var success = (FocussedControl as UIElement).MoveFocus(new TraversalRequest(FocusNavigationDirection.Down));
System.Diagnostics.Debug.Assert(success);
PredictedFocusControl = (FocussedControl as UIElement).PredictFocus(FocusNavigationDirection.Down);
}
else if (e.Key == Key.Up)
{
var success = (FocussedControl as UIElement).MoveFocus(new TraversalRequest(FocusNavigationDirection.Up));
PredictedFocusControl = (FocussedControl as UIElement).PredictFocus(FocusNavigationDirection.Up);
}
}
}
}
I fixed it by setting IsTabStop=true in the ComboBox even though Tab was working to focus on the control: