gm_cabs_driver_maui/GMCabsDriverAssistantSolution/Views/UserRegistrationVerifyOtpPage.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.UserRegistrationVerifyOtpPage"
             xmlns:vm="clr-namespace:GMCabsDriverAssistantSolution.ViewModels"
             xmlns:custom="clr-namespace:GMCabsDriverAssistantSolution.CustomControls"
             Shell.FlyoutBehavior="Disabled"
             Title="UserRegistrationVerifyOtpPage">
    <ContentPage.BindingContext>
        <vm:UserRegistrationVerifyOtpViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="EntryStyle" TargetType="Entry">
                <Setter Property="TextColor" Value="#000"></Setter>
                <Setter Property="PlaceholderColor" Value="#9999"></Setter>
                <Setter Property="TranslationY"  Value="1" />
                <Setter Property="MinimumHeightRequest" Value="36" />
            </Style>
            <Style x:Key="NoUnderlineEntryFrameStyle" TargetType="Frame">
                <Setter Property="Padding">
                    <OnPlatform x:TypeArguments="Thickness">
                        <On Platform="Android">16,4</On>
                        <On Platform="iOS">16</On>
                    </OnPlatform>
                </Setter>
                <Setter Property="CornerRadius" Value="12"></Setter>
                <Setter Property="Margin" Value="0,16,0,0"></Setter>
                <Setter Property="HasShadow" Value="True"></Setter>
                <Setter Property="MinimumHeightRequest" Value="50" />
                <Setter Property="BackgroundColor" Value="White" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="16"
                     Orientation="Vertical" 
                     BackgroundColor="#DCDCDC">
            <Label Text="User Registration"
                   HorizontalOptions="CenterAndExpand"
                   FontSize="Title"
                   TextColor="Black"/>
            <Label Text="{Binding PhoneNumber, StringFormat='Enter verification code from the SMS sent to {0}'}"
                   FontSize="Medium"
                   Margin="0,16,0,0"
                   HorizontalOptions="CenterAndExpand"
                   TextColor="Gray"/>
            <Grid Padding="30" Margin="{OnIdiom Tablet='270,0,270,0'}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <custom:OtpEntry x:Name="step1" Grid.Column="0" TextChanged="step1_TextChanged" Keyboard="Numeric" MaxLength="1" HorizontalTextAlignment="Center" BackgroundColor="#e5e5e5" TextColor="#6C63FF" FontFamily="fontbold" Text="{Binding Step1}"/>
                <custom:OtpEntry x:Name="step2" Grid.Column="1" TextChanged="step2_TextChanged" Keyboard="Numeric" MaxLength="1" HorizontalTextAlignment="Center" BackgroundColor="#e5e5e5" TextColor="#6C63FF" FontFamily="fontbold" Text="{Binding Step2}"/>
                <custom:OtpEntry x:Name="step3" Grid.Column="2" TextChanged="step3_TextChanged" Keyboard="Numeric" MaxLength="1" HorizontalTextAlignment="Center" BackgroundColor="#e5e5e5" TextColor="#6C63FF" FontFamily="fontbold" Text="{Binding Step3}"/>
                <custom:OtpEntry x:Name="step4" Grid.Column="3" TextChanged="step4_TextChanged" Keyboard="Numeric" MaxLength="1" HorizontalTextAlignment="Center" BackgroundColor="#e5e5e5" TextColor="#6C63FF" FontFamily="fontbold" Text="{Binding Step4}"/>
            </Grid>
            <Button Text="Verify OTP"
                    FontSize="20"
                    Margin="{OnIdiom Phone='0,32,0,0',Tablet='270,0,270,0'}"
                    VerticalOptions="EndAndExpand"
                    Command="{Binding VerifyOtp}"/>
            <Label Text="{Binding ErrorMessage}"
                   TextColor="Red"
                   HorizontalTextAlignment="Center"
                   FontSize="20"
                   VerticalOptions="EndAndExpand"/>
            <Button Text="Back"
                    FontSize="20"
                    Margin="{OnIdiom Phone='0,16,0,0',Tablet='270,0,270,0'}"
                    Command="{Binding Back}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>