Xamarin Forms中复用DataTemplate公共代码的最佳实现方案咨询

你遇到的问题非常典型——在Xamarin.Forms中处理DataTemplate的重复代码，核心思路就是提取公共布局作为基础容器，仅替换可变的输入控件部分。下面给你两种落地性强的实现方案：

方案一：基础DataTemplate + ContentPresenter + 自定义Selector #

这种方案适合需要根据数据类型动态切换模板的场景，通过ContentPresenter占位可变区域，再用Selector组装最终模板。

1. 提取公共基础模板 #

把两个模板中80%的重复代码抽成一个基础模板，用ContentPresenter标记需要替换的输入区域：

<!-- 基础公共模板，包含标题、帮助按钮、帮助文本、错误提示 -->
<DataTemplate x:Key="BaseFieldTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <!-- 公共：标题+帮助按钮 -->
        <StackLayout Orientation="Horizontal" Grid.Row="0">
            <Label Text="{Binding Name}" Style="{StaticResource LabelStyle}" />
            <ImageButton HorizontalOptions="Center" 
                         CornerRadius="6" 
                         VerticalOptions="Center" 
                         Clicked="HelpButton_Clicked" 
                         HeightRequest="12" 
                         WidthRequest="12" 
                         BorderColor="Black" 
                         BackgroundColor="Black" 
                         BorderWidth="1" 
                         IsVisible="{Binding ShowHelpButton}">
                <ImageButton.Source>
                    <FontImageSource FontFamily="FAFreeSolid" 
                                     Color="White" 
                                     Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
                </ImageButton.Source>
            </ImageButton>
        </StackLayout>
        
        <!-- 公共：帮助文本 -->
        <Label Grid.Row="1" 
               Style="{StaticResource HelpStyle}" 
               Text="{Binding HelpTopic.Text}" 
               IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}" />
        
        <!-- 可变内容占位符：给ContentPresenter命名，方便Selector找到它 -->
        <ContentPresenter x:Name="InputContentContainer" Grid.Row="2" />
        
        <!-- 公共：错误提示 -->
        <validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
    </Grid>
</DataTemplate>

2. 创建独立的输入控件模板 #

只保留每个模板中不同的输入部分：

<!-- Picker输入模板 -->
<DataTemplate x:Key="PickerInputTemplate">
    <Picker IsEnabled="{Binding IsEnabled}" 
            Margin="10,2,10,0" 
            ItemsSource="{Binding Choices.Choices}" 
            SelectedItem="{Binding SelectedChoice}" 
            ItemDisplayBinding="{Binding Label}" 
            SelectedIndexChanged="Picker_SelectedIndexChanged" />
</DataTemplate>

<!-- RadioButton组输入模板 -->
<DataTemplate x:Key="RadioInputTemplate">
    <StackLayout RadioButtonGroup.GroupName="{Binding Choices.Code}" 
                 RadioButtonGroup.SelectedValue="{Binding Value}" 
                 BindableLayout.ItemsSource="{Binding Choices.Choices}" 
                 BindableLayout.EmptyView="No choices available" 
                 Orientation="Horizontal" 
                 Spacing="50" 
                 Margin="10,2,0,0">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <RadioButton Value="{Binding Value}" 
                             Content="{Binding Label}" 
                             IsChecked="{Binding IsSelected}" 
                             CheckedChanged="OnRadioChanged" />
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</DataTemplate>

3. 自定义DataTemplateSelector组装模板 #

创建Selector类，根据字段类型把基础模板和输入模板组合起来：

public class FieldDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate BaseFieldTemplate { get; set; }
    public DataTemplate PickerInputTemplate { get; set; }
    public DataTemplate RadioInputTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var field = item as YourFieldModel; // 替换成你的字段模型类型
        if (field == null) return BaseFieldTemplate;

        // 克隆基础模板实例，避免多个列表项共用同一个控件
        var baseLayout = BaseFieldTemplate.CreateContent() as Grid;
        var contentContainer = baseLayout.FindByName<ContentPresenter>("InputContentContainer");

        // 根据字段类型设置对应的输入控件
        switch (field.FieldType) // 假设你的模型有FieldType属性区分类型
        {
            case FieldType.DropList:
                contentContainer.Content = PickerInputTemplate.CreateContent();
                break;
            case FieldType.Radio:
                contentContainer.Content = RadioInputTemplate.CreateContent();
                break;
            default:
                contentContainer.Content = null;
                break;
        }

        // 把组装好的布局包装成新的DataTemplate返回
        return new DataTemplate(() => baseLayout);
    }
}

4. 配置Selector并使用 #

在XAML中注册Selector，绑定到CollectionView：

<tempcel:FieldDataTemplateSelector x:Key="templateSelector" 
                                   BaseFieldTemplate="{StaticResource BaseFieldTemplate}"
                                   PickerInputTemplate="{StaticResource PickerInputTemplate}"
                                   RadioInputTemplate="{StaticResource RadioInputTemplate}">
</tempcel:FieldDataTemplateSelector>

<!-- 原CollectionView无需修改，继续使用这个Selector -->
<CollectionView ItemsSource="{Binding MainPageView.Fields}" 
                EmptyView="No fields for this screen." 
                ItemTemplate="{StaticResource templateSelector}" 
                SelectionChanged="CollectionView_SelectionChanged">
</CollectionView>

方案二：自定义ContentView作为公共容器 #

如果不需要动态切换，更倾向于直观的XAML编写，推荐用自定义ContentView封装公共布局，暴露InputContent属性来设置可变部分。

1. 创建自定义ContentView #

首先定义ContentView的代码，添加InputContent绑定属性：

public class FieldContainerView : ContentView
{
    public static readonly BindableProperty InputContentProperty =
        BindableProperty.Create(nameof(InputContent), typeof(View), typeof(FieldContainerView));

    public View InputContent
    {
        get => (View)GetValue(InputContentProperty);
        set => SetValue(InputContentProperty, value);
    }
}

2. 编写ContentView的XAML布局 #

把公共布局写在ContentView的XAML中，绑定InputContent到ContentPresenter：

<ContentView x:Class="YourNamespace.FieldContainerView"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <!-- 公共布局部分（和方案一的基础模板完全一致） -->
        <StackLayout Orientation="Horizontal" Grid.Row="0">
            <Label Text="{Binding Name}" Style="{StaticResource LabelStyle}" />
            <ImageButton HorizontalOptions="Center" 
                         CornerRadius="6" 
                         VerticalOptions="Center" 
                         Clicked="HelpButton_Clicked" 
                         HeightRequest="12" 
                         WidthRequest="12" 
                         BorderColor="Black" 
                         BackgroundColor="Black" 
                         BorderWidth="1" 
                         IsVisible="{Binding ShowHelpButton}">
                <ImageButton.Source>
                    <FontImageSource FontFamily="FAFreeSolid" 
                                     Color="White" 
                                     Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
                </ImageButton.Source>
            </ImageButton>
        </StackLayout>
        
        <Label Grid.Row="1" 
               Style="{StaticResource HelpStyle}" 
               Text="{Binding HelpTopic.Text}" 
               IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}" />
        
        <!-- 绑定自定义的InputContent属性 -->
        <ContentPresenter Grid.Row="2" Content="{Binding InputContent, Source={RelativeSource AncestorType={x:Type local:FieldContainerView}}}" />
        
        <validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
    </Grid>
</ContentView>

3. 简化原DataTemplate #

现在每个DataTemplate只需要引用ContentView并设置InputContent即可：

<!-- DropList模板 -->
<DataTemplate x:Key="DropListTemplate">
    <local:FieldContainerView>
        <local:FieldContainerView.InputContent>
            <Picker IsEnabled="{Binding IsEnabled}" 
                    Margin="10,2,10,0" 
                    ItemsSource="{Binding Choices.Choices}" 
                    SelectedItem="{Binding SelectedChoice}" 
                    ItemDisplayBinding="{Binding Label}" 
                    SelectedIndexChanged="Picker_SelectedIndexChanged" />
        </local:FieldContainerView.InputContent>
    </local:FieldContainerView>
</DataTemplate>

<!-- Radio模板 -->
<DataTemplate x:Key="RadioTemplate">
    <local:FieldContainerView>
        <local:FieldContainerView.InputContent>
            <StackLayout RadioButtonGroup.GroupName="{Binding Choices.Code}" 
                         RadioButtonGroup.SelectedValue="{Binding Value}" 
                         BindableLayout.ItemsSource="{Binding Choices.Choices}" 
                         BindableLayout.EmptyView="No choices available" 
                         Orientation="Horizontal" 
                         Spacing="50" 
                         Margin="10,2,0,0">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <RadioButton Value="{Binding Value}" 
                                     Content="{Binding Label}" 
                                     IsChecked="{Binding IsSelected}" 
                                     CheckedChanged="OnRadioChanged" />
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </local:FieldContainerView.InputContent>
    </local:FieldContainerView>
</DataTemplate>

方案对比 #

两种方案都能实现公共代码的复用，后续修改基础布局时只需要改动一处即可。

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