当前位置：首页 > news >正文

WPF——自定义ListBox

news 2025/7/23 11:49:12

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

背景

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

需求

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

设计选型

RadioButton方案

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

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

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

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

ListBox方案

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

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

方案对比

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

后续基于ListBox进行实现。

实现

样式定义

 <Style x:Key="RadioListBoxStyle" TargetType="{x:Type ListBox}"><!--  基础样式继承原有ListBoxStyle1  --><Setter Property="Background" Value="{StaticResource ListBox.Static.Background}" /><Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}" /><Setter Property="BorderThickness" Value="1" /><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /><Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /><Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /><Setter Property="ScrollViewer.CanContentScroll" Value="true" /><Setter Property="ScrollViewer.PanningMode" Value="Both" /><Setter Property="Stylus.IsFlicksEnabled" Value="False" /><Setter Property="VerticalContentAlignment" Value="Center" /><!--  关键修改1：禁用默认选中效果  --><Setter Property="ItemContainerStyle"><Setter.Value><Style TargetType="{x:Type ListBoxItem}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"><Border Background="Transparent"><ContentPresenter /></Border></ControlTemplate></Setter.Value></Setter></Style></Setter.Value></Setter><!--  ItemsPanel为水平布局  --><Setter Property="ItemsPanel"><Setter.Value><ItemsPanelTemplate>  <!--  改为水平排列  --><StackPanel Orientation="Horizontal" /></ItemsPanelTemplate></Setter.Value></Setter><!--  自定义ItemTemplate模拟RadioButton  --><Setter Property="ItemTemplate"><Setter.Value><DataTemplate><DockPanel LastChildFill="True"><!--  RadioButton部分  --><RadioButtonMargin="5,0,10,0"VerticalAlignment="Center"DockPanel.Dock="Left"Focusable="False"IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" /><!--  文本部分  --><TextBlockMargin="0,0,5,0"VerticalAlignment="Center"Text="{Binding}" /></DockPanel></DataTemplate></Setter.Value></Setter><!--  模板  --><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBox}"><Borderx:Name="Bd"Padding="1"Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"SnapsToDevicePixels="true"><ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false"><ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /></ScrollViewer></Border><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><Setter TargetName="Bd" Property="Background" Value="{StaticResource ListBox.Disabled.Background}" /><Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource ListBox.Disabled.Border}" /></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsGrouping" Value="true" /><Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false" /></MultiTrigger.Conditions><Setter Property="ScrollViewer.CanContentScroll" Value="false" /></MultiTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

数据绑定

    <Window.DataContext><local:Tests /></Window.DataContext>

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

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

ListBox如下：

<ListBoxMargin="0,183,462,192"ItemsSource="{Binding TestDatas}"SelectedItem="{Binding SelectedValue, Mode=TwoWay}"Style="{DynamicResource RadioListBoxStyle}" />