gm_cabs_driver_maui/GMCabsDriverAssistantSolution/Views/BookingDetailsPage.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.BookingDetailsPage"
             xmlns:vm="clr-namespace:GMCabsDriverAssistantSolution.ViewModels" x:DataType="vm:BookingDetailViewModel"
             xmlns:models="clr-namespace:GMCabsDriverAssistant.Models"
             Title="{Binding Title}">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="InnerFrameLabel" TargetType="Label">
                <Setter Property="HorizontalTextAlignment" Value="Center"/>
                <Setter Property="FontAttributes" Value="Bold"/>
                <Setter Property="TextColor" Value="Black"/>
                <Setter Property="FontSize" Value="25"/>
            </Style>
            <Style x:Key="OuterFrameLabel" TargetType="Label">
                <Setter Property="HorizontalTextAlignment" Value="Center"/>
                <Setter Property="FontAttributes" Value="Bold"/>
                <Setter Property="TextColor" Value="Black"/>
                <Setter Property="FontSize" Value="25"/>
            </Style>
            <Style x:Key="BelowFrameStyle" TargetType="Frame">
                <Setter Property="BackgroundColor" Value="#C4C4C4"/>
                <Setter Property="WidthRequest" Value="70"/>
            </Style>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Orientation="Vertical"
                     Padding="20,5,20,5"
                     BackgroundColor="#DCDCDC">
            <Label 
                   TextColor="Black"
                   HorizontalTextAlignment="Center"
                   FontSize="25">
                <Label.Triggers>
                    <DataTrigger TargetType="Label" Binding="{Binding IsFutureBooking}" Value="True">
                        <Setter Property="Text" Value=""/>
                    </DataTrigger>
                    <DataTrigger TargetType="Label" Binding="{Binding IsFutureBooking}" Value="False">
                        <Setter Property="Text" Value="{Binding FormattedDistance}" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>
            <StackLayout Orientation="Horizontal">
                <Image Source="green_pin.png"
                       HeightRequest="40"/>
                <Label TextColor="Black"
                       HorizontalTextAlignment="Start"
                       FontSize="20"
                       Margin="10,10,0,0"
                       Text="{Binding StartStreetName}">
                </Label>
            </StackLayout>
            <StackLayout Orientation="Horizontal">
                <Image Source="red_pin.png"
                       HeightRequest="40"/>
                <Label TextColor="Black"
                       HorizontalTextAlignment="Start"
                       FontSize="20"
                       Margin="10,10,0,0"
                       Text="{Binding EndStreetName}">
                </Label>
            </StackLayout>
            <Frame CornerRadius="25"
                   Padding="0"
                   Margin="0,15,0,0"
                   BackgroundColor="#BCA70F0F">
                <StackLayout>
                    <Frame BackgroundColor="#C4C4C4"
                           HeightRequest="28"
                           Padding="0,5,0,5"
                           CornerRadius="25">
                        <StackLayout Orientation="Horizontal" 
                                     HorizontalOptions="CenterAndExpand">
                            <Image Source="clock.png"
                                   Margin="0,0,10,0"/>
                            <Label 
                                   TextColor="Black"
                                   FontAttributes="Bold"
                                   VerticalTextAlignment="Center"
                                   HorizontalTextAlignment="Center"
                                   FontSize="20">
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label" Binding="{Binding IsFutureBooking}" Value="True">
                                        <Setter Property="Text" Value="{Binding FormattedPickUpTime}"/>
                                    </DataTrigger>
                                    <DataTrigger TargetType="Label" Binding="{Binding IsFutureBooking}" Value="False">
                                        <Setter Property="Text" Value="READY NOW" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                        </StackLayout>
                    </Frame>
                    <Frame x:Name="corporateVIPFrame" BackgroundColor="Transparent"
                           Padding="5">
                        <Label Text="Corporate VIP Booking"
                               TextColor="White"
                               FontAttributes="Bold"
                               VerticalTextAlignment="Start"
                               HorizontalTextAlignment="Center"
                               FontSize="20"/>
                    </Frame>
                </StackLayout>
            </Frame>
            <StackLayout Orientation="Horizontal" 
                         Margin="0,5,0,0">
                <StackLayout HorizontalOptions="StartAndExpand">
                    <Label Text="PAYMENT"
                           HorizontalTextAlignment="Center"
                           TextColor="Black"
                           FontSize="15"/>
                    <Frame Padding="4,12"
                           WidthRequest="100"
                           CornerRadius="24"
                           Style="{StaticResource BelowFrameStyle}">
                        <Label Text="{Binding FareTypeValue}"
                               FontSize="20"
                               Style="{StaticResource InnerFrameLabel}"/>
                    </Frame>
                </StackLayout>
                <StackLayout HorizontalOptions="CenterAndExpand">
                    <Label Text="POINTS"
                           HorizontalTextAlignment="Center"
                           TextColor="Black"
                           FontSize="15"/>
                    <Frame Style="{StaticResource BelowFrameStyle}" 
                           Padding="4,12"
                           CornerRadius="24">
                        <Label Text="{Binding RewardPoints}" FontSize="20"
                               Style="{StaticResource InnerFrameLabel}"/>
                    </Frame>
                </StackLayout>
                <StackLayout HorizontalOptions="EndAndExpand">
                    <Label Text="FEE"
                           HorizontalTextAlignment="Center"
                           TextColor="Black"
                           FontSize="15"/>
                    <Frame Style="{StaticResource BelowFrameStyle}" 
                           Padding="4,12"
                           CornerRadius="24">
                        <Label Text="{Binding BookingFee, StringFormat='{0}%'}" FontSize="20"
                               TextColor="#B44444"
                               Style="{StaticResource InnerFrameLabel}"/>
                    </Frame>
                </StackLayout>
            </StackLayout>
            <StackLayout VerticalOptions="EndAndExpand" 
                         Margin="0,5,0,0">
                <Button
                        Margin="20,0,20,0"
                        Text="Accept Booking"
                        FontSize="20"
                        Command="{Binding OnAcceptBookingClicked}"/>
                <Button
                        Margin="20,0,20,15"
                        Text="Decline Booking"
                        FontSize="20"
                        TextTransform="Uppercase"
                        Command="{Binding OnDeclineBookingClicked}"/>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>