WPF实现ToggleButton单选组：仅允许同时选中一个按钮

在WPF应用里，用ItemsControl展示ToggleButton列表，每个按钮对应一个文件路径，期望同一时间仅能选中一个按钮：点击时更新ViewModel的SelectedPath属性，自动取消其他按钮选中状态；再次点击同一按钮则取消选中。

现有实现代码 #

ViewModel #

private string selectedPath;
public string SelectedPath
{
    get => selectedPath;
    set
    {
        if (selectedPath == value) return;
        selectedPath = value;
        NotifyPropertyChanged(nameof(SelectedPath));
    }
}

public ICommand ApplicationToggleButtonFilterCommand { get; }

ToggleButton点击命令逻辑 #

private void SetSelectedPath(object parameter)
{
    if (parameter is ClipboardItem item)
    {
        // 再次点击同一项目则取消选中
        if (SelectedPath == item.Path)
        {
            SelectedPath = null; // 取消所有选中
        }
        else
        {
            SelectedPath = item.Path;
        }
    }
}

XAML布局 #

<ItemsControl ItemsSource="{Binding UniquePaths}" Margin="15, 15,0,0">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
            <ToggleButton Width="50"
                          Height="30"
                          Style="{StaticResource ToggleButtonHotKeyStyle}"
                          Command="{Binding DataContext.ApplicationToggleButtonFilterCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                          CommandParameter="{Binding}"
                          Margin="7,0,0,0">
                    <ToggleButton.IsChecked>
                        <MultiBinding Converter="{StaticResource ToggleButtonSelectedApplicationConverter}">
                        <Binding Path="Path" />
                        <Binding Path="SelectedPath" RelativeSource="{RelativeSource AncestorType=ItemsControl}" />
                        </MultiBinding>
                </ToggleButton.IsChecked>
                    <StackPanel Orientation="Vertical">
                    <Image Width="18"
                           Height="18"
                           Source="{Binding Path, Converter={StaticResource PathToIconConverter}}" />
                    </StackPanel>
            </ToggleButton>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

多值转换器 #

using System;
using System.Globalization;
using System.Windows.Data;
using ClipKeeper.Source.MVVM.Model;

namespace ClipKeeper.Source.Convertors
{
    public class ToggleButtonSelectedApplicationConverter: IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values.Length != 2) return false; // 必须有两个值

            var item = values[0] as ClipboardItem;
            var selectedPath = values[1] as string;

            if (item == null || selectedPath == null) return false;
            return item.Path == selectedPath;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            return new object[] { Binding.DoNothing, Binding.DoNothing };
        }

    }
}

当前问题 #

已通过MultiBinding绑定IsChecked对比每个ClipboardItem的Path与SelectedPath，但仍可同时选中多个ToggleButton。

已尝试方案 #

• 在命令中更新SelectedPath，确保其仅存储单个路径，但UI仍允许多个按钮保持选中状态
• 在ConvertBack中返回Binding.DoNothing，避免了错误但未解决核心问题
• 验证每个ToggleButton的绑定正确性，确认均能获取到唯一的Path

期望行为 #

• 点击ToggleButton时，选中该按钮并取消其他所有按钮的选中状态
• 再次点击同一按钮时，取消其选中状态

解决方案 #

方案1：修复MultiBinding的绑定路径（最直接） #

当前MultiBinding中第二个绑定缺少DataContext.前缀，导致无法正确获取ViewModel的SelectedPath更新，UI因此无法同步其他按钮状态。修改XAML中的IsChecked绑定：

<ToggleButton.IsChecked>
    <MultiBinding Converter="{StaticResource ToggleButtonSelectedApplicationConverter}">
        <Binding Path="Path" />
        <Binding Path="DataContext.SelectedPath" RelativeSource="{RelativeSource AncestorType=ItemsControl}" />
    </MultiBinding>
</ToggleButton.IsChecked>

方案2：替换为RadioButton（更适配单选场景） #

RadioButton天生支持单选组，若需保留“再次点击取消选中”的功能，可做如下调整：

1. 修改ItemTemplate为RadioButton，设置统一GroupName：

<RadioButton Width="50"
             Height="30"
             Style="{StaticResource ToggleButtonHotKeyStyle}"
             Command="{Binding DataContext.ApplicationToggleButtonFilterCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
             CommandParameter="{Binding}"
             Margin="7,0,0,0"
             GroupName="PathGroup"
             IsChecked="{Binding Path=DataContext.SelectedPath, 
                                RelativeSource={RelativeSource AncestorType=ItemsControl},
                                Converter={StaticResource PathToCheckedConverter},
                                ConverterParameter={Binding Path=Path}}">
    <!-- 原有图片内容保持不变 -->
</RadioButton>

2. 编写单值转换器判断选中状态：

public class PathToCheckedConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var selectedPath = value as string;
        var itemPath = parameter as string;
        return string.Equals(selectedPath, itemPath);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if ((bool)value)
            return parameter as string;
        return Binding.DoNothing;
    }
}

3. 命令逻辑保持原有取消选中的逻辑即可。

方案3：强制UI同步（备选方案） #

若坚持使用ToggleButton，修复绑定路径后，可在SelectedPath更新时强制刷新ItemsControl的项绑定：

public string SelectedPath
{
    get => selectedPath;
    set
    {
        if (selectedPath == value) return;
        selectedPath = value;
        NotifyPropertyChanged(nameof(SelectedPath));
        // 假设PathItemsControl是ViewModel中对目标ItemsControl的引用
        PathItemsControl?.Items.Refresh();
    }
}

内容的提问来源于stack exchange，提问作者Dana Yeger