Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

How to combine UseSafeArea and a background image?

$
0
0

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?


Viewing all articles
Browse latest Browse all 77050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>