Keyboard covering form elements on iOS on .NET MAUI App

user_1705266 0
Viewed 353

I'm converting my Xamarin app to .NET MAUI and looks like the <ScrollView> solution doesn't work on iOS on a .NET MAUI app or I'm doing something wrong. It works fine on Android though. Any suggestions? Also, this same layout was working fine in Xamarin.

Here's what my form looks like:

<ScrollView
   Orientation="Neither"
   Padding="0"
   HorizontalOptions="CenterAndExpand">
   <Grid
      RowDefinitions="500,Auto"
      ColumnDefinitions="*">
            
      <!-- Background Image -->
      <Image
         Grid.RowSpan="2"
         Source="my_background_image.jpg"
         Aspect="AspectFill"/>
            
         <!-- Logo -->
         <Image
            Grid.Row="0"
            Source="my_logo.png"
            HeightRequest="130"
            HorizontalOptions="Center"
            VerticalOptions="CenterAndExpand"/>
            
         <!-- Login Form -->
         <VerticalStackLayout
            Grid.Row="1"
            HorizontalOptions="CenterAndExpand">

            <Border
               BackgroundColor="{StaticResource Gray100}"
               Padding="3">
               <Border.StrokeShape>
                  <RoundRectangle CornerRadius="5,5,5,5" />
               </Border.StrokeShape>
               <Entry
                  Text="{Binding UserName}"
                  BackgroundColor="White"
                  Placeholder="Email Address"
                  WidthRequest="350"/>
            </Border>

            <Border
               BackgroundColor="{StaticResource Gray100}"
               Padding="3"
               Margin="0,10,0,0">
                  <Border.StrokeShape>
                     <RoundRectangle CornerRadius="5,5,5,5" />
                  </Border.StrokeShape>
                  <Entry
                     Text="{Binding Password}"
                     BackgroundColor="White"
                     Placeholder="Password"
                     WidthRequest="350"/>
               </Border>

               <Button
                  Text="SIGN IN"
                  TextColor="White"
                  BackgroundColor="{StaticResource Primary}"
                  FontAttributes="Bold"
                  CharacterSpacing="2"
                  Command="{Binding SubmitCommand}"
                  WidthRequest="350"
                  HorizontalOptions="CenterAndExpand"
                  VerticalOptions="CenterAndExpand"
                  Margin="0,20,0,0"/>

            <HorizontalStackLayout
               HorizontalOptions="CenterAndExpand"
               Margin="0,30,0,0">

                  <Border
                     BackgroundColor="Transparent"
                     Padding="5">
                     <Label
                        Text="New User Sign Up"
                        TextColor="White"
                        FontSize="12"/>
                  </Border>

                  <Border
                     BackgroundColor="Transparent"
                     Padding="5">
                     <Label
                        Text="|"
                        TextColor="White"
                        FontSize="12"
                        Margin="5,0,5,0"/>
                  </Border>

                  <Border
                     BackgroundColor="Transparent"
                     Padding="5">
                        <Label
                           Text="Forgot Password"
                           TextColor="White"
                           FontSize="12" />
                  </Border>

            </HorizontalStackLayout>

         </VerticalStackLayout>
            
   </Grid>
</ScrollView>
maui xamarin.forms xamarin
1 Answers

To solve the issue , you can move up the login Form when keyboard shows and move down it when hiding keyboard.

To detect the keyboard shows/hide event , you can hook it in Focused/Unfocused event of Entry.

The last point is that we only need it to do that on iOS platform.

Sample code

Give a name on VerticalStackLayout and add event on Entry .

<VerticalStackLayout Grid.Row="1" HorizontalOptions="CenterAndExpand" x:Name="layout">

<Entry Text="{Binding UserName}" BackgroundColor="White" Placeholder="Email Address" WidthRequest="350" Focused="Entry_Focused" Unfocused="Entry_Unfocused"/>

Handle the logic in code behind

private void Entry_Focused(object sender, FocusEventArgs e)
{
    if (DeviceInfo.Current.Platform == DevicePlatform.iOS)
    {
        layout.TranslateTo(0, -200, 50);
    }
}

private void Entry_Unfocused(object sender, FocusEventArgs e)
{
    if (DeviceInfo.Current.Platform == DevicePlatform.iOS)
    {
        layout.TranslateTo(0, 0, 50);
    }
}
user_81878000
Related