'xamarin form design in list view

How could I achieve the following , it is a list of many items. on it

and this is my code :

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

Solution 1:^[1]

A CollectionView offers the option to group your items in the list and create a Header for your group. Enable IsGrouped property :

<CollectionView IsGrouped="true" />

then add

<CollectionView.GroupHeaderTemplate>
    <DataTemplate>

    //Your Group Header here...

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

Follow this Link

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Amjad S.

'xamarin form design in list view

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]