Xaml 中的 WPF RadioButton 组

Question

在我们正在构建的 WPF 应用程序中，我们在各个 StackPanel 中并排放置了 3 组 RadioButton。我们正在尝试对以下行为进行编程。在表单中切换时，我们不想切换每个单选按钮（标准行为），而是希望切换到每个组中的“第一个”单选按钮，并能够向上/向下箭头到另一个一旦我们进入组，每个组中的单选按钮（列表）。我们为列表中第一个单选按钮下方的单选按钮设置了 IsTabStop=False。这为我们提供了在每个组中切换所需的行为，但这不允许向上/向下箭头列表的能力。仅当 IsTabStop=True 时，向上/向下箭头行为才有效。我们还尝试设置单选按钮的 GroupName 属性，但行为与上述相同。在旧的 win 表单中，有一个具有这种行为的单选按钮列表控件，我们只是试图重新创建它。有谁知道如何重新创建这种行为？提前感谢您的帮助...！

Answer 1

要从左到右更改方向，请使用 FlowDirection 属性为 RightToLeft。

在组中使用 RadioButton，以便用户只能从可用选项中选择一个选项（无需额外编码即可取消选中其他选项）。使用与单选按钮相同的 GroupName 标记在一个组中，以便只能选择一个选项，如下所示。

    <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

我认为 KeyboardNavigation 附加属性可以解决问题。

我在 XAML 中模拟了一个快速 WPF 示例（抱歉，篇幅过长），使用 ItemsControls 对 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

一种解决方案是使用样式化列表框的技术，使其看起来像一个单选按钮组。然后可以在样式列表框之间切换，并使用箭头键选择单个“单选按钮”列表框项目。

这是一个完整的演示，也可以通过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>