如何让WinUI3中的一组ToggleButton表现得像RadioButton?
针对你需要的两个UI行为(互斥选中、无法取消已选中状态),可以用两种方式实现:
方法一:后台代码直接处理
1. 调整XAML代码
把四个ToggleButton放在容器中,统一绑定Checked和Unchecked事件:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <ToggleButton x:Name="Toggle1" Content="选项1" Checked="ToggleGroup_Checked" Unchecked="ToggleGroup_Unchecked"/> <ToggleButton x:Name="Toggle2" Content="选项2" Checked="ToggleGroup_Checked" Unchecked="ToggleGroup_Unchecked"/> <ToggleButton x:Name="Toggle3" Content="选项3" Checked="ToggleGroup_Checked" Unchecked="ToggleGroup_Unchecked"/> <ToggleButton x:Name="Toggle4" Content="选项4" Checked="ToggleGroup_Checked" Unchecked="ToggleGroup_Unchecked"/> </StackPanel>
2. 后台逻辑实现
在代码后台添加事件处理:
// 实现互斥选中逻辑 private void ToggleGroup_Checked(object sender, RoutedEventArgs e) { var clickedToggle = sender as ToggleButton; if (clickedToggle == null || !clickedToggle.IsChecked.HasValue || !clickedToggle.IsChecked.Value) return; // 获取容器内所有ToggleButton var allToggles = (clickedToggle.Parent as StackPanel).Children.OfType<ToggleButton>(); foreach (var toggle in allToggles) { // 仅保留当前点击的按钮为选中状态 toggle.IsChecked = toggle == clickedToggle; } } // 禁止取消已选中状态 private void ToggleGroup_Unchecked(object sender, RoutedEventArgs e) { var toggle = sender as ToggleButton; // 强制设回选中状态,阻止取消操作 toggle.IsChecked = true; }
方法二:MVVM绑定方式(更推荐)
如果采用MVVM架构,可通过绑定实现,无需后台事件:
1. 定义ViewModel
public class MainViewModel : ObservableObject { private string _selectedToggle; // 当前选中的Toggle标识(对应按钮的Content) public string SelectedToggle { get => _selectedToggle; set { // 若试图取消选中(value为null),则不更新属性 if (value == null && _selectedToggle != null) return; SetProperty(ref _selectedToggle, value); } } }
2. XAML绑定
将ViewModel设为页面DataContext,给每个ToggleButton绑定IsChecked:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <ToggleButton Content="选项1" IsChecked="{x:Bind ViewModel.SelectedToggle.Equals('选项1'), Mode=TwoWay}"/> <ToggleButton Content="选项2" IsChecked="{x:Bind ViewModel.SelectedToggle.Equals('选项2'), Mode=TwoWay}"/> <ToggleButton Content="选项3" IsChecked="{x:Bind ViewModel.SelectedToggle.Equals('选项3'), Mode=TwoWay}"/> <ToggleButton Content="选项4" IsChecked="{x:Bind ViewModel.SelectedToggle.Equals('选项4'), Mode=TwoWay}"/> </StackPanel>
这种方式下,选中按钮会自动更新SelectedToggle,其他按钮同步取消选中;同时ViewModel拒绝接受null值,点击已选中的按钮无法取消选中状态。
内容的提问来源于stack exchange,提问作者Ming
相关产品推荐
相关产品推荐

