WPF RadioButton nhóm trong Xaml

Question

Trong ứng dụng WPF chúng tôi đang xây dựng, chúng tôi có 3 nhóm RadioButton trong từng StackPanels cạnh nhau. Chúng tôi đang cố gắng lập trình hành vi sau đây. Khi tabbing thông qua các hình thức, chúng tôi không muốn tab thông qua mỗi radiobuttons (hành vi tiêu chuẩn), thay vào đó chúng tôi muốn tab để "đầu tiên" radiobutton trong mỗi nhóm và có khả năng mũi tên lên/xuống khác radiobuttons (danh sách) trong mỗi nhóm khi chúng tôi tab vào nhóm. Chúng tôi đã thiết lập IsTabStop = False cho radiobutton dưới mỗi radiobutton đầu tiên trong danh sách. Điều này cho chúng ta hành vi mong muốn cho tabbing thông qua mỗi nhóm, nhưng điều này không cho phép khả năng mũi tên lên/xuống danh sách. Hành vi lên/xuống của mũi tên chỉ hoạt động nếu IsTabStop = True. Chúng tôi cũng đã cố gắng thiết lập thuộc tính GroupName của radio, nhưng hành vi cũng giống như mô tả ở trên. Trong các hình thức giành chiến thắng cũ, có một điều khiển danh sách radiobutton đã có hành vi này và chúng tôi chỉ cố gắng để tái tạo nó. Có ai có bất kỳ ý tưởng như thế nào để tái tạo hành vi này? Cảm ơn trước sự giúp đỡ của bạn...!

Answer 1

Để thay đổi hướng từ trái sang phải, hãy sử dụng thuộc tính FlowDirection là RightToLeft.

RadioButton được sử dụng trong nhóm để người dùng chỉ có thể chọn một tùy chọn từ các tùy chọn khả dụng (Không cần thêm mã hóa để bỏ chọn những người khác). Sử dụng cùng một GroupName của radiobuttons để đánh dấu trong một nhóm để chỉ có một tùy chọn có thể được chọn như sau.

<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

Tôi nghĩ rằng các đặc tính KeyboardNavigation đính kèm sẽ làm các trick.

Tôi chế nhạo lên một ví dụ WPF nhanh chóng trong XAML (xin lỗi vì sự chiều dài), sử dụng ItemsControls vào nhóm các yếu tố 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

Một giải pháp là sử dụng kỹ thuật này của phong cách một hộp danh sách để trông giống như một nhóm nút radio. Sau đó, có thể tab giữa các hộp danh sách được tạo kiểu và sử dụng các phím mũi tên để chọn các mục hộp danh sách 'nút radio' riêng lẻ.

Dưới đây là một bản demo hoàn chỉnh mà cũng có thể được tải về như một 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>