locked
Frame inside grid-column will not expand fully RRS feed

  • Question

  • User392332 posted

    I'm trying to get two frames to automatically fill out the rest of a page, but without luck. Can anybody help me?

    This is how it looks running:

    This is my code: The problem is marked with ** at the bottom:

        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="18*"/>
            <RowDefinition Height="46*"/>
            </Grid.RowDefinitions>
        <Label Text="Default page" FontAttributes="Bold" BackgroundColor="LightGray" FontSize="21" TextColor="White" Grid.Row="0" HorizontalTextAlignment="Center" />
        <Label FontAttributes="Bold" BackgroundColor="DarkGreen" FontSize="21" TextColor="#09C887" Grid.Row="1" HorizontalTextAlignment="Start" />
    
    </Grid>
        <Grid VerticalOptions="FillAndExpand" >
            <Grid.RowDefinitions>
                <RowDefinition  Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Grid.Row="0"/>
                <ColumnDefinition Grid.Row="0"/>
            </Grid.ColumnDefinitions>
           ** <Frame Grid.Row="0" Grid.Column="0" BackgroundColor="BlanchedAlmond"  BorderColor="Black" VerticalOptions="FillAndExpand"/>
            <Frame Grid.Row="0" Grid.Column="1" BackgroundColor="Beige"  BorderColor="Black" VerticalOptions="FillAndExpand"/>**
    
        </Grid>
    </StackLayout>
    

    Friendly regards nbs

    Monday, January 20, 2020 1:49 PM

Answers

  • User371688 posted

    If you want no spacing within Grid, you just add property:

     ColumnSpacing="0" RowSpacing="0"
    

    if you want the second grid to fill the rest of a page, you can set Height of RowDefinition to *.

     <RowDefinition  Height="*" />
    

    So the whole xaml is like this:

        <StackLayout>
            <Grid ColumnSpacing="0" RowSpacing="0" BackgroundColor="Yellow" Margin="0">
                <Grid.RowDefinitions >
                    <RowDefinition Height="18*"/>
                    <RowDefinition Height="46*"/>
                </Grid.RowDefinitions>
                <Label Text="Default page" FontAttributes="Bold" BackgroundColor="LightGray" FontSize="21" TextColor="White" Grid.Row="0" HorizontalTextAlignment="Center" />
                <Label FontAttributes="Bold" BackgroundColor="DarkGreen" FontSize="21" TextColor="#09C887" Grid.Row="1" HorizontalTextAlignment="Start" />
    
            </Grid>
            <Grid VerticalOptions="FillAndExpand"  BackgroundColor="Accent" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0" >
                <Grid.RowDefinitions>
                    <RowDefinition  Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Grid.Row="0"/>
                    <ColumnDefinition Grid.Row="0"/>
                </Grid.ColumnDefinitions>
    
                <Frame Grid.Row="0" Grid.Column="0" BackgroundColor="BlanchedAlmond"  BorderColor="Black" VerticalOptions="FillAndExpand"  />
                <Frame Grid.Row="0" Grid.Column="1" BackgroundColor="Beige"  BorderColor="Black" VerticalOptions="FillAndExpand"  />
    
            </Grid>
        </StackLayout>
    

    The result is:

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, January 21, 2020 3:31 AM
  • User392332 posted

    Thank You very much jezh :) That was what, I was looking for. Friendly regards nbs

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, January 21, 2020 7:51 AM

All replies

  • User371688 posted

    If you want no spacing within Grid, you just add property:

     ColumnSpacing="0" RowSpacing="0"
    

    if you want the second grid to fill the rest of a page, you can set Height of RowDefinition to *.

     <RowDefinition  Height="*" />
    

    So the whole xaml is like this:

        <StackLayout>
            <Grid ColumnSpacing="0" RowSpacing="0" BackgroundColor="Yellow" Margin="0">
                <Grid.RowDefinitions >
                    <RowDefinition Height="18*"/>
                    <RowDefinition Height="46*"/>
                </Grid.RowDefinitions>
                <Label Text="Default page" FontAttributes="Bold" BackgroundColor="LightGray" FontSize="21" TextColor="White" Grid.Row="0" HorizontalTextAlignment="Center" />
                <Label FontAttributes="Bold" BackgroundColor="DarkGreen" FontSize="21" TextColor="#09C887" Grid.Row="1" HorizontalTextAlignment="Start" />
    
            </Grid>
            <Grid VerticalOptions="FillAndExpand"  BackgroundColor="Accent" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0" >
                <Grid.RowDefinitions>
                    <RowDefinition  Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Grid.Row="0"/>
                    <ColumnDefinition Grid.Row="0"/>
                </Grid.ColumnDefinitions>
    
                <Frame Grid.Row="0" Grid.Column="0" BackgroundColor="BlanchedAlmond"  BorderColor="Black" VerticalOptions="FillAndExpand"  />
                <Frame Grid.Row="0" Grid.Column="1" BackgroundColor="Beige"  BorderColor="Black" VerticalOptions="FillAndExpand"  />
    
            </Grid>
        </StackLayout>
    

    The result is:

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, January 21, 2020 3:31 AM
  • User392332 posted

    Thank You very much jezh :) That was what, I was looking for. Friendly regards nbs

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, January 21, 2020 7:51 AM
  • User371688 posted

    It's my pleasure to help you. Have a nice day. :)

    Tuesday, January 21, 2020 8:10 AM
  • User392332 posted

    Thank You. You too :)

    Tuesday, January 21, 2020 9:17 AM