如何将XAML ListBox样式设置为带标题的单选按钮组？附现有样式代码

没问题，我帮你完善并修改了原有样式，让它变成带标题的单选按钮组，下面是完整可直接使用的XAML代码：

<Style x:Key="RadioButtonListWithTitle" TargetType="{x:Type ListBox}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="BorderBrush" Value="#DDDDDD"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="8"/>
    <!-- 可设置默认标题，使用时通过Tag属性覆盖即可 -->
    <Setter Property="Tag" Value="选择选项"/>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <RadioButton 
                                Margin="2"
                                IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}"
                                Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}">
                            </RadioButton>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Foreground" Value="#0066CC"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <Border 
                    Name="Border"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}">
                    <StackPanel>
                        <!-- 标题区域 -->
                        <TextBlock 
                            Margin="0 0 0 8"
                            FontSize="14"
                            FontWeight="SemiBold"
                            Foreground="#333333"
                            Text="{TemplateBinding Tag}"/>
                        <!-- 单选按钮列表区域 -->
                        <ScrollViewer 
                            Margin="{TemplateBinding Padding}"
                            Focusable="false">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Border" Property="Background" Value="#F5F5F5"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="#EEEEEE"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用示例 #

<ListBox 
    Style="{StaticResource RadioButtonListWithTitle}"
    Tag="选择你的支付方式"
    SelectedIndex="0">
    <ListBoxItem>支付宝</ListBoxItem>
    <ListBoxItem>微信支付</ListBoxItem>
    <ListBoxItem>银行卡</ListBoxItem>
</ListBox>

关键说明 #

• 标题自定义：通过Tag属性可以快速设置每个单选组的标题，如果你觉得用Tag不够语义化，也可以自定义一个附加属性（比如local:ListBoxExtensions.Title）来替代
• 单选行为：通过ItemContainerStyle把每个ListBoxItem替换成RadioButton，并绑定IsSelected和IsChecked，完美保留ListBox的单选选中逻辑
• 样式适配：添加了禁用状态的样式变化，以及标题的字体样式调整，让整体视觉更协调
• 滚动支持：保留了原有的ScrollViewer设置，选项过多时会自动出现滚动条

内容的提问来源于stack exchange，提问作者Juan Pablo Gomez