ScrollView错置了我的UI- ScrollView不正常工作。

Question

我用.xaml表单设计了一个UI：我想要像ScrollView这样的结果

但是当我应用ScrollView时，UI变成了这样：当我应用ScrollView UI更改时，我想从徽标中删除上、下不必要的空间。

这是xaml代码：

<?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!

Answer 1

在这里，我们需要在第一行设置一个absolute height，让它知道应该占用多少空间。

我们可以将HeightRequest设置在第一个RowDefinition或第一个StackLayout或Image本身上。

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

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

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

PS：auto只适用于某些特定的控件，e，g标签。