Xamarin ScrollView 错放我的 UI- ScrollView 无法正常工作
Xamarin ScrollView Misplace my UI- ScrollView not working properly
我设计了一个UI的.xaml形式:
I want results like this with ScrollView
但是当我应用ScrollView时,UI变成了这样:
When I applied ScrollView UI changed, I want to remove upper and lower unnecessary space from logo
这是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!
这里我们需要在第一行设置一个absolute height
让它知道space应该占多少
我们可以在第一个 RowDefinition
或第一个 StackLayout
或 Image
本身上设置 HeightRequest
。
<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 ..
我设计了一个UI的.xaml形式: I want results like this with ScrollView
但是当我应用ScrollView时,UI变成了这样: When I applied ScrollView UI changed, I want to remove upper and lower unnecessary space from logo
这是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!
这里我们需要在第一行设置一个absolute height
让它知道space应该占多少
我们可以在第一个 RowDefinition
或第一个 StackLayout
或 Image
本身上设置 HeightRequest
。
<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 ..