列表视图中的 xamarin 表单设计

xamarin form design in list view

我怎样才能实现以下内容,它是一个包含许多项目的列表。在上面

Design Goal

这是我的代码:

 <Label Text = "Today Appointments :" TextColor = "#2196f3"   WidthRequest = "200"
                   HeightRequest="50"  FontSize = "Small" Margin = "13" FontAttributes = "Bold" ></Label >
        <ListView HasUnevenRows="True" ItemsSource="{Binding Appoitments}" RowHeight="5" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>

                        <Grid RowDefinitions="Auto,Auto,Auto">
                            <Frame 
                                BorderColor="Gray"
                                CornerRadius="5"
                                Padding="8"
                                HasShadow="True"
                               >
                                <StackLayout Orientation="Vertical" Padding="5">
                                    <Label Grid.Row="0" Text="{Binding AppointmentPatientName}"   TextColor="Black" FontSize="Small" FontAttributes="Bold" Margin="20" />
                                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding AppointmentDate}"   TextColor="Black" FontSize="Small" FontAttributes="Bold" Margin="20"  />
                            </StackLayout>
                                </Frame>
                        </Grid>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

CollectionView 提供了对列表中的项目进行分组并为您的组创建页眉的选项。 启用 IsGrouped 属性 :

<CollectionView IsGrouped="true" />

然后添加

<CollectionView.GroupHeaderTemplate>
    <DataTemplate>

    //Your Group Header here...

    <Label Text="{Binding AppoitmentsId}"
                   BackgroundColor="LightGray"
                   FontSize="Large"
                   FontAttributes="Bold" />
    </DataTemplate>
</CollectionView.GroupHeaderTemplate>

Follow this Link