Xamarin формирует представление списка в представлении списка с действиями для каждого элемента в дочернем списке

Question

Мне нужно создать следующее представление (HTML дизайн) Окончательный макет

Данные следующие, и мы просто не можем заставить 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 (chronicscripts)]

[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>