WPF RadioButton groups in Xaml

Question

In the WPF app we are building, we have 3 groups of RadioButtons in individual StackPanels side by side. We are trying to program the following behavior. When tabbing through the form, we don't want to tab through each of the radiobuttons (standard behavior), instead we would like to tab to the "first" radiobutton in each group and have the ability to arrow up/down to the other radiobuttons (list) in each group once we tab to the group. We have set the IsTabStop=False for the radiobuttons below each of the first radiobutton in the list. This gives us the desired behavior for tabbing through each group, but this does not allow for the ability to arrow up/down the list. The arrow up/down behavior only works if the IsTabStop=True. We also tried setting the GroupName attribute of the radiobutton, but the behavior is the same as described above. In the old win forms, there was a radiobutton list control that had this behavior and we are just trying to recreate it. Does anyone have any idea as to how to recreate this behavior? Thanks in advance for your help...!

Answer 1

I think the KeyboardNavigation attached properties will do the trick.

I mocked up a quick WPF example in XAML (sorry for the length), using ItemsControls to group the RadioButton elements:

<Window
  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" mc:Ignorable="d"
  x:Class="Experiment.MainWindow"
  x:Name="Window"
  Title="MainWindow"
  Width="640" Height="480">

  <Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="91,139,0,0">
      <ItemsControl KeyboardNavigation.IsTabStop="False" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.DirectionalNavigation="Contained">
        <RadioButton Content="Alpha" KeyboardNavigation.TabIndex="2"/>
        <RadioButton Content="Delta" KeyboardNavigation.TabIndex="2"/>
        <RadioButton Content="Gamma" IsChecked="True" KeyboardNavigation.TabIndex="1"/>
        <RadioButton Content="Beta" KeyboardNavigation.TabIndex="2"/>
      </ItemsControl>
    </Grid>
    <Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="244,139,0,0">
      <ItemsControl KeyboardNavigation.IsTabStop="False" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.DirectionalNavigation="Contained">
        <RadioButton x:Name="First" Content="Eenee" KeyboardNavigation.TabIndex="2"/>
        <RadioButton x:Name="Second" Content="Meenee" IsChecked="True" KeyboardNavigation.TabIndex="1"/>
        <RadioButton x:Name="Third" Content="Mynee" KeyboardNavigation.TabIndex="2"/>
        <RadioButton x:Name="Fourth" Content="Moe" KeyboardNavigation.TabIndex="2"/>
      </ItemsControl>
    </Grid>
    <Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="391,139,0,0">
      <ItemsControl KeyboardNavigation.IsTabStop="False" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.DirectionalNavigation="Contained">
        <RadioButton Content="Extralarge" KeyboardNavigation.TabIndex="2"/>
        <RadioButton Content="Large" KeyboardNavigation.TabIndex="2"/>
        <RadioButton Content="Medium" KeyboardNavigation.TabIndex="2"/>
        <RadioButton Content="Small" IsChecked="True" KeyboardNavigation.TabIndex="1"/>
      </ItemsControl>
    </Grid>
  </Grid>
</Window>