需要指导以最佳方式最小化 Xamarin 表单中的数据模板代码答案

【问题标题】：Need direction for best way to minimize data template code in Xamarin form需要指导以最佳方式最小化 Xamarin 表单中的数据模板代码
【发布时间】：2022-06-30 14:40:54
【问题描述】：

在 MVC ASP.net Core 中，我使用部分来重用页面的块。在 Xamarin 中，我们有 DataTemplates 和 ControlTemplates，但我不确定如何最好地使用它们。

在我的一个页面中，我有以下内容：

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to data template selector" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <CollectionView ItemsSource="{Binding MainPageView.Fields}"                        
                        EmptyView="No fields for this screen."
                        ItemTemplate="{StaticResource templateSelector}"
                        SelectionChanged="CollectionView_SelectionChanged">
        </CollectionView>
        <StackLayout Margin="10,0,10,5" Orientation="Vertical">
            <Button Command="{Binding MainPageView.SubmitCommand}" Text="Submit" />
            <validator:ErrorSummaryView 
                IsVisible="{Binding MainPageView.ShowValidationSummary, Mode=OneWay}"
                ErrorStateManager="{Binding MainPageView.ErrorStateManager, Mode=OneWay}"
                Margin="0,0,0,5"/>
        </StackLayout>
    </StackLayout>

模板选择器是（后面会有更多选择）：

            <tempcel:FieldDataTemplateSelector
                x:Key="templateSelector"
                RadioTemplate="{StaticResource RadioTemplate}"
                DropListTemplate="{StaticResource DropListTemplate}">
            </tempcel:FieldDataTemplateSelector>

现在我可以使用一些方向的地方是 RadioTemplate 和 DropListTemplate 中 80% 的内容是相同的，我想将共享代码拉出，所以如果我想更改基本布局，我只需要更改一个地方。这是两个数据模板：

            <DataTemplate x:Key="DropListTemplate">
                <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}">
                        </Label>
                        <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}">
                    </Label>
                    <Picker
                        Grid.Row="2"
                        IsEnabled="{Binding IsEnabled}"                        
                        Margin="10,2,10,0"
                        ItemsSource="{Binding Choices.Choices}"
                        SelectedItem="{Binding SelectedChoice}"
                        ItemDisplayBinding="{Binding Label}"                        
                        SelectedIndexChanged="Picker_SelectedIndexChanged">
                    </Picker>
                    <validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="RadioTemplate">
                <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}">
                        </Label>
                        <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}">
                    </Label>
                    <StackLayout 
                        Grid.Row="2"
                        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">
                                </RadioButton>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </StackLayout>
                    <validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
                </Grid>
            </DataTemplate>

我对 Xamarin 的了解还不够，无法知道是否需要更改 CollectionView 的位置，以便在其中放置具有通用布局信息的内容，以及放置不同编辑器的方法。或者，如果有修改 DataTemplates 以从其他东西获取其基本布局的方法。我尝试查看 ContentPresenter，但无法弄清楚它如何适应。

谢谢

【问题讨论】：

标签： xamarin.forms datatemplate contenttemplate

【解决方案1】：

我发现DropListTemplate 和RadioTemplate 之间几乎没有区别。

您可以根据 CollectionView 的ItemsSource 的项目数据显示和隐藏两个视图（Picker 和BindableLayout）。

以下是两个模板的区别：

            <Picker
                    Grid.Row="2"
                    IsEnabled="{Binding IsEnabled}"                        
                    Margin="10,2,10,0"
                    ItemsSource="{Binding Choices.Choices}"
                    SelectedItem="{Binding SelectedChoice}"
                    ItemDisplayBinding="{Binding Label}"                        
                    SelectedIndexChanged="Picker_SelectedIndexChanged">
            </Picker>

和

                <StackLayout 
                    Grid.Row="2"
                    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">
                            </RadioButton>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>

【讨论】：