How to put colour in Safe Area on iOS

NipunKalraNipunKalra USMember ✭✭
edited July 2018 in Xamarin.Forms


How to put a background colour in the safe area similar to the red colour using Xamarin Forms?

Thanks

Posts

  • NipunKalraNipunKalra USMember ✭✭
    edited July 2018

    Updated question with attachment

  • LandLuLandLu Member, Xamarin Team Xamurai

    You can try to create a stack layout as your page's root content, set its Padding to the SafeAreaInsets. Then its children will layout from the top layout guide.
    Xaml:

    <ContentPage.Content>
        <StackLayout BackgroundColor="Red" x:Name="BgStack">
            <StackLayout BackgroundColor="Green" VerticalOptions="FillAndExpand">
                <Label Text="hello world!"/>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
    

    Code behind:

    protected override void OnAppearing()
    {
        base.OnAppearing();
    
        var safeAreaInset = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
        BgStack.Padding = safeAreaInset;
    }
    
  • NipunKalraNipunKalra USMember ✭✭

    @LandLu Thank you for your response. I know its possible to achieve this behaviour on Navigation pages but don't know how

  • LandLuLandLu Member, Xamarin Team Xamurai

    @NipunKalra In your case, there's no need to set the safe area. Set the Navigation page's bar color:

    public App ()
    {
        InitializeComponent();
    
        var navigationPage = new NavigationPage(new MainPage { Title = "How Deep Is It?" });
        MainPage = navigationPage;
    
        navigationPage.BarBackgroundColor = Color.LightGreen;
        navigationPage.BarTextColor = Color.White;
    }
    

    Then use grid as your content page's content, it will render under the bar:

    <Grid>
        <Label Text="render from the top under the naviagtion bar"/>
        <Button Text="Reset" HorizontalOptions="Center" VerticalOptions="End" Margin="0, 0, 0, 20" WidthRequest="150" BackgroundColor="LightGreen" TextColor="White"/>
    </Grid>
    
  • Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

    I've a similar question. I actually use a background image through a RelativeLayout, and I display a form containing bottom buttons on this background image. But on the iPhone X, the render is not "nice", as the form is too much stretched. I've tried to use UseSafeArea, but in this case there are margins before/after my background image...

  • kris87kris87 Member ✭✭

    Set the UseSafeArea to true, and simply add a background colour to your page (the status bar will change its colour automatically).
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BackgroundColor="Black">

  • batmacibatmaci DEMember ✭✭✭✭✭

    @LandLu said:
    You can try to create a stack layout as your page's root content, set its Padding to the SafeAreaInsets. Then its children will layout from the top layout guide.
    Xaml:

    <ContentPage.Content>
        <StackLayout BackgroundColor="Red" x:Name="BgStack">
            <StackLayout BackgroundColor="Green" VerticalOptions="FillAndExpand">
                <Label Text="hello world!"/>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
    

    Code behind:

    protected override void OnAppearing()
    {
        base.OnAppearing();
    
        var safeAreaInset = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
        BgStack.Padding = safeAreaInset;
    }
    

    what is the difference between using safeare and safeareinstets with padding? is it not just enough to use safeare=true in order to get desired padding?

Sign In or Register to comment.