Alan2
Alan2

Reputation: 24562

How can I make the background of a grid fill from top to bottom?

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

Answers (2)

Bright Lee
Bright Lee

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

MaticDiba
MaticDiba

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

Related Questions