Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How can I remove the dividers in the AppShell flyout menu?

Currently, between my flyout items and normal menu items a divider is being displayed. I'd like to know how to remove this divider or at the very least change it's color. Anyone got any suggestions on how to do this? From what I've seen there are no properties that allow this kind of customisation.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    It depends on different platforms.
    If we run it on Android there's no such separator:

    It will only appear at the bottom of the last menu item on iOS. Not everything in Shell could be customized.
    If you want to completely customize the master page I suggest using Master-Detail Page.

  • SathishKondiSathishKondi INMember ✭✭

    You can remove the group separators with below code, you should write this code in ShellRenderer for iOS

    void OnElementSelected(Element element)
    {
    ((IShellController)this.Shell).OnFlyoutItemSelected(element);
    }

    IShellFlyoutContentRenderer shellFlyoutContentRenderer;
    protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
    {
    shellFlyoutContentRenderer = base.CreateShellFlyoutContentRenderer();

                if (shellFlyoutContentRenderer != null && shellFlyoutContentRenderer.ViewController != null)
                {
                    var childs = shellFlyoutContentRenderer.ViewController.ChildViewControllers;
                    if (childs != null && childs.Length > 0)
                    {
                        var child = childs[0] as UITableViewController;
                        if (child != null && child.TableView!=null)
                        {
                            child.TableView.ScrollEnabled = false;
                            child.TableView.RowHeight = 70;
                            child.TableView.Source = new MyCustomShellTableViewSource(this, OnElementSelected);
    

    }
    }
    }

            return shellFlyoutContentRenderer;
    
        }
    

    public class MyCustomShellTableViewSource : ShellTableViewSource
    {
    public MyCustomShellTableViewSource(IShellContext context, Action onElementSelected): base(context,onElementSelected)
    {
    }

        public override UIView GetViewForFooter(UITableView tableView, nint section)
        {
            return new SeparatorView();
        }
    }
    
    class SeparatorView : UIView
    {
        UIView _line;
    
        public SeparatorView()
        {
            _line = new UIView
            {
                BackgroundColor = Xamarin.Forms.Color.Transparent.ToUIColor(),
                TranslatesAutoresizingMaskIntoConstraints = true,
                Alpha = 0.2f
            };
    
            Add(_line);
        }
    
        public override void LayoutSubviews()
        {
            _line.Frame = new CoreGraphics.CGRect(15, 0, Frame.Width - 30, 1);
            base.LayoutSubviews();
        }
    }
    
  • SathishKondiSathishKondi INMember ✭✭

    You can achieve this by adding the below code in ShellRenderer for iOS

    void OnElementSelected(Element element)
    {
    ((IShellController)this.Shell).OnFlyoutItemSelected(element);
    }

        IShellFlyoutContentRenderer shellFlyoutContentRenderer;
        protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
        {
            shellFlyoutContentRenderer =   base.CreateShellFlyoutContentRenderer();
    
                if (shellFlyoutContentRenderer != null && shellFlyoutContentRenderer.ViewController != null)
                {
                    var childs = shellFlyoutContentRenderer.ViewController.ChildViewControllers;
                    if (childs != null && childs.Length > 0)
                    {
                        var child = childs[0] as UITableViewController;
                        if (child != null && child.TableView!=null)
                        {
                            child.TableView.ScrollEnabled = false;
                            child.TableView.RowHeight = 70;
                            child.TableView.Source = new MyCustomShellTableViewSource(this, OnElementSelected);
    
                        }
                    }
                }
    
            return shellFlyoutContentRenderer;
    
        }
    

    public class MyCustomShellTableViewSource : ShellTableViewSource
    {
    public MyCustomShellTableViewSource(IShellContext context, Action onElementSelected): base(context,onElementSelected)
    {
    }

        public override UIView GetViewForFooter(UITableView tableView, nint section)
        {
            return new SeparatorView();
        }
    }
    
    class SeparatorView : UIView
    {
        UIView _line;
    
        public SeparatorView()
        {
            _line = new UIView
            {
                BackgroundColor = Xamarin.Forms.Color.Transparent.ToUIColor(),
                TranslatesAutoresizingMaskIntoConstraints = true,
                Alpha = 0.2f
            };
    
            Add(_line);
        }
    
        public override void LayoutSubviews()
        {
            _line.Frame = new CoreGraphics.CGRect(15, 0, Frame.Width - 30, 1);
            base.LayoutSubviews();
        }
    }
    
Sign In or Register to comment.