Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

iPhone X, Xamarin.Forms Grid: Row Auto Height/Home Indicator

ksumarineksumarine USMember ✭✭

Hello,

I'm trying to create a page with a Grid that has 3 rows but the Grid doesn't extend into the Home Indicator area on the iPhone X. See attached image...

The grid has: VerticalOptions="Fill"

Is there a trick to extend the grid into the Home Indicator area? I've seen some RelativeLayout ideas, but nothing around using a Grid.

Help greatly appreciated!

Best Answer

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    1) Please share the code/markup you are asking for help with
    2) Try FillAndExpand
    3) Any parent container of a FillAndExpand needs to also be set to FillAndExpand

  • ksumarineksumarine USMember ✭✭
    edited July 2018

    Thanks @ClintStLaurent sorry...here's my page, also I tried FillAndExpand on the Grid before, no difference

    <?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:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
        ios:Page.UseSafeArea="true"
        x:Class="Namepace.Page"
        BackgroundColor="#003263">
        <ContentPage.Content>
            <Grid 
                x:Name="PageGrid"
                RowSpacing="0" 
                ColumnSpacing="0"
                BackgroundColor="#03264A"
                VerticalOptions="Fill">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="60"/>
                </Grid.RowDefinitions>
                <BoxView 
                    Grid.Row="0" 
                    Grid.Column="0" 
                    BackgroundColor="#003263" />
                <Button
                    HorizontalOptions="End"
                    VerticalOptions="Center"
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="80"
                    Opacity="0.3"
                    Margin="0,0,5,0"
                    Command="{Binding DoCarouselPageRight}"
                    Image="search-right.png" />            
                <Label 
                    Grid.Row="0" 
                    Grid.Column="0" 
                    Text="Settings/Info" 
                    VerticalOptions="Center" 
                    HorizontalOptions="Center"
                    BackgroundColor="Transparent"
                    Style="{DynamicResource TitleLabel}" />
                <StackLayout
                    Grid.Row="1"
                    Grid.Column="0"
                    BackgroundColor="Transparent">
                    <Image
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Margin="0,100,0,0"
                        Source="Splash.png" /> 
                    <Label
                        TextColor="Gray"
                        Margin="0,0,0,0"
                        HorizontalOptions="CenterAndExpand"
                        Style="{DynamicResource MsgSubsLabel}"
                        Text="{Binding AppVersionText}" />
                    <Label
                        TextColor="Gray"
                        Margin="0,-5,0,0"
                        HorizontalOptions="CenterAndExpand"
                        Style="{DynamicResource MsgSubsLabel}"
                        Text="{Binding CopyrightText}" />
                    <Label
                        x:Name="ContactSupportLabel"
                        TextColor="Red"
                        Margin="0,10,0,0"
                        HorizontalOptions="CenterAndExpand"
                        Style="{DynamicResource MsgSubsLabel}"
                        FontAttributes="Bold"
                        Text="Issues? Contact the HelpDesk" />
                </StackLayout>
                <Button
                    x:Name="LogOutButton"
                    Text="Log Out"
                    Grid.Row="2" 
                    Grid.Column="0" 
                    TextColor="White"
                    BackgroundColor="Red"
                    HorizontalOptions="FillAndExpand"
                    BorderRadius="0"
                    Command="{Binding OnLogoutClicked}"
                    Style="{DynamicResource MiscButton}"/>
            </Grid>
        </ContentPage.Content>
    </ContentPage>
    
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I worry that you have x:name on every control. That's a big red flag that someone is doing a bunch of manipulation in the code behind.

    Your last button. Try setting the margin to 0. Otherwise you get the default margin value and that might be lifting things up a bit. You might also set its VerticalOptions to End to force it to be at the bottom of the grid cell.

  • ksumarineksumarine USMember ✭✭

    Good call on the x:Names...I actually don't use them in the code behind, so I removed them.

    As for the button Margin, I have a Style where I set the margins for it. Neither of these changes help the problem.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Does it behave the same on an Android device? Or as a UWP? SOmetimes things can be platform-specific and knowing is at least a start

  • ksumarineksumarine USMember ✭✭
    edited July 2018

    I'm only seeing this on the iPhone X. I do not have the Android part of the app running yet (internal app, low priority). No UWP.

    Edit: I do have Page.UseSafeArea="true" which causes the same thing to happen on a fresh project...

    <?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:Testing2" 
        xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
        ios:Page.UseSafeArea="true"    
        x:Class="Testing2.MainPage">
        <ContentPage.Content>
            <Grid
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <BoxView
                    BackgroundColor="Red"
                    Grid.Row="0"
                    Grid.Column="0" />
                <BoxView
                    BackgroundColor="Blue"
                    Grid.Row="1"
                    Grid.Column="0" />
                <BoxView
                    BackgroundColor="Green"
                    Grid.Row="2"
                    Grid.Column="0" />
            </Grid>
        </ContentPage.Content>
    </ContentPage>
    

    I guess that's the expected behavior, though I'm not seeing it when I have a custom ListView in the "*" row on a different ContentPage.

    Do you know of any tricks to extend the height of the grid into the Home Indicator area?

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I'm only seeing this on the iPhone X.

    So on an iPhone8plus it behaves as expected?

  • ksumarineksumarine USMember ✭✭

    So on an iPhone8plus it behaves as expected?

    Yes, no issues. See previous comment re: Page.UseSafeArea="true"

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Ahhh....
    Yuck. That sounds like a reproducable bug to report to Xamarin.
    https://github.com/xamarin/Xamarin.Forms/issues

  • ksumarineksumarine USMember ✭✭

    Yuck. That sounds like a reproducable bug to report to Xamarin.

    Is it a bug or the intended behavior? The page does extend to the full height. I can set the BackGround color on the ContentPage and it applies behind the Home Indicator. The Grid is just conforming to the Page.UseSafeArea. It's just very annoying because visually it looks broken having an empty area under my content. Is there a "hack" or constraint I can use JUST on the iPhone X to achieve what I'd like?

    I appreciate your help, btw!

  • ksumarineksumarine USMember ✭✭

    What is strange, is that I have another ContentPage set up the same way with the Grid, but I have a simple custom ListView and it extends into the Home area...which looks nice and clean.

    <?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:App;assembly:App"
            xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
            ios:Page.UseSafeArea="true"
            x:Class="Namespace.Page"
            BackgroundColor="#003263"
            x:Name="AlertsContentPage">
        <ContentPage.Content>
            <Grid
                RowSpacing="0"
                ColumnSpacing="0"
                VerticalOptions="Fill">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="2" />
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <BoxView
                    BackgroundColor="#003263"
                    Grid.Row="0"
                    Grid.Column="0" />
                <Button
                    Command="{Binding ShowMaster}"
                    Image="hamburger.png"
                    WidthRequest="50"
                    Grid.Row="0"
                    Grid.Column="0"
                    Margin="10,0,0,0"
                    HorizontalOptions="Start"
                    VerticalOptions="FillAndExpand" />
                <Label
                    Grid.Row="0"
                    Grid.Column="0"
                    Margin="0,0,0,0"
                    Text="{Binding TitleLabel}"
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    Style="{DynamicResource TitleLabel}">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="OnTitleLabelTapped" />
                    </Label.GestureRecognizers>
                </Label>
                <Image
                    HorizontalOptions="End"
                    VerticalOptions="FillAndExpand"
                    Grid.Row="0"
                    Grid.Column="0"
                    Margin="0,0,10,0"
                    Source="script.png" />
                <BoxView
                    Grid.Row="1"
                    Grid.Column="0"
                    VerticalOptions="FillAndExpand"
                    BackgroundColor="#03264A"/>
                <AbsoluteLayout
                    Grid.Row="2"
                    Grid.Column="0"
                    Style="{DynamicResource SwipeMargin}">
                    <local:AlertListView x:Name="AlertListing" ContextActions="true">
                        <x:Arguments>
                            <ListViewCachingStrategy>RecycleElement</ListViewCachingStrategy>
                        </x:Arguments>                    
                    </local:AlertListView>
                </AbsoluteLayout>
                <ActivityIndicator
                    x:Name="AlertsActivityIndicator"
                    IsVisible="true"
                    IsRunning="{Binding IsBusy}"
                    Color="Red"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"
                    Grid.Row="2"
                    Grid.Column="0"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                            Property=Height,
                            Factor=0.33}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                            Property=Height,
                            Factor=0.33}" />
            </Grid>
        </ContentPage.Content>
    </ContentPage>
    

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Out of my depth. Hopefully someone else can jump in.
    Hey @NMackay - Any chance you've done enough Xamarin iOS to know this one?

  • ksumarineksumarine USMember ✭✭

    @LandLu this is excellent! I was able to use the margin trick. Such a simple and obvious "hack", I wish I had just thought of it!

    Side question...is there any way to detect if on iPhone X? This way I could set the margins to zero if on any iPhone other than the X.

    Thank you again!

  • LandLuLandLu Member, Xamarin Team Xamurai

    @ksumarine https://github.com/jamesmontemagno/Xamarin.Plugins/tree/master/DeviceInfo may be helpful for you. Also you can analyze the page's height to determine which device user uses.

  • @LandLu is putting the insets in the codebehind violating MVVM concepts? If so, is there some way to specifically apply the insets just to the Grid layout, but by using only Xaml?

Sign In or Register to comment.