How to remove the blue box in ios when select that page from navigation drawer?

Sreeee

I have implemented the Navigation Drawer on my xamarin forms project. I am following this blog for this feature.

It is working fine in the Android part, but when I test it in ios a blue box is showing on each page of drawer items. See the screenshot below:

In UWP the navigation drawer is not dismissing after selecting an item from it.

I searched a lot, Can you suggest any solution for these 2 issues?

ColeX

but when I test it in ios a blue box is showing on each page of drawer items.

I test with your code , everything works fine on iOS , there is no blue box ,could you share your sample ?

In UWP the navigation drawer is not dismissing after selecting an item from it.

Change MasterBehavior as Popover in the constructor of MasterDetailPage.

Sreeee

Hi @ColeX and @Harshita

I have added the below codes on all of my pages because of padding issues and blue header issues in ios. That causes the blue box in ios, I removed those codes and now ios part is working fine.

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

            <BoxView BackgroundColor="#0091da">
                <BoxView.Margin>
                    <OnPlatform x:TypeArguments="Thickness"
                          Android="0, -30, 0, -15"
                        WinPhone="0, -30, 0, -15"
                          iOS="0, -30, 0, -15"/>
                </BoxView.Margin>
        </BoxView>

For UWP I added below codes in MasterDetailPage constructor for solving the navigation drawer dismissing issues:

if (Device.RuntimePlatform == Device.UWP)
        {
            MasterBehavior = MasterBehavior.Popover;
        }

Thanks @ColeX and @Harshita

Harshita

@Sreeee
Set The Page BackgroundColor=White

ColeX

but when I test it in ios a blue box is showing on each page of drawer items.

I test with your code , everything works fine on iOS , there is no blue box ,could you share your sample ?

In UWP the navigation drawer is not dismissing after selecting an item from it.

Change MasterBehavior as Popover in the constructor of MasterDetailPage.

Sreeee

Hi @ColeX and @Harshita

I have added the below codes on all of my pages because of padding issues and blue header issues in ios. That causes the blue box in ios, I removed those codes and now ios part is working fine.

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

            <BoxView BackgroundColor="#0091da">
                <BoxView.Margin>
                    <OnPlatform x:TypeArguments="Thickness"
                          Android="0, -30, 0, -15"
                        WinPhone="0, -30, 0, -15"
                          iOS="0, -30, 0, -15"/>
                </BoxView.Margin>
        </BoxView>

For UWP I added below codes in MasterDetailPage constructor for solving the navigation drawer dismissing issues:

if (Device.RuntimePlatform == Device.UWP)
        {
            MasterBehavior = MasterBehavior.Popover;
        }

Thanks @ColeX and @Harshita