Layout issue when keyboard is opened

RyanHaworthRyanHaworth USMember ✭✭
edited February 28 in Xamarin.Forms

There is a problem with my images moving and resizing in my grid layout. The UI will load perfectly when the application is loaded but when I select the entry field the keyboard will open and cause the grid layout to move and the image to be re-positioned. I have attached my source code and images to the post to see what the layout looks like before and after.

Does anybody know what causes this? Am I missing some attributes from my code below?

Attached are my images of the application

My code

`

<Grid.RowDefinitions>



</Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <ff:CachedImage Aspect="AspectFill"
                            HeightRequest="300"
                            HorizontalOptions="FillAndExpand"
                            Source="resource://Sonr.Mobile.Resources.desert.jpg"
                            VerticalOptions="FillAndExpand">
                <ff:CachedImage.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding SetBackgroundImageCommand}" NumberOfTapsRequired="1" />
                </ff:CachedImage.GestureRecognizers>
            </ff:CachedImage>

            <telerikPrimitives:RadBorder Margin="0,0,20,20"
                                         BorderColor="White"
                                         BorderThickness="3"
                                         CornerRadius="60"
                                         HeightRequest="120"
                                         HorizontalOptions="End"
                                         VerticalOptions="End"
                                         WidthRequest="120">
                <ff:CachedImage Aspect="AspectFill"
                                HorizontalOptions="FillAndExpand"
                                Source="resource://Sonr.Mobile.Resources.male_profile.png"
                                VerticalOptions="FillAndExpand">
                    <ff:CachedImage.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding SetProfileImageCommand}" NumberOfTapsRequired="1" />
                    </ff:CachedImage.GestureRecognizers>
                </ff:CachedImage>
            </telerikPrimitives:RadBorder>
        </Grid>

        <Grid Grid.Row="1" Margin="16">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <StackLayout Grid.Row="0">
                <Label Text="Firstname" />
                <Entry validations:Validation.Errors="{Binding Errors[FirstName]}"
                       Placeholder="Enter firstname here"
                       Text="{Binding FirstName}" />
                <Label Text="{Binding Errors[FirstName], Converter={StaticResource FirstErrorConverter}}" TextColor="Red" />
            </StackLayout>

            <StackLayout Grid.Row="1">
                <Label Text="Surname" />
                <Entry validations:Validation.Errors="{Binding Errors[Surname]}"
                       Placeholder="Enter surname here"
                       Text="{Binding Surname}" />
                <Label Text="{Binding Errors[Surname], Converter={StaticResource FirstErrorConverter}}" TextColor="Red" />
            </StackLayout>

            <StackLayout Grid.Row="2">
                <Label Text="Gender" />
                <Label Text="Male" />
                <telerikPrimitives:RadCheckBox x:Name="MaleCheckbox"
                                               IsChecked="{Binding GenderMale, Mode=TwoWay}"
                                               IsCheckedChanged="MaleCheckbox_IsCheckedChanged" />
                <Label Text="Female" />
                <telerikPrimitives:RadCheckBox x:Name="FemaleCheckbox"
                                               IsChecked="{Binding GenderFemale, Mode=TwoWay}"
                                               IsCheckedChanged="FemaleCheckbox_IsCheckedChanged" />
                <Label Text="Validation error" />
            </StackLayout>

            <StackLayout Grid.Row="3">
                <Label Text="Age" />
                <Picker validations:Validation.Errors="{Binding Errors[SelectedAge]}"
                        ItemsSource="{Binding AgeItems}"
                        SelectedItem="{Binding SelectedAge}" />
                <Label Text="{Binding Errors[SelectedAge], Converter={StaticResource FirstErrorConverter}}" TextColor="Red" />
            </StackLayout>
        </Grid>

        <Button Grid.Row="3"
                BackgroundColor="Blue"
                Command="{Binding SaveCommand}"
                CornerRadius="0"
                FontAttributes="Bold"
                HeightRequest="80"
                Text="SAVE PROFILE"
                TextColor="White" />
    </Grid>
</ScrollView>`

Any help would be great thanks

Posts

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    This is Android's behavior in a scroll view like that.

    You can use the Soft Keyboard Input Mode to adjust it: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/soft-keyboard-input-mode

  • RyanHaworthRyanHaworth USMember ✭✭

    Hi James, thanks for your suggestion, I tried this implementation and this did not work. After trying many layout options I decided to change the control type from to a normal control and this has solved my problem. However I have lost the cache feature which I will have to implement myself unless there are any great caching plugins available. This is my first xamarin app as I have only ever produced native android apps.

  • RyanHaworthRyanHaworth USMember ✭✭

    James, I have just found your really useful post here https:||montemagno.com/xamarinforms-image-caching-in-xaml/ which enables caching for web images, I will use this when I load images from a URI. I still get a flicker from images from embedded resources so I will see if it is possible to cache that.

Sign In or Register to comment.