How to combine UseSafeArea and a background image?

Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

I've a question about the use of safe area for iOS.

I use a background image through a RelativeLayout, and I display a form on this background image. I use a margin for iOS on the form's container: this works fine, but the render on a iPhone X is not very nice.

<RelativeLayout>

    <Image Source="background.jpg" Opacity="0.75"
           Aspect="AspectFill"
           RelativeLayout.WidthConstraint =
               "{ConstraintExpression Type=RelativeToParent, Property=Width}"
           RelativeLayout.HeightConstraint =
               "{ConstraintExpression Type=RelativeToParent, Property=Height}" />

    <ScrollView RelativeLayout.WidthConstraint =
                    "{ConstraintExpression Type=RelativeToParent, Property=Width}"
                 RelativeLayout.HeightConstraint =
                    "{ConstraintExpression Type=RelativeToParent, Property=Height}">    
    <ScrollView.Margin>                
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0, 20, 0, 0" />
        </OnPlatform>
    </ScrollView.Margin>

    <StackLayout>
        <!-- Header -->
        <StackLayout VerticalOptions="Start">
            <fnc:HunterHeader />
        </StackLayout>

        <!-- Form -->
        <StackLayout VerticalOptions="CenterAndExpand"
                     Spacing="6" Margin="20">
            <!-- ... -->
        </StackLayout>
    </StackLayout>
</RelativeLayout>

So I've tried to set the UseSafeArea to true, but I got top and bottom margins.

Is it possible to fix this, and to combine UseSafeArea and a background image?
Or is there a way to add specific margin for the iPhone X only?

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    If you only want the top margin in the iPhone X, we can emulate the space as the safe area:

    protected override void OnAppearing()
    {
        base.OnAppearing();
        // Get the safe area here, then we just use the Top as the Scroll View's margin
        var inset = On<iOS>().SafeAreaInsets();
        MyScrollView.Margin = new Thickness(0, inset.Top, 0, 0);
    }
    

    Here I named your Scroll View as MyScrollView, and replace your Margin in the Xaml.

Sign In or Register to comment.