I designed a UI in .xaml form: I want results like this with ScrollView

But when I applied ScrollView, UI became like this: When I applied ScrollView UI changed, I want to remove upper and lower unnecessary space from logo

This is 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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App2.Views.AboutPage">
    <ContentPage.Content>
        <ScrollView>
            <Grid RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Row="0" Grid.Column="1" VerticalOptions="Start" HorizontalOptions="Center">
                    <Image Source="easypaisa1.png"/>
                </StackLayout>
                <StackLayout Grid.Row="1" Grid.ColumnSpan="3"  VerticalOptions="Start" Margin="0,-150,0,0">
                    <Label Text="Account#" HorizontalOptions="Center"/>
                    <Label Text="1234567890" TextColor="Black" FontAttributes="Bold" FontSize="Title" HorizontalOptions="Center"/>
                    <Label Text="Account Title" HorizontalOptions="Center"/>
                    <Label Text="USER NAME" TextColor="Black" FontAttributes="Bold" FontSize="Title" HorizontalOptions="Center"/>
                    <Entry   IsEnabled="False" Grid.ColumnSpan="3"   Keyboard="Default" Text="Selected Package" FontAttributes="Bold"  PlaceholderColor="#30769f" FontSize="14" TextColor="Black" Margin="20,10,20,0" />
                    <Entry   Grid.ColumnSpan="3"   Keyboard="Default"  Placeholder="Transaction ID"  PlaceholderColor="#30769f" FontSize="14" TextColor="Black" Margin="20,0,20,0" />
                    <DatePicker Margin="20,0,20,0" TextColor="#30769f"/>
                    <Entry   Grid.ColumnSpan="3"   Keyboard="Default"  Placeholder="Transactor Name"  PlaceholderColor="#30769f" FontSize="14" TextColor="Black" Margin="20,0,20,0" />
                    <Label Text="After payment from your easypaisa or other wallet account note Transaction ID, Transaction Date and enter your name in Transactor field." Grid.ColumnSpan="3" Margin="20,0,20,0"/>
                    <Button x:Name="DList"   Text="Click to submit" Margin="20,0,20,0" CornerRadius="15" BackgroundColor="#212121"   TextColor="White"   HeightRequest="50" Padding="10,0,20,0"/>
                </StackLayout>
            </Grid>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>```
Thanks Advance!

CodePudding user response：

Here we need to set a absolute height on the first row to let it know how much space should take up.

We can set HeightRequest on first RowDefinition or first StackLayout or the Image itself.

<RowDefinition Height="100"/>
<RowDefinition Height="*"/>

<StackLayout Grid.Row="0" Grid.Column="1" HeightRequest="100"/>

<Image Source="dog.png" HeightRequest="100"/>

PS: auto only works for some specific control , e,g Label ..