WPF RadioButton groupes dans Xaml

Question

Dans l'application WPF nous construisons, nous avons côte à côte 3 groupes de RadioButtons dans StackPanels individuels. Nous essayons de programmer le comportement suivant. Quand on fait un tabulation à travers le formulaire, on ne veut pas faire de tabulation sur chacun des boutons radio (comportement standard), on aimerait plutôt tabuler sur le "premier" bouton radio de chaque groupe et avoir la possibilité de fléchir vers le haut/bas radiobuttons (liste) dans chaque groupe une fois que nous avons tabulé au groupe. Nous avons mis le IsTabStop = False pour les radiobuttons en dessous de chacun des premiers radiobutton de la liste. Cela nous donne le comportement souhaité pour la tabulation à travers chaque groupe, mais cela ne permet pas la possibilité de fléchir haut/bas de la liste. Le comportement de la flèche vers le haut/vers le bas ne fonctionne que si IsTabStop = True. Nous avons également essayé de définir l'attribut GroupName du radiobutton, mais le comportement est le même que celui décrit ci-dessus. Dans les anciennes formes de victoire, il y avait un contrôle de liste de radiobutton qui avait ce comportement et nous essayons juste de le recréer. Est-ce que quelqu'un a une idée de comment recréer ce comportement? Merci d'avance pour votre aide...!

Answer 1

Pour modifier l'orientation de gauche à droite, utilisez la propriété FlowDirection vers RightToLeft.

RadioButton est utilisé dans le groupe afin que l'utilisateur ne puisse sélectionner qu'une option parmi les options disponibles (aucun codage supplémentaire n'est requis pour décocher les autres). Utilisez le même GroupName des radiobuttons pour marquer dans un groupe afin qu'une seule option puisse être sélectionnée comme suit.

<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

Je pense que les propriétés de KeyboardNavigation ci-joint feront l'affaire.

Je moquaient un exemple WPF rapide en XAML (désolé pour la longueur), en utilisant ItemsControls pour regrouper les éléments 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

Une solution consiste à utiliser la technique du style d'une zone de liste pour ressembler un groupe de boutons radio. Ensuite, il est possible d'effectuer un tabulation entre les zones de liste stylées et d'utiliser les touches fléchées pour sélectionner les éléments individuels de la zone de liste «bouton radio».

Voici une démo complète qui peut également être téléchargé en 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>