Changing the Master Detail Page's Master Behaviour at Runitme

I'm currently working on a project that requires me to change the Master Detail Page's Master Behaviour from Split to Popover and Popover to Split at different points in the app.

When I try to do this the UI does not update unless I rotate the device and the UI updates. Does anyone have a solution to doing this?

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post more details or a basic demo?

  • JamesMallonJamesMallon USMember ✭✭

    @jezh Yes of course.

    Platforms:
    This implementation needs to be present on all 3 platforms: UWP, iOS and Android.

    IDE + SDK
    Visual Studio 2017
    Xamarin Forms 3.20

    Description
    On the device the user will be initially presented with the following screen:

    This is a Master-Detail Page and the Current Master's Behaviour is: SPLIT.
    Outlined in red there is a button with a back arrow. On pressing this button on the device I require the Master's behaviour to change to POPOVER and Disappear like this image:

    The user should then be able to slide out the panel like to make the screen look like the following image, and on pressing the backarrow again the user should be able to fix the screen back into MasterBehaviour type SPLIT.

    The issue I have is that when the application is running, I can change the Masterbehaviour variable, however the actual screen itself will not change, sometimes causes a crash stating that I cannot change the IsPresented variable when the master behaviour is changing.

    One thing that may help is that if I press the back arrow button and then rotate the device, the screen will change to the correct Masterbehaviour. I assume this is due to the UI refresh that comes with it, is there anyway to do this refresh programatically without needing to rotate it.

    Desperately in need of this functionality and any help would be appreciated!

    Kind regards,
    James

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post a basic demo so that we can test with it ?

  • RBanseRBanse DEMember ✭✭

    I'm glad to see being not the only person facing this problem. I created a simple project showing the behavior. Due to the fact that I can't post links please look for /RonnyBansemer/XamarinForms.MasterDetailPageBehaviorIssue on github.

    Development device:
    Device: Huawei MediaPad T3
    OS: Android 7.0
    Orientation: Landscape

    Hopefully you will be able to reproduce this error.

    Sincerely,
    Ronny

  • NMackayNMackay GBInsider, University mod

    @RBanse said:
    I'm glad to see being not the only person facing this problem. I created a simple project showing the behavior. Due to the fact that I can't post links please look for /RonnyBansemer/XamarinForms.MasterDetailPageBehaviorIssue on github.

    Development device:
    Device: Huawei MediaPad T3
    OS: Android 7.0
    Orientation: Landscape

    Hopefully you will be able to reproduce this error.

    Sincerely,
    Ronny

    DM me the link and I'll post it here if it's not one of these

    https://github.com/xamarin/Xamarin.Forms/issues?utf8=✓&q=is:issue+is:open+masterdetail

  • NMackayNMackay GBInsider, University mod

    @JamesMallon

    Have you opened an issue on github with a repo? when they can repo the issue it tends to get addressed, if it's not logged as an issue on github it won't get addressed.

  • JamesMallonJamesMallon USMember ✭✭
    edited December 2018

    @NMackay @RBanse

    Hey there,

    I actually did manage to get all of this working using my own Custom Renderers on all 3 platforms, just getting rid of the bugs now but took me a few days, I will post my findings here over the next couple of days, some of it was a bit hacky but works now :smile:.

    I do however believe this issue should be addressed by Xamarin so I will also open a Repo with the basic example and raise an issue.

    Android: Works flawlessly for the above functionality on phone and tablet
    UWP: Works, but just adding in the transitions natively to give it a nicer feel to it.
    iOS: Works on tablet but has no scrim, and just getting my head around making it work on the phone as there are 2 separate renderers for both tablet and phone idioms.

  • NMackayNMackay GBInsider, University mod

    @JamesMallon

    Nice one, appreciate that. It makes a difference to the framework when these issues are reported..

  • RBanseRBanse DEMember ✭✭

    @JamesMallon @NMackay

    Thanks, receiving your custom renderer for android would be nice and save my a lot of work :-)
    Here is the link to my repo using prism: https://github.com/RonnyBansemer/XamarinForms.MasterDetailPageBehaviorIssue

  • JamesMallonJamesMallon USMember ✭✭
  • RBanseRBanse DEMember ✭✭
    edited December 2018

    @JamesMallon @NMackay
    Thanks! Could you may post here your custom renderer for android so that I can work until it is fixed by the core team?

  • JamesMallonJamesMallon USMember ✭✭

    Hi @RBanse ,

    To help with the Xamarin forms issue I commented my custom renderer for android in the issue itself! have a look in the link above :smile: .

    James

  • RBanseRBanse DEMember ✭✭
    edited December 2018

    @JamesMallon
    Looks good, I posted my android renderer even below. Did you manage to make IsPresented working?
    I implemented the originally expected behavior now on https://github.com/RonnyBansemer/XamarinForms.MasterDetailPageBehaviorIssue

  • JamesMallonJamesMallon USMember ✭✭

    @RBanse
    No, I worked around it, look at the code I wrote to override it, if you can call showmaster or unpin and hide master that is your alternatives.

  • jhonfoliveirajhonfoliveira BRMember

    @JamesMallon Could you may post here your custom renderer all platforms?

  • ZydorZydor USMember

    All,

    I searched for a while and was disappointed to not find some simple code to programmatically open and close the master when in split mode, and and found this thread. I wanted to be able to press a toolbar button when in landscape and close the drawer and then open, without being in popover mode Sounds like @JamesMallon has a solution, but it is not posted here. I only needed to do this in iOS for now.

    Somehow, by looking at the Xamarin.Forms repo TabletMasterDetailRenderer, I found an incredibly simple solution.

    I created a renderer with two methods. One to close and one to open

    I subscribe to two message keys in the constructor of the renderer, and simply send a message from my toolbar button on the detail page to open or close. I actually can't believe it was that simple.I haven't done extensive testing, but it seems to work. I am using FormsToolkit which wraps the messaging service, so you might notice the subscribe statement is not the standard Xamarin Forms syntax.

    I hope this helps someone.

    using System;
    using FormsToolkit;
    using UIKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    
    
    [assembly: ExportRenderer(typeof(MasterDetailPage), typeof(CustomMasterDetailRenderer), UIUserInterfaceIdiom.Pad)]
    namespace MobileApp.iOS
    {
        public class CustomMasterDetailRenderer : TabletMasterDetailRenderer
        {
            public CustomMasterDetailRenderer()
            {
    
                MessagingService.Current.Subscribe(MessageKeys.CloseDrawer, (s) => CloseDrawer());
                MessagingService.Current.Subscribe(MessageKeys.OpenDrawer, (s) => OpenDrawer());
            }
    
    
            private void CloseDrawer()
            {                   
                MasterDetailPage.MasterBehavior = MasterBehavior.Popover;
                PreferredDisplayMode = UISplitViewControllerDisplayMode.PrimaryHidden;
            }
    
            private void OpenDrawer()
            {           
                MasterDetailPage.MasterBehavior = MasterBehavior.Split;
                PreferredDisplayMode = UISplitViewControllerDisplayMode.AllVisible;
            }
    
    
            protected override void Dispose(bool disposing)
            {
                MessagingService.Current.Unsubscribe(MessageKeys.CloseDrawer);
                MessagingService.Current.Unsubscribe(MessageKeys.OpenDrawer);
    
                base.Dispose(disposing);
            }
    
    
        }
    }
    
    
    
    
    
    
    
Sign In or Register to comment.