Xamarin在列表视图中形成列表视图，并在子列表中对每个项目执行操作

Question

我需要创建以下视图（HTML设计）Final Layout

数据如下，我们只是无法获得一个ListView来做到这一点：

{“ chronicScripts”：[{“ forName”：“ MR JOHN DOE”，“ scriptNumber”：4000000，“ scriptDate”：“ 2020-04-27T00：00：00”，“ chronics”：[{“ description”：“ TAMSUL 0.4MG SR CAP”，“ order”：“ order”，}，{“ description”：“ STORWIN 20MG TAB”，“ order”：“ order”，}，{“ description”：“ COXLEON 200MG CAP”，“ order”：“ order”，}]}，{“ forName”：“ JANE DOE”，“ scriptNumber”：4800001，“ scriptDate”：“ 2020-04-27T00：00：00”，“ chronics”：[{“ description”：“ CILODEX EAR DROPS”，“ order”：“ order”，}，{“ description”：“ VUSOR 5MG TAB”，“ order”：“ order”，}，{“ description”：“ MIZART 40MG TAB”，“ order”：“ order”，}，{“ description”：“ ELTROXIN NF 0.1MG”，“ order”：“ order”，}]}]}

您能告诉我们我们如何通过控制来实现这种设计

[[LISTVIEW（历年记录）]

[HEADER

[[LISTVIEW（chronicscripts.chronics）]

[详细信息

Answer 1

<telerikDataControls:RadListView
    x:Name="chronicProfileListView"
    BackgroundColor="Transparent"
    HorizontalOptions="FillAndExpand"
    ItemsSource="{Binding Chronics.ChronicScripts}"
    SelectionMode="None"
    VerticalOptions="FillAndExpand">
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate x:DataType="local:ChronicScriptsDataModel">
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>
                    <Frame
                        Margin="0,0,0,10"
                        Padding="0,0,0,5"
                        BorderColor="LightGray"
                        HasShadow="False">
                        <Grid VerticalOptions="FillAndExpand">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <telerikPrimitives:RadBorder
                                Grid.Row="0"
                                Padding="0,15,0,15"
                                BackgroundColor="#17469e"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand">
                                <StackLayout>
                                    <Label
                                        HorizontalTextAlignment="Center"
                                        VerticalOptions="FillAndExpand"
                                        VerticalTextAlignment="Center">
                                        <Label.FormattedText>
                                            <FormattedString>
                                                <Span
                                                    FontAttributes="Bold"
                                                    FontSize="15"
                                                    Text="{Binding ForName}"
                                                    TextColor="White">
                                                    <Span.FontFamily>
                                                        <OnPlatform x:TypeArguments="x:String">
                                                            <On Platform="iOS" Value="Futura" />
                                                            <On Platform="Android" Value="Futura-Bookfont.ttf#Futura-Bookfont" />
                                                        </OnPlatform>
                                                    </Span.FontFamily>
                                                </Span>
                                                <Span
                                                    FontSize="15"
                                                    Text=" | "
                                                    TextColor="White">
                                                    <Span.FontFamily>
                                                        <OnPlatform x:TypeArguments="x:String">
                                                            <On Platform="iOS" Value="Futura" />
                                                            <On Platform="Android" Value="Futura-Bookfont.ttf#Futura-Bookfont" />
                                                        </OnPlatform>
                                                    </Span.FontFamily>
                                                </Span>
                                                <Span
                                                    FontSize="15"
                                                    Text="{Binding ScriptNumber}"
                                                    TextColor="White">
                                                    <Span.FontFamily>
                                                        <OnPlatform x:TypeArguments="x:String">
                                                            <On Platform="iOS" Value="Futura" />
                                                            <On Platform="Android" Value="Futura-Bookfont.ttf#Futura-Bookfont" />
                                                        </OnPlatform>
                                                    </Span.FontFamily>
                                                </Span>
                                                <Span
                                                    FontSize="15"
                                                    Text=" | "
                                                    TextColor="White">
                                                    <Span.FontFamily>
                                                        <OnPlatform x:TypeArguments="x:String">
                                                            <On Platform="iOS" Value="Futura" />
                                                            <On Platform="Android" Value="Futura-Bookfont.ttf#Futura-Bookfont" />
                                                        </OnPlatform>
                                                    </Span.FontFamily>
                                                </Span>
                                                <Span
                                                    FontSize="15"
                                                    Text="{Binding ScriptDate}"
                                                    TextColor="White">
                                                    <Span.FontFamily>
                                                        <OnPlatform x:TypeArguments="x:String">
                                                            <On Platform="iOS" Value="Futura" />
                                                            <On Platform="Android" Value="Futura-Bookfont.ttf#Futura-Bookfont" />
                                                        </OnPlatform>
                                                    </Span.FontFamily>
                                                </Span>
                                            </FormattedString>
                                        </Label.FormattedText>
                                    </Label>
                                </StackLayout>
                            </telerikPrimitives:RadBorder>

                            <!--  Display items per Order  -->
                            <telerikDataControls:NonVirtualizedItemsControl
                                Grid.Row="1"
                                ItemsSource="{Binding Chronics, Mode=TwoWay}"
                                SelectionMode="Single">
                                <telerikDataControls:NonVirtualizedItemsControl.ItemTemplate>
                                    <DataTemplate x:DataType="local:ChronicDataModel">
                                        <telerikPrimitives:RadBorder>
                                            <views:ChronicMainItemTemplate />
                                        </telerikPrimitives:RadBorder>
                                    </DataTemplate>
                                </telerikDataControls:NonVirtualizedItemsControl.ItemTemplate>
                            </telerikDataControls:NonVirtualizedItemsControl>

                        </Grid>
                    </Frame>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>