Right to left flow direction on MasterDetailPage when the screen is wide

I'm using Xamarin.Forms 3.1. and the app i'm working on has a MaterDetailPage as desktop and it could be use in right to left mode. In normal screen size everything is OK but when the screen of device is wide (like Tablets) the default behavior of Xamarin is to set MasterBehavior to Split and the outcome is like Screenshot1.png

Another option is to set MasterBehavior to Popover manually but it makes the problem even worst. The master page comes out form the right side of the screen and goes to somewhere near the left side of screen and detail page will be unreachable, like Screenshot2.png

Is there a way to solve this problem or must wait until Xamarin.Forms team solve this bug?

Best Answers

  • YorkGoYorkGo CN Xamurai
    edited August 2018 Accepted Answer

    You could try to give a specific width size in Tablets device, a simple demo about this:

    https://github.com/aixiaozi/CustomMasterDetailPageWidth/blob/master/CustomMasterDetailPageWidth/CustomMasterDetailPageWidth/App.xaml.cs

  • ShahramShobeiriShahramShobeiri US ✭✭
    edited August 2018 Accepted Answer

    Thanks @YorkGo, I created a custom renderer, here is my code:

    using Android.Content;
    using Android.Support.V4.Widget;
    using Android.Views;
    using Sayba.Xam.Droid.Render;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android.AppCompat;
    
    [assembly: ExportRenderer(typeof(MasterDetailPage), typeof(CustomMasterDetailPageRenderer))]
    namespace Sayba.Xam.Droid.Render
    {
        public class CustomMasterDetailPageRenderer : MasterDetailPageRenderer
        {
            public CustomMasterDetailPageRenderer(Context context) : base(context)
            {
            }
    
            protected override void OnElementChanged(VisualElement oldElement, VisualElement newElement)
            {
                base.OnElementChanged(oldElement, newElement);
    
                var width = Resources.DisplayMetrics.WidthPixels;
                var height = Resources.DisplayMetrics.HeightPixels;
    
                var ration = (float)width / (float)height;
    
                if (ration >= 0.7)
                {
                    var fieldInfo = GetType().BaseType.GetField("_masterLayout", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
                    var _masterLayout = (ViewGroup)fieldInfo.GetValue(this);
                    var lp = new DrawerLayout.LayoutParams(_masterLayout.LayoutParameters);
    
                    lp.Width = (int)(0.4 * width);
    
                    lp.Gravity = Sayba.Xam.Common.Global.IsCultureRightToLeft ? (int)GravityFlags.Right : (int)GravityFlags.Left;
    
                    _masterLayout.LayoutParameters = lp;
                }
            }
        }
    }
    

Answers

  • YorkGoYorkGo CNMember, Xamarin Team Xamurai
    edited August 2018 Accepted Answer

    You could try to give a specific width size in Tablets device, a simple demo about this:

    https://github.com/aixiaozi/CustomMasterDetailPageWidth/blob/master/CustomMasterDetailPageWidth/CustomMasterDetailPageWidth/App.xaml.cs

  • ShahramShobeiriShahramShobeiri USMember ✭✭
    edited August 2018 Accepted Answer

    Thanks @YorkGo, I created a custom renderer, here is my code:

    using Android.Content;
    using Android.Support.V4.Widget;
    using Android.Views;
    using Sayba.Xam.Droid.Render;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android.AppCompat;
    
    [assembly: ExportRenderer(typeof(MasterDetailPage), typeof(CustomMasterDetailPageRenderer))]
    namespace Sayba.Xam.Droid.Render
    {
        public class CustomMasterDetailPageRenderer : MasterDetailPageRenderer
        {
            public CustomMasterDetailPageRenderer(Context context) : base(context)
            {
            }
    
            protected override void OnElementChanged(VisualElement oldElement, VisualElement newElement)
            {
                base.OnElementChanged(oldElement, newElement);
    
                var width = Resources.DisplayMetrics.WidthPixels;
                var height = Resources.DisplayMetrics.HeightPixels;
    
                var ration = (float)width / (float)height;
    
                if (ration >= 0.7)
                {
                    var fieldInfo = GetType().BaseType.GetField("_masterLayout", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
                    var _masterLayout = (ViewGroup)fieldInfo.GetValue(this);
                    var lp = new DrawerLayout.LayoutParams(_masterLayout.LayoutParameters);
    
                    lp.Width = (int)(0.4 * width);
    
                    lp.Gravity = Sayba.Xam.Common.Global.IsCultureRightToLeft ? (int)GravityFlags.Right : (int)GravityFlags.Left;
    
                    _masterLayout.LayoutParameters = lp;
                }
            }
        }
    }
    
Sign In or Register to comment.