Josemafuen
Reputation: 642
Grid taking all the space Xamarin
I've got in my xamarin forms app an xaml in which I have a Grid and a horizontal StackLayout inside a main vertical StackLayout. The problem is that the Grid takes all the vertical space of the screen and I cannot see the inner StackLayout. Here's the 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"
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>
What I would like to happen is that the inner StackLayout with that couple of Images takes all the space that it needs at the bottom of the screen and the rest of the screen is used by the grid, which may be scrollable.
Upvotes: 2
Views: 2703
Answers (2)
SuavePirate
Reputation: 1513
When you use Auto for your ColumnDefiitions and RowDefinitions, it gives the layout measurement calculations to the inner views of each cell. Therefore, your Grid is taking up all the space simply because the inner Views are increasing the width and height.
My suggestion would be to abandon the Auto widths and heights. They are really tough on performance too. See Kent's blog post here about some tips on this. It can also help you with structuring your Grid (you might want to just use a StackLayout since you're using what is basically a bunch of Rows. http://kent-boogaart.com/blog/jason-smith's-xamarin-forms-performance-tips
If each of your Rows need to be the same height, use * instead of 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>
Using * will also guarantee the measurements do not increase the size of the container, meaning your StackLayout that is hidden should be visible.
One last alternative is to to what Mike said, and wrap it in a ScrollView.
Upvotes: 0
Mike Ma
Reputation: 2027
Because your Grid taking all the space of the screen I suggest you to add scroll view as following 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: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>
Upvotes: 1
Related Questions
- Why does my Grid have some internal spacing?
- Grid not expanding to fill screen
- Xamarin.Forms Grid Layout
- How to properly set height on GRID?
- Grid is not using all the space available to it
- Xamarin - Not occupying the whole area in the screen using grid
- Grid with RowSpacing(Xamarin Forms) and navigation
- Different grid sizes on platforms
- Issues with the Grid (Xamarin Forms)
- Xamarin.Forms GridLayout