如何简化XAML代码并封装可复用的RadioButtonGroupView控件？

核心思路是通过自定义ContentView派生控件，封装重复的ScrollView、ListView和ViewCell逻辑，通过绑定属性暴露ItemsSource、ItemTemplate和GroupName等关键参数，实现复用性和简洁的使用方式。

1. 创建自定义控件的C#代码 #

首先定义RadioButtonGroupView类，添加必要的绑定属性：

using Microsoft.Maui.Controls;
using System.Collections;

namespace YourNamespace;

public class RadioButtonGroupView : ContentView
{
    // 数据源绑定属性
    public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(RadioButtonGroupView), null);

    // 项模板绑定属性
    public static readonly BindableProperty ItemTemplateProperty =
        BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(RadioButtonGroupView), null);

    // 单选组名称绑定属性（统一设置所有RadioButton的GroupName）
    public static readonly BindableProperty GroupNameProperty =
        BindableProperty.Create(nameof(GroupName), typeof(string), typeof(RadioButtonGroupView), "DefaultRadioGroup");

    // 选中项绑定属性（可选，简化MVVM绑定）
    public static readonly BindableProperty SelectedItemProperty =
        BindableProperty.Create(nameof(SelectedItem), typeof(object), typeof(RadioButtonGroupView), null, 
            BindingMode.TwoWay, propertyChanged: OnSelectedItemChanged);

    public IEnumerable ItemsSource
    {
        get => (IEnumerable)GetValue(ItemsSourceProperty);
        set => SetValue(ItemsSourceProperty, value);
    }

    public DataTemplate ItemTemplate
    {
        get => (DataTemplate)GetValue(ItemTemplateProperty);
        set => SetValue(ItemTemplateProperty, value);
    }

    public string GroupName
    {
        get => (string)GetValue(GroupNameProperty);
        set => SetValue(GroupNameProperty, value);
    }

    public object SelectedItem
    {
        get => GetValue(SelectedItemProperty);
        set => SetValue(SelectedItemProperty, value);
    }

    // 处理选中项变化的逻辑（假设你的数据模型有IsChecked属性）
    private static void OnSelectedItemChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (oldValue is ICheckable oldItem)
            oldItem.IsChecked = false;

        if (newValue is ICheckable newItem)
            newItem.IsChecked = true;
    }

    // 可选：定义ICheckable接口统一数据模型的IsChecked属性
    public interface ICheckable
    {
        bool IsChecked { get; set; }
    }
}

说明：ICheckable接口用于统一所有需要单选的数据模型，确保它们都有IsChecked属性，方便SelectedItem的自动同步。

2. 自定义控件的XAML布局 #

创建RadioButtonGroupView.xaml，封装基础的滚动列表结构：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.RadioButtonGroupView">
    <ScrollView>
        <ListView ItemsSource="{Binding ItemsSource, Source={RelativeSource AncestorType={x:Type local:RadioButtonGroupView}}}"
                  Style="{StaticResource ListViewSimpleStyle}"
                  SelectionMode="None"> <!-- 禁用ListView自带选中，避免冲突 -->
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <!-- 使用ContentPresenter加载用户传入的ItemTemplate，并传递当前项的BindingContext -->
                        <ContentPresenter ContentTemplate="{Binding ItemTemplate, Source={RelativeSource AncestorType={x:Type local:RadioButtonGroupView}}}"
                                          BindingContext="{Binding .}"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollView>
</ContentView>

3. 简化的使用方式 #

现在可以像你期望的那样简洁使用控件，同时优化模板内的绑定逻辑：

<local:RadioButtonGroupView ItemsSource="{Binding Devices}"
                            GroupName="Devices"
                            SelectedItem="{Binding SelectedDevice}">
    <local:RadioButtonGroupView.ItemTemplate>
        <DataTemplate x:DataType="local:Device">
            <RadioButton IsChecked="{Binding IsChecked, Mode=TwoWay}"
                         GroupName="{Binding GroupName, Source={RelativeSource AncestorType={x:Type local:RadioButtonGroupView}}}"
                         IsEnabled="{Binding IsEnabled}">
                <!-- 无需复杂的BindingContext设置，直接绑定当前Device的属性 -->
                <Label Text="{Binding Name}" 
                       IsEnabled="{Binding IsEnabled, Source={RelativeSource AncestorType={x:Type RadioButton}}}"/>
            </RadioButton>
        </DataTemplate>
    </local:RadioButtonGroupView.ItemTemplate>
</local:RadioButtonGroupView>

关键优化点 #

• 隐藏重复结构：把ScrollView、ListView、ViewCell这些重复代码封装在自定义控件内部，使用时无需关注这些细节。
• 统一GroupName：通过绑定属性统一设置所有单选按钮的分组名称，避免每个RadioButton重复写GroupName。
• 简化绑定逻辑：ContentPresenter自动传递列表项的BindingContext，模板内的控件可以直接绑定数据模型的属性，无需复杂的RelativeSource查找。
• 可选的SelectedItem绑定：通过SelectedItem属性直接绑定ViewModel中的选中项，无需手动处理每个项的IsChecked状态，更符合MVVM规范。

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