CODEWITHSUNDEEP
c#xamarinscrollview
totesz09
totesz09

Reputation: 154

Xamarin Forms: ScrollView with KeyBoard

I am on the most current version of Xamarin Forms. I have a Content Page. The Content Page has a grid that has a scrollview that has a stacklayout that contains some image and Entry inputs and some Buttons. When I touch the Entry to enter text, the keyboard covers the Buttons so I can't press the button. This isn't scrollable and I don't know why. Anybody can help me?

Here is my XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Spirocco.LoginPage">
<Grid>
    <ScrollView Orientation="Both" x:Name="scrollView">
        <ScrollView.Content>
            <StackLayout BackgroundColor="#302138">
                <Image Source="login_logo" Margin="0,0,0,0"></Image>
                <StackLayout BackgroundColor="White" Margin="20,0,20,30">
                    <Label Text="ÜDVÖZÖLJÜK!" FontSize="30" FontFamily="Comic Sans MS" Margin="0,15,0,0" TextColor="#302138" HorizontalTextAlignment="Center"></Label>
                    <Entry Text="{Binding Email}" Placeholder="E-mail" Margin="40,0,40,0" Keyboard="Email"/>
                    <Entry Text="{Binding Password}" Placeholder="Jelszó" IsPassword="True" Margin="40,0,40,0"/>
                    <Button Text="BEJELENTKEZÉS" Clicked="Login" TextColor="White" BackgroundColor="#302138" Margin="40,10,40,0"/>
                    <Button Text="REGISZTRÁCIÓ" Clicked="Register" TextColor="White" BackgroundColor="#302138" Margin="40,0,40,25"/>
                </StackLayout>
            </StackLayout>
        </ScrollView.Content>
    </ScrollView>
</Grid>

Here is the solution

Upvotes: 5

Views: 6858

Answers (3)

Petr Tripolsky
Petr Tripolsky

Reputation: 1613

Just add this code to App.xaml.cs to make page auto-resizable

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

public partial class App : Xamarin.Forms.Application
{
    public App ()
    {
        Xamarin.Forms.Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
        InitializeComponent();

        MainPage = new NavigationPage(new LoginTabsPage()){
        ...

enter image description here

Upvotes: 15

totesz09
totesz09

Reputation: 154

The Solution is Here

It wasn't scrollable because in the stacklayout doesn't have enough content. I able to do this. This is not a very nice solution but works. I put a label width HeighRequest and same color with StackLayout and now the page is scrollable when I type my password. 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Spirocco.LoginPage">
<ContentPage.Content>
    <ScrollView Orientation="Both" x:Name="scrollView">
        <ScrollView.Content>
            <StackLayout BackgroundColor="#302138">
                <Image Source="login_logo" Margin="0,0,0,0"></Image>
                <StackLayout BackgroundColor="White" Margin="20,0,20,30">
                    <Label Text="ÜDVÖZÖLJÜK!" FontSize="30" FontFamily="Comic Sans MS" Margin="0,15,0,0" TextColor="#302138" HorizontalTextAlignment="Center"></Label>
                    <Entry Text="{Binding Email}" Placeholder="E-mail" Margin="40,0,40,0" Keyboard="Email"/>
                    <Entry Text="{Binding Password}" Placeholder="Jelszó" IsPassword="True" Margin="40,0,40,0"/>
                    <Button Text="BEJELENTKEZÉS" Clicked="Login" TextColor="White" BackgroundColor="#302138" Margin="40,10,40,0"/>
                    <Button Text="REGISZTRÁCIÓ" Clicked="Register" TextColor="White" BackgroundColor="#302138" Margin="40,0,40,25"/>
                </StackLayout>
                <Label BackgroundColor="#302138" HeightRequest="160"/>
            </StackLayout>
        </ScrollView.Content>
    </ScrollView>
</ContentPage.Content>

Upvotes: 0

TaiT&#39;s
TaiT&#39;s

Reputation: 3216

By default, grid's row height value will be equals to '*' and therefore will take all the space in the screen. This is why it is not scrollable.

By the way, I don't really get why you nest in into a grid.

Try this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="Spirocco.LoginPage">

<ScrollView Orientation="Both" x:Name="scrollView">
    <ScrollView.Content>
        <StackLayout BackgroundColor="#302138">
            <Image Source="login_logo" Margin="0,0,0,0"></Image>
            <StackLayout BackgroundColor="White" Margin="20,0,20,30">
                <Label Text="ÜDVÖZÖLJÜK!" FontSize="30" FontFamily="Comic Sans MS" Margin="0,15,0,0" TextColor="#302138" HorizontalTextAlignment="Center"></Label>
                <Entry Text="{Binding Email}" Placeholder="E-mail" Margin="40,0,40,0" Keyboard="Email"/>
                <Entry Text="{Binding Password}" Placeholder="Jelszó" IsPassword="True" Margin="40,0,40,0"/>
                <Button Text="BEJELENTKEZÉS" Clicked="Login" TextColor="White" BackgroundColor="#302138" Margin="40,10,40,0"/>
                <Button Text="REGISZTRÁCIÓ" Clicked="Register" TextColor="White" BackgroundColor="#302138" Margin="40,0,40,25"/>
            </StackLayout>
        </StackLayout>
    </ScrollView.Content>
</ScrollView>

Upvotes: 0

Related Questions