xaml - How to set BoxView or Frame height equal to Screen Height in Xamarin Forms?

Question

I am having a BoxView I need to set its Height and width equal to screen size. I am using StackLayout and setting HeightRequest="500" WidthRequest=400. I want the BoxView to fill the screen space. How can it be done?

标签： xamlxamarinxamarin.forms

Answer 1

Use Grid and set <RowDefinition Height="*" />.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <BoxView Grid.Row="0" BackgroundColor="Black" />

</Grid>

If you are using nested Grid then set <RowDefinition Height="*" /> in the outermost Grid. When you are setting Height and Width of BoxView same as the Screen size, then it is obvious that BoxView will take all of the screen space. Hence outermost Grid will have only 1 Row. Now if you want to show other UI elements on the same Page then you will have to hide the BoxView that was covering the UI. Hence outermost Grid will contain 1 Row, that will be used to show either BoxView or other UI elements. Just like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <BoxView Grid.Row="0" BackgroundColor="Black" IsVisible="True"/>

    <StackLayout Grid.Row="0" IsVisible="False">
        <Label Text="Hello"/>
    </StackLayout>

</Grid>

Note that you can also use nested Grid instead of StackLayout and organize your elements as per your choice.

If you want to add elements inside a BoxView just like Cards then use Frame instead.