我的xamarin表单应用程序中有一个xaml,其中我在主垂直StackLayout中有一个Grid和一个水平StackLayout。问题是网格占据了屏幕的所有垂直空间,我无法看到内部的StackLayout。这是代码。
<?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="Practice3.AddPage">
<StackLayout Margin="15,10,15,5" Orientation="Vertical">
<Grid VerticalOptions="Center" HorizontalOptions="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Row 0 -->
<Label
x:Name="TitleText"
Text="New film:"
Grid.Row="0"
Grid.Column="0"
FontSize="Large"
FontAttributes="Bold"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Title"
x:Name="TitleEntry"
Grid.Row="0"
Grid.Column="1"
FontSize="Large"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="YearLabel"
Text="Year:"
Grid.Row="1"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Year"
x:Name="YearEntry"
Grid.Row="1"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="DurationLabel"
Text="Duration:"
Grid.Row="2"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Duration"
x:Name="DurationEntry"
Grid.Row="2"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 3 -->
<Label
x:Name="CountryLabel"
Text="Country:"
Grid.Row="3"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Country"
x:Name="CountryEntry"
Grid.Row="3"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 4 -->
<Label
x:Name="DirectorLabel"
Text="Director:"
Grid.Row="4"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Director"
x:Name="DirectorEntry"
Grid.Row="4"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 5 -->
<Label
x:Name="ScreenwriterLabel"
Text="Screenwriter:"
Grid.Row="5"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Screenwriter"
x:Name="ScreenwriterEntry"
Grid.Row="5"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 6 -->
<Label
x:Name="MusicLabel"
Text="Music:"
Grid.Row="6"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Music"
x:Name="MusicEntry"
Grid.Row="6"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 7 -->
<Label
x:Name="CinematographyLabel"
Text="Cinematography:"
Grid.Row="7"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Cinematography"
x:Name="CinematographyEntry"
Grid.Row="7"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 8 -->
<Label
x:Name="CastLabel"
Text="Cast:"
Grid.Row="8"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="75"
Keyboard="Text"
x:Name="CastEntry"
Grid.Row="8"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 9 -->
<Label
x:Name="ProducerLabel"
Text="Producer:"
Grid.Row="9"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Producer"
x:Name="ProducerEntry"
Grid.Row="9"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 10 -->
<Label
x:Name="GenreLabel"
Text="Genre:"
Grid.Row="10"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Genre"
x:Name="GenreEntry"
Grid.Row="10"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 11 -->
<Label
x:Name="PlotLabel"
Text="Plot:"
Grid.Row="11"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="100"
Keyboard="Default"
x:Name="PlotEntry"
Grid.Row="11"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
</Grid>
<StackLayout Orientation="Vertical">
<Image
x:Name="cancelButton"
Source="Assets/cancelB.jpg"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
<Image
x:Name="okButton"
Source="Assets/okB.jpg"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
</ContentPage>
我想要发生的是,带有那两个图像的内部StackLayout占用了屏幕底部所需的所有空间,并且网格的其余部分由网格使用,可以是可滚动的。 / p>
答案 0 :(得分:1)
因为您的Grid
占据了屏幕的所有空间,我建议您添加滚动视图,如下代码所示:
<?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:local="clr-namespace:App25"
x:Class="App25.MainPage">
<ScrollView Orientation="Both" >
<StackLayout Margin="15,10,15,5" Orientation="Vertical" >
<Grid VerticalOptions="Center" HorizontalOptions="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Row 0 -->
<Label
x:Name="TitleText"
Text="New film:"
Grid.Row="0"
Grid.Column="0"
FontSize="Large"
FontAttributes="Bold"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Title"
x:Name="TitleEntry"
Grid.Row="0"
Grid.Column="1"
FontSize="Large"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="YearLabel"
Text="Year:"
Grid.Row="1"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Year"
x:Name="YearEntry"
Grid.Row="1"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 2 -->
<Label
x:Name="DurationLabel"
Text="Duration:"
Grid.Row="2"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Numeric"
Placeholder="Duration"
x:Name="DurationEntry"
Grid.Row="2"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 3 -->
<Label
x:Name="CountryLabel"
Text="Country:"
Grid.Row="3"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Country"
x:Name="CountryEntry"
Grid.Row="3"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 4 -->
<Label
x:Name="DirectorLabel"
Text="Director:"
Grid.Row="4"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Director"
x:Name="DirectorEntry"
Grid.Row="4"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 5 -->
<Label
x:Name="ScreenwriterLabel"
Text="Screenwriter:"
Grid.Row="5"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Screenwriter"
x:Name="ScreenwriterEntry"
Grid.Row="5"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 6 -->
<Label
x:Name="MusicLabel"
Text="Music:"
Grid.Row="6"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Music"
x:Name="MusicEntry"
Grid.Row="6"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 7 -->
<Label
x:Name="CinematographyLabel"
Text="Cinematography:"
Grid.Row="7"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Text"
Placeholder="Cinematography"
x:Name="CinematographyEntry"
Grid.Row="7"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 8 -->
<Label
x:Name="CastLabel"
Text="Cast:"
Grid.Row="8"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="75"
Keyboard="Text"
x:Name="CastEntry"
Grid.Row="8"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 9 -->
<Label
x:Name="ProducerLabel"
Text="Producer:"
Grid.Row="9"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Producer"
x:Name="ProducerEntry"
Grid.Row="9"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 10 -->
<Label
x:Name="GenreLabel"
Text="Genre:"
Grid.Row="10"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Entry WidthRequest="500"
Keyboard="Default"
Placeholder="Genre"
x:Name="GenreEntry"
Grid.Row="10"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
<!-- Row 11 -->
<Label
x:Name="PlotLabel"
Text="Plot:"
Grid.Row="11"
Grid.Column="0"
FontSize="Default"
HorizontalOptions="End"
VerticalOptions="Center"
TextColor="Black"/>
<Editor WidthRequest="500"
HeightRequest="100"
Keyboard="Default"
x:Name="PlotEntry"
Grid.Row="11"
Grid.Column="1"
FontSize="Default"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="Black"/>
</Grid>
<StackLayout Orientation="Vertical">
<Image
x:Name="cancelButton"
BackgroundColor="Black"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
<Image
x:Name="okButton"
BackgroundColor="Blue"
WidthRequest="70"
HeightRequest="70"
Margin="20"
HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>
答案 1 :(得分:0)
当您对Auto
和ColumnDefiitions
使用RowDefinitions
时,它会为每个单元格的内部视图提供布局测量计算。因此,Grid
占据了所有空间,因为内部Views
正在增加宽度和高度。
我的建议是放弃Auto
宽度和高度。他们在表现上也非常强硬。请参阅Kent的博客文章,了解有关此问题的一些提示。它还可以帮助您构建Grid
(您可能只想使用StackLayout
,因为您使用的基本上是Rows
。http://kent-boogaart.com/blog/jason-smith's-xamarin-forms-performance-tips。
如果您的每个Rows
都需要相同的高度,请使用*
代替Auto
:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
使用*
也可以保证测量不会增加容器的大小,这意味着隐藏的StackLayout
应该是可见的。
最后一个选择是迈克所说的,并将其包装在ScrollView
。