Question

在我们正在构建的WPF应用程序中，我们在各个StackPanel中并排放置了3组RadioButton。我们正在尝试编写以下行为。当在表格中进行选项卡时，我们不希望选中每个单选按钮（标准行为），而是我们希望选中每个组中的“第一个”单选按钮，并且能够向上/向下箭头指向另一个我们选中组后，每组中的radiobuttons（列表）。我们为列表中每个第一个radiobutton下面的单选按钮设置了IsTabStop = False。这为我们提供了标记每个组的所需行为，但这不允许向上/向下箭头列表。箭头向上/向下行为仅在IsTabStop = True时有效。我们还尝试设置radiobutton的GroupName属性，但行为与上述相同。在旧的win表单中，有一个radiobutton列表控件具有此行为，我们只是尝试重新创建它。有没有人知道如何重新创建这种行为？在此先感谢您的帮助......！

Answer 1

我认为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 2

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

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

Answer 3

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

RadioButton用于组中，因此用户只能从可用选项中选择一个选项（不需要额外编码即可取消选中其他选项）。使用相同的radiobuttons 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 >

Xaml中的WPF RadioButton组

3 个答案: