网格占据了所有空间Xamarin

时间:2017-03-26 23:06:55

标签: c# android xamarin xamarin.forms

我的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>

2 个答案:

答案 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)

当您对AutoColumnDefiitions使用RowDefinitions时,它会为每个单元格的内部视图提供布局测量计算。因此,Grid占据了所有空间,因为内部Views正在增加宽度和高度。

我的建议是放弃Auto宽度和高度。他们在表现上也非常强硬。请参阅Kent的博客文章,了解有关此问题的一些提示。它还可以帮助您构建Grid(您可能只想使用StackLayout,因为您使用的基本上是Rowshttp://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