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

Question

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:

My ContentPage code:

<ContentPage.Content>
        <Grid>
            <StackLayout
                HorizontalOptions="Fill"
                VerticalOptions="FillAndExpand"
                x:Name="CenteredStackLayout"
                Orientation="Vertical"
                BackgroundColor="White">

             //Added the below codes for solving padding issue in ios part
                <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>

                <StackLayout
                    \\My layout fields
                </StackLayout>
            </Grid>
     </ContentPage.Content>

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?

Can you check this out https://stackoverflow.com/a/54917818/7462031 — FreakyAli, Jun 07 '19 at 10:21
For your second point (UWP) as I'm working in MAsterDetailedPage too, I just had a look into the Sample of the Xamarin docs. https://github.com/xamarin/xamarin-forms-samples/blob/master/Navigation/MasterDetailPage/MasterDetailPageNavigation/CS/MainPageCS.cs here they explicitly set the MasterBehavior = MasterBehavior.Popover; for UWP. Perhaps that's required and default is always show under UWP — Hardcore_Graverobber, Jun 07 '19 at 11:32
@Hardcore_Graverobber I added `MasterBehavior = MasterBehavior.Popover;` inside of the navigation drawer onclicked function. The navigation drawer is dismissing after selecting an item from the list, but after that, there is no option to view the navigation drawer again. In android there is an icon on left top and in ios there is a menu text for opening navigation drawer always. — Sreejith Sree, Jun 07 '19 at 11:53
@SreejithSree Can you provide your Master Detail code in order to see what you're exactly doing? — Hardcore_Graverobber, Jun 07 '19 at 12:36

score 1 · Accepted Answer · answered Jun 10 '19 at 06:11

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;
    }

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

1 Answers1