gm_cabs_driver_maui/GMCabsDriverAssistantSolution/Views/BookingsPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GMCabsDriverAssistantSolution.Views.BookingsPage"
             xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
             xmlns:vm="clr-namespace:GMCabsDriverAssistantSolution.ViewModels" x:DataType="vm:BookingsViewModel"
             xmlns:models="clr-namespace:GMCabsDriverAssistant.Models"
             Title="{Binding Title}">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Orientation="Vertical"
                     BackgroundColor="#DCDCDC"
                     x:DataType="vm:BookingsViewModel">
            <Frame Margin="10,40,10,10"
                   CornerRadius="10"
                   BackgroundColor="#E8E8E8">
                <CollectionView ItemsSource="{Binding Bookings}">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout
                            Orientation="Vertical"
                            ItemSpacing="10"
                            />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <cmp:RelativeLayout>
                                <Frame x:DataType="models:BookingDto"
                                   CornerRadius="10"
                                   BackgroundColor="{StaticResource Primary}"
                                       Margin="0, 30, 0, 0"
                                   Padding="8">
                                    <StackLayout Orientation="Vertical" Margin="0,10,0,0">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="1*"/>
                                            </Grid.ColumnDefinitions>
                                            <Label Grid.Row="0"
                                               Grid.Column="0"
                                            Text="{Binding StartSuburb}" 
                                                TextColor="White"
                                                FontFamily="Bold"
                                                HorizontalOptions="StartAndExpand"
                                                FontSize="17"/>

                                            <Label 
                                            Grid.Row="0"
                                            Grid.Column="1"
                                            VerticalTextAlignment="Center"
                                            HorizontalOptions="EndAndExpand"
                                            FontSize="17"
                                            TextColor="White">
                                                <Label.Triggers>
                                                    <DataTrigger TargetType="Label" Binding="{Binding FutureBooking}" Value="True">
                                                        <Setter Property="Text" Value="{Binding FormattedPickUpTimeDateOnly}"/>
                                                    </DataTrigger>
                                                    <DataTrigger TargetType="Label" Binding="{Binding FutureBooking}" Value="False">
                                                        <Setter Property="Text" Value="{Binding FormattedDistance}" />
                                                    </DataTrigger>
                                                </Label.Triggers>
                                            </Label>

                                            <Label Grid.Row="1"
                                               Grid.Column="0"
                                               Text="{Binding EndSuburb}" 
                                                TextColor="White"
                                                FontFamily="Bold"
                                                HorizontalOptions="StartAndExpand"
                                                FontSize="17"/>
                                            <Label 
                                            Grid.Row="1"
                                               Grid.Column="1"
                                            VerticalTextAlignment="Center"
                                                HorizontalOptions="EndAndExpand"
                                                FontSize="17"
                                                TextColor="White">
                                                <Label.Triggers>
                                                    <DataTrigger TargetType="Label" Binding="{Binding FutureBooking}" Value="True">
                                                        <Setter Property="Text" Value="{Binding FormattedPickUpTimeTimeOnly}" />
                                                    </DataTrigger>
                                                    <DataTrigger TargetType="Label" Binding="{Binding FutureBooking}" Value="False">
                                                        <Setter Property="Text" Value="ASAP" />
                                                    </DataTrigger>
                                                </Label.Triggers>
                                            </Label>
                                        </Grid>
                                    </StackLayout>
                                    <Frame.GestureRecognizers>
                                        <TapGestureRecognizer 
                                        NumberOfTapsRequired="1"
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type vm:BookingsViewModel}}, Path=BookingTapped}"		
                                        CommandParameter="{Binding .}">
                                        </TapGestureRecognizer>
                                        <!--<TapGestureRecognizer Tapped="OnBookingViewClicked"/>-->
                                    </Frame.GestureRecognizers>
                                </Frame>

                                <Frame x:DataType="models:BookingDto"
                                    IsVisible="{Binding IsSeenBooking}"
                                    CornerRadius="10"
                                    BackgroundColor="#B40431"
                                    Padding="8,4"
                                    Margin="9 ,16"
                                    cmp:RelativeLayout.XConstraint=
                                    "{cmp:ConstraintExpression
                                    Type=RelativeToParent,
                                    Property=Width,
                                    Factor=1,
                                    Constant=-75
                                    }">
                                    <Label Grid.Row="0"
                                    Grid.Column="0"
                                    Text="NEW"
                                    TextColor="White"
                                    FontFamily="Bold"
                                    HorizontalOptions="StartAndExpand"
                                    FontSize="16"/>
                                </Frame>

                            </cmp:RelativeLayout>

                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Frame>
            <Button VerticalOptions="EndAndExpand"
                    Margin="40,0,40,15"
                    Text="REFRESH"
                    FontSize="20"
                    Visual="Default"
                    TextColor="White"
                    Command="{Binding OnRefreshClicked}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>