将Ellipse用作单选按钮：WPF颜色选择器选中状态与值存储问题

嘿，我来帮你搞定这个问题！你已经用ItemsControl搭好了基础的颜色选择器框架，现在要实现选中项高亮和选中颜色的存储，其实可以借助WPF自带的控件特性和MVVM模式轻松解决，分两步走：

1. 实现选中项的UI高亮 #

ItemsControl本身没有内置的「选中」状态机制，所以最省心的方式是把它换成ListBox——它是ItemsControl的子类，自带SelectedItem、IsSelected等选中相关属性，不用自己手动处理点击选中的逻辑。

修改你的XAML代码，把ItemsControl替换成ListBox，然后在ItemTemplate里添加针对IsSelected属性的触发器，就能实现选中时Ellipse的边框厚度变化：

<ListBox x:Name="ColorListBox"
         ItemsSource="{Binding ColorBrushes}"
         SelectedItem="{Binding SelectedColorBrush}"
         BorderThickness="0"
         Background="Transparent"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel /> <!-- 保持你原来的布局，比如换行排列颜色块 -->
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="30" Height="30"
                     Fill="{Binding}"
                     Margin="5"
                     Stroke="Black"
                     StrokeThickness="0">
                <Ellipse.Style>
                    <Style TargetType="Ellipse">
                        <!-- 你已经实现的鼠标悬停触发器 -->
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="StrokeThickness" Value="2"/>
                            </Trigger>
                            <!-- 新增选中状态的触发器 -->
                            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
                                <Setter Property="StrokeThickness" Value="2"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Ellipse.Style>
            </Ellipse>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <!-- 去掉ListBoxItem默认的选中背景色，避免和自定义高亮冲突 -->
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

这里的核心是：

• 用DataTrigger绑定父级ListBoxItem的IsSelected属性，精准控制Ellipse的边框样式
• 重写ListBoxItem的模板，去掉默认的选中背景，只保留我们自定义的Ellipse高亮效果

2. 存储选中的颜色信息 #

接下来要把选中的颜色持久化存储，推荐用MVVM模式，在你的ViewModel里添加一个SolidColorBrush类型的属性，实现INotifyPropertyChanged接口，让UI和数据双向同步：

public class ColorPickerViewModel : INotifyPropertyChanged
{
    // 颜色列表，绑定到ListBox的ItemsSource
    public ObservableCollection<SolidColorBrush> ColorBrushes { get; set; }

    private SolidColorBrush _selectedColorBrush;
    // 选中的颜色，绑定到ListBox的SelectedItem
    public SolidColorBrush SelectedColorBrush
    {
        get => _selectedColorBrush;
        set
        {
            if (_selectedColorBrush != value)
            {
                _selectedColorBrush = value;
                OnPropertyChanged();
                // 这里可以添加选中颜色变化后的逻辑，比如同步到其他组件、保存到配置等
                // SaveSelectedColor(_selectedColorBrush.Color);
            }
        }
    }

    public ColorPickerViewModel()
    {
        // 初始化颜色列表，你可以替换成自己需要的颜色
        ColorBrushes = new ObservableCollection<SolidColorBrush>
        {
            Brushes.Red, Brushes.Green, Brushes.Blue,
            Brushes.Yellow, Brushes.Purple, Brushes.Orange
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后在窗口/UserControl的后台代码里，把ViewModel设置为DataContext：

public MainWindow()
{
    InitializeComponent();
    DataContext = new ColorPickerViewModel();
}

这样一来，用户点击任何颜色Ellipse时，SelectedColorBrush属性都会自动更新为选中的SolidColorBrush，你可以直接在ViewModel里使用这个值，或者通过SelectedColorBrush.Color转换成Color类型存储。

要是不想用ListBox怎么办？ #

如果坚持要用ItemsControl，也可以手动维护选中状态：

• 给每个Ellipse添加Click事件
• 在事件处理方法里，记录之前选中的Ellipse，把它的StrokeThickness改回0，再将当前点击的Ellipse的StrokeThickness设为2
• 同时把当前点击的SolidColorBrush存储到变量或ViewModel属性中

不过这种方式需要手动管理选中状态，代码冗余度更高，不如用ListBox的方案简洁优雅，所以更推荐前者。

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