How to change the top color of IOS app(Color at the phone battery icon)

SreeeeSreeee INMember ✭✭✭✭
edited January 5 in Xamarin.Forms

One screenshot of my xamarin forms ios app is adding below. I want the change the color on the top part, I mean on the color at the battery icon. Currently, it is white, I need it as yellow.

For getting the top padding I added the following code on my XAML:

 <StackLayout>
    <StackLayout.Padding>
       <OnPlatform x:TypeArguments="Thickness" 
          Android="0, -10, 0, 0" 
          WinPhone="0, -10, 0, 0" 
          iOS="0, 15, 0, 0"/>
     </StackLayout.Padding>
 </StackLayout>

If I remove above code, my app icons and battery icon in the phone get overlap. So How can I change the white color on top?

Best Answer

  • LandLuLandLu Xamurai
    Accepted Answer

    You can make this StackLayout which has padding property as a parent layout of your content. Then change the parent layout's background to achieve your effect:

    <StackLayout BackgroundColor="Yellow">
        <StackLayout.Padding>
            <OnPlatform x:TypeArguments="Thickness" 
                Android="0, -10, 0, 0" 
                iOS="0, 15, 0, 0"/>
        </StackLayout.Padding>
    
        <!--Content-->
        <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="White">
            <!--...
            Other controls-->
        </StackLayout>
    
    </StackLayout>
    

    Or create a BoxView to fill the top space:

    <StackLayout>
        <StackLayout.Padding>
            <OnPlatform x:TypeArguments="Thickness" 
                Android="0, -10, 0, 0" 
                iOS="0, 15, 0, 0"/>
        </StackLayout.Padding>
    
        <BoxView BackgroundColor="Yellow">
            <BoxView.Margin>
                <OnPlatform x:TypeArguments="Thickness" iOS="0, -30, 0, -15"/>
            </BoxView.Margin>
        </BoxView>
    
        <!--...
        Other controls-->
    
    </StackLayout>
    

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    You can make this StackLayout which has padding property as a parent layout of your content. Then change the parent layout's background to achieve your effect:

    <StackLayout BackgroundColor="Yellow">
        <StackLayout.Padding>
            <OnPlatform x:TypeArguments="Thickness" 
                Android="0, -10, 0, 0" 
                iOS="0, 15, 0, 0"/>
        </StackLayout.Padding>
    
        <!--Content-->
        <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="White">
            <!--...
            Other controls-->
        </StackLayout>
    
    </StackLayout>
    

    Or create a BoxView to fill the top space:

    <StackLayout>
        <StackLayout.Padding>
            <OnPlatform x:TypeArguments="Thickness" 
                Android="0, -10, 0, 0" 
                iOS="0, 15, 0, 0"/>
        </StackLayout.Padding>
    
        <BoxView BackgroundColor="Yellow">
            <BoxView.Margin>
                <OnPlatform x:TypeArguments="Thickness" iOS="0, -30, 0, -15"/>
            </BoxView.Margin>
        </BoxView>
    
        <!--...
        Other controls-->
    
    </StackLayout>
    
Sign In or Register to comment.