Sidebar menu ios- How to dim detail page when master page is open?

caseyleigh54caseyleigh54 Member
edited April 8 in Xamarin.Forms
How do you dim the detail page when the master page (menu) is open?
I can only seem to get it to change the opacity which makes the page lighter which doesn't really help. I also tried changing the background color of the detail page but because all the elements cover the whole page it doesn't work. Image is what I want it to do.
It works for android but not ios

Answers

  • AsurAsur USMember ✭✭✭

    not sure if it would work but try adding an absolute layout with different opacity kind of what we do when using activity indicator for the whole page .(something like the image below)

    Though not sure how you can capture menu open on a detail page. Will try something once I get some time and let you know .

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    If you're using master/detail just to get the side/burger menu, I'd advise moving away from this design, and to use a non master/detail architecture and then use a package like rg.plugins.popup for the menu.

    Master/detail pages have limits and side effects which can get in the way.

  • ColeXColeX Member, Xamarin Team Xamurai

    A nice sample of dimming the Detail page on iOS when the Master page is open :https://github.com/jgold6/XamarinSupportSamples/tree/master/XForms-TestShadingiOSDetailPage

    Main code

    MasterDetailPage mdPage;
        Color origContentBgColor;
        Color origPageBgColor;
    
        public App()
        {
            mdPage = new MasterDetailPage();
            mdPage.IsPresentedChanged += async (object sender, EventArgs e) => {
                if (Device.OS == TargetPlatform.iOS) {
                    if (mdPage.IsPresented) {
                        var currentPage = (DetailPage)((NavigationPage)mdPage.Detail).CurrentPage;
                        origPageBgColor = currentPage.BackgroundColor;
                        origContentBgColor = currentPage.Content.BackgroundColor;
    
                        currentPage.BackgroundColor = Color.Black;
                        currentPage.Content.FadeTo(0.5);
                        if (currentPage.Content.BackgroundColor == Color.Default) {
                            currentPage.Content.BackgroundColor = Color.White;
    
                        }
                    }
                    else {
                        var currentPage = (DetailPage)((NavigationPage)mdPage.Detail).CurrentPage;
                        currentPage.BackgroundColor = origPageBgColor;
                        currentPage.Content.BackgroundColor = origContentBgColor;
                        currentPage.Content.FadeTo(1.0);
                    }
    
    
                }
            };
            mdPage.Master = new MasterPage(){Title = "Master Page"};
            mdPage.Detail = new NavigationPage( new DetailPage());
    
            // The root page of your application
            MainPage = mdPage;
        }
    

    Test

Sign In or Register to comment.