WPF——自定义ListBox

在阅读本文前，最好先看看WPF——自定义RadioButton

背景

WPF中实现单选功能通常有两种方案：
- RadioButton组：传统方案，但代码冗余
- ListBox定制：通过样式改造，兼顾数据绑定和UI灵活性

需求

一组选项中，选中某个选项（选项需要横向排列，同时选中效果与未选中效果要能明确显示），就将这个选项的值写入到后端。

设计选型

RadioButton方案

通过RadioButton来实现，是肯定可行的，

但是对于一组RadioButton，需要设置组名；

同时每个RadioButton在Checked时都要触发事件，也需要为它们设置相应的事件，不利于后台绑定：也就是说要将选中值写入VM比较麻烦，因为所有的都需要实现；

并且还存在一个问题，所有RadioButton需要手动去设置相应的显示内容，不能使用一个集合以便于管理。

ListBox方案

通过ListBox也是可行的，只是它就需要进行一些改造了，因为ListBox默认的是纵向排列，同时它没有一个明确的选中与未选中效果；

但是它可以绑定集合，同时通过自定义，可以比较轻松的将选中值写入到VM中；或者通过item的选中事件即可将选中值写入到VM中。

方案对比

方案	代码量	数据绑定	布局灵活性	维护成本
RadioButton组	高	困难	低	高
ListBox定制	中	简单	高	低

后续基于ListBox进行实现。

实现

样式定义

数据绑定

Tests如下，以下可以根据需要自行实现通知属性。

public class Tests:INotifyPropertyChanged
{
    readonly List testDatas = [
     "test0",
       "test1",
         "test2",
         "test3",
         "test4",
     ];
    private string _selectedValue;
    public string SelectedValue
    {
        get => _selectedValue;
        set { _selectedValue = value; OnPropertyChanged(); }
    }
    public List TestDatas { get; set; }
    public Tests()
    {
        TestDatas = testDatas;
    }
    //INotifyPropertyChanged实现
}

ListBox如下：

效果展示

图：横向排列的单选ListBox，左侧为RadioButton，右侧为文本