Grupos WPF RadioButton en Xaml

Question

En la aplicación WPF que estamos compilando, tenemos 3 grupos de RadioButtons en StackPanels individuales uno al lado del otro. Estamos tratando de programar el siguiente comportamiento. Cuando tabulamos a través del formulario, no queremos tabular a través de cada uno de los botones de radio (comportamiento estándar), en su lugar nos gustaría tabular el "primer" botón de radio en cada grupo y tener la capacidad de flecha arriba/abajo al otro radiobuttons (list) en cada grupo una vez que tabulamos al grupo. Hemos configurado IsTabStop = False para los botones de radio debajo de cada uno de los primeros botones de la lista. Esto nos da el comportamiento deseado para tabular a través de cada grupo, pero esto no permite la habilidad de subir/bajar la lista. El comportamiento de flecha arriba/abajo solo funciona si IsTabStop = True. También intentamos establecer el atributo GroupName del botón de radio, pero el comportamiento es el mismo que el descrito anteriormente. En las viejas formas de ganar, había un control de lista de botones de radio que tenía este comportamiento y solo estamos tratando de recrearlo. ¿Alguien tiene alguna idea de cómo recrear este comportamiento? Gracias de antemano por tu ayuda...!

Answer 1

Para cambiar la orientación de izquierda a derecha, use la propiedad FlowDirection a RightToLeft.

RadioButton se usa en el grupo para que el usuario pueda seleccionar solo una opción entre las opciones disponibles (no se necesita codificación adicional para desactivar otras). Use el mismo nombre de grupo de los botones de radio para marcar en un grupo, de modo que solo se pueda seleccionar una opción de la siguiente manera.

<RadioButton Height="16" Margin="26,18,132,0" Name="RadioButton_Option1" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue">ASP.net Articles </RadioButton> 

    <RadioButton Height="16" Margin="26,18,132,0" Name="RadioButton_Option2" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue">C# Articles</RadioButton> 

    <RadioButton Height="16" Margin="26,18,132,0" Name="RadioButton_Option3" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue">ADO.net Articles</RadioButton> 

    <RadioButton Height="17" Margin="26,18,115,0" Name="RadioButton_Option4" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue" Width="164">SQL Server 2005 Articles</RadioButton> 

    <Button Margin="26,18,132,0" Width="75" Height="20" Click="Button_Click">Open Articles</Button> 

    </StackPanel > 

Answer 2

creo que las propiedades KeyboardNavigation adjunto harán el truco.

I burlado de un ejemplo WPF rápida en XAML (lo siento por la longitud), usando ItemsControls agrupar los elementos RadioButton:

<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> 

Answer 3

Una solución es utilizar la técnica de labrar un cuadro de lista para parecerse un grupo de botones de radio. A continuación, es posible tabular entre los cuadros de lista con estilos, y usar las teclas de flecha para seleccionar elementos individuales del cuadro de lista 'botón de radio'.

He aquí una demostración completa que también se puede descargar como un sample application

public class RadioButtonGroupsViewModel 
{ 
    public RadioButtonGroupsViewModel() 
    { 
     Items1 = new List<string> {"One", "Two", "Three"}; 
     Selected1 = "One"; 

     Items2 = new List<string> {"Four", "Five", "Six"}; 
     Selected2 = "Five"; 

     Items3 = new List<string> {"Seven", "Eight", "Nine", "Ten"}; 
     Selected3 = "Ten"; 
    } 

    public IEnumerable<string> Items1 { get; private set; } 
    public string Selected1 { get; set; } 

    public IEnumerable<string> Items2 { get; private set; } 
    public string Selected2 { get; set; } 

    public IEnumerable<string> Items3 { get; private set; } 
    public string Selected3 { get; set; } 
} 

Xaml

xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 

    <Page.Resources> 
    <Style x:Key="RadioButtonListBoxStyle" TargetType="ListBox"> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="ItemContainerStyle"> 
     <Setter.Value> 
      <Style TargetType="ListBoxItem"> 
      <Setter Property="SnapsToDevicePixels" Value="true" /> 
      <Setter Property="OverridesDefaultStyle" Value="true" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
       <ControlTemplate TargetType="ListBoxItem"> 
        <RadioButton 
         IsTabStop="False" 
         GroupName="" 
         IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}" > 
         <RadioButton.Content> 
          <Border VerticalAlignment= 
            "{TemplateBinding Control.VerticalContentAlignment}" Padding="2"> 
           <ContentPresenter 
            Margin="{TemplateBinding Control.Padding}" 
            VerticalAlignment= 
             "{TemplateBinding Control.VerticalContentAlignment}" 
            HorizontalAlignment= 
             "{TemplateBinding Control.HorizontalContentAlignment}" 
            RecognizesAccessKey="True" /> 
          </Border> 
         </RadioButton.Content> 
        </RadioButton> 
       </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      </Style> 
     </Setter.Value> 
     </Setter> 
    </Style> 
    </Page.Resources> 

    <Page.DataContext> 
    <Samples:RadioButtonGroupsViewModel /> 
    </Page.DataContext> 

    <Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="auto" /> 
     <RowDefinition Height="auto" /> 
     <RowDefinition Height="auto" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 

    <ListBox Style="{StaticResource RadioButtonListBoxStyle}" 
      ItemsSource="{Binding Items1}" 
      SelectedItem="{Binding Selected1}"> 
     <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" 
         KeyboardNavigation.DirectionalNavigation="Cycle" /> 
     </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
    </ListBox> 

    <ListBox Grid.Row="1" 
      Style="{StaticResource RadioButtonListBoxStyle}" 
      ItemsSource="{Binding Items2}" 
      SelectedItem="{Binding Selected2}"> 
     <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" 
         KeyboardNavigation.DirectionalNavigation="Cycle" /> 
     </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
    </ListBox> 

    <ListBox Grid.Row="2" 
      Style="{StaticResource RadioButtonListBoxStyle}" 
      ItemsSource="{Binding Items3}" 
      SelectedItem="{Binding Selected3}"> 
     <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" 
         KeyboardNavigation.DirectionalNavigation="Cycle" /> 
     </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
    </ListBox> 
    </Grid>