You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让WinUI3中的一组ToggleButton表现得像RadioButton?

让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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 23:43:30