Reputation: 24562
I have a grid area and I would like for that to be filled from top to bottom with the background green color:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="72*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
Here is Row 2
<Grid Grid.Row="2" HorizontalOptions="FillAndExpand" VerticalOptions="Center" BackgroundColor="#EEEEEE">
<Grid Padding="10,10,10,10" VerticalOptions="FillAndExpand"
BackgroundColor="Lime"/>
</Grid>
What I get with this code is a white area that's the correct size of the grid but there's just a small green line in the middle.
How can I make the grid fill completely?
Upvotes: 1
Views: 78
Reputation: 2316
You can create an AbsoluteLayout as a root. And put your background grid first on the AbsoluteLayout with full width and height. Then add your content on the same AbsoluteLayout as well.
Upvotes: 0
Reputation: 905
The way to achieve this is to set Background attribute of tag "Grid" to your color of choice.
<Grid x:Name="phraseGrid" BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,20,0,0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="72*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid Grid.Row="2" x:Name="buttonGrid" HorizontalOptions="FillAndExpand" VerticalOptions="Center" BackgroundColor="#EEEEEE">
<Grid IsVisible="{Binding ButtonGridVisible, Converter={StaticResource InverseBoolConverter} }" Padding="10,10,10,10" VerticalOptions="FillAndExpand" BackgroundColor="Lime">
</Grid>
Upvotes: 1