Xamarin Forms 4.0 Using TabbedPage Tab But look black screen.

HamittirpanHamittirpan Member ✭✭✭

Hi everyone !
I'm trying to use a tab. But when I click x, my pages look black.


Tagged:

Best Answers

  • HamittirpanHamittirpan ✭✭✭
    edited December 2019 Accepted Answer

    @Jarvan

    I have swipable written a custom renderer for a swipable tabbed page. I combined the two renderers. We can now use a swipable tabbed page in Shell.

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(XTabbedRenderer))]
    namespace GulaylarMenuDesign.iOS.Renderers
    {
        class XTabbedRenderer : TabbedRenderer
        {
            public override void ViewWillAppear(bool animated)
            {
                base.ViewWillAppear(animated);
    
                NativeView.AddGestureRecognizer(new UISwipeGestureRecognizer(() => SelectNextTab(1)) { Direction = UISwipeGestureRecognizerDirection.Left, ShouldRecognizeSimultaneously = ShouldRecognizeSimultaneously });
                NativeView.AddGestureRecognizer(new UISwipeGestureRecognizer(() => SelectNextTab(-1)) { Direction = UISwipeGestureRecognizerDirection.Right, ShouldRecognizeSimultaneously = ShouldRecognizeSimultaneously });
            }
    
            void SelectNextTab(int direction)
            {
                int nextIndex = TabbedPage.GetIndex(Tabbed.CurrentPage) + direction;
                if (nextIndex < 0 || nextIndex >= Tabbed.Children.Count) return;
                var nextPage = Tabbed.Children[nextIndex];
                UIView.Transition(Platform.GetRenderer(Tabbed.CurrentPage).NativeView, Platform.GetRenderer(nextPage).NativeView, 0.15, UIViewAnimationOptions.TransitionCrossDissolve, null);
                Tabbed.CurrentPage = nextPage;
            }
    
            static bool ShouldRecognizeSimultaneously(UIGestureRecognizer gestureRecognizer, UIGestureRecognizer otherGestureRecognizer) => gestureRecognizer != otherGestureRecognizer;
    
            Page Page => Element as Page;
    
            public XTabbedRenderer()
            {
    
            }
    
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                if (Element == null)
                    return;
    
                if (Element.Parent is BaseShellItem)
                    Element.Layout(View.Bounds.ToRectangle());
    
                if (!Element.Bounds.IsEmpty)
                {
                    View.Frame = new System.Drawing.RectangleF((float)Element.X, (float)Element.Y, (float)Element.Width, (float)Element.Height);
                }
    
                var frame = View.Frame;
                var tabBarFrame = TabBar.Frame;
                Page.ContainerArea = new Rectangle(0, 0, frame.Width, frame.Height - tabBarFrame.Height);
            }
        }
    }
    

Answers

  • Rajesh_AngappanRajesh_Angappan INMember ✭✭
    edited September 2019

    For Custom tab view/page or nested tabview or page, use xam.Tabview (Xamarin.Forms) Component and it's working perfectly.

    It has the support for custom header and content view. We can place the tabview to any parent.

    Install Nuget: TabView Nuget

    Sample: Tabview Sample

  • HamittirpanHamittirpan Member ✭✭✭

    Hi @Rajesh_Angappan I using your Tabview Nuget. İts look like great. But, i have a question. How can i add swipable property in your tabview ?

  • HamittirpanHamittirpan Member ✭✭✭

    Hi @Jarvan

    As a result of my research, I reached such a code. I have tried this custom renderer code for Xamarin Forms 4.4.0 and it works fine. And I use Shell. But it has one disadvantage. There is no tab or possibility to swipe between tabs.

    For iOS Renderer

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(XTabbedRenderer))]
    namespace GulaylarMenuDesign.iOS.Renderers
    {
        public class XTabbedRenderer:TabbedRenderer
        {
            Page Page => Element as Page;
    
            public XTabbedRenderer()
            {
    
            }
    
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                if (Element == null)
                    return;
    
                if (Element.Parent is BaseShellItem)
                    Element.Layout(View.Bounds.ToRectangle());
    
                if (!Element.Bounds.IsEmpty)
                {
                    View.Frame = new System.Drawing.RectangleF((float)Element.X, (float)Element.Y, (float)Element.Width, (float)Element.Height);
                }
    
                var frame = View.Frame;
                var tabBarFrame = TabBar.Frame;
                Page.ContainerArea = new Rectangle(0, 0, frame.Width, frame.Height - tabBarFrame.Height);
            }
        }
    }
    

    Here is the link I found the solution ;

    https://github.com/xamarin/Xamarin.Forms/issues/6384#issuecomment-557539552

  • HamittirpanHamittirpan Member ✭✭✭
    edited December 2019 Accepted Answer

    @Jarvan

    I have swipable written a custom renderer for a swipable tabbed page. I combined the two renderers. We can now use a swipable tabbed page in Shell.

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(XTabbedRenderer))]
    namespace GulaylarMenuDesign.iOS.Renderers
    {
        class XTabbedRenderer : TabbedRenderer
        {
            public override void ViewWillAppear(bool animated)
            {
                base.ViewWillAppear(animated);
    
                NativeView.AddGestureRecognizer(new UISwipeGestureRecognizer(() => SelectNextTab(1)) { Direction = UISwipeGestureRecognizerDirection.Left, ShouldRecognizeSimultaneously = ShouldRecognizeSimultaneously });
                NativeView.AddGestureRecognizer(new UISwipeGestureRecognizer(() => SelectNextTab(-1)) { Direction = UISwipeGestureRecognizerDirection.Right, ShouldRecognizeSimultaneously = ShouldRecognizeSimultaneously });
            }
    
            void SelectNextTab(int direction)
            {
                int nextIndex = TabbedPage.GetIndex(Tabbed.CurrentPage) + direction;
                if (nextIndex < 0 || nextIndex >= Tabbed.Children.Count) return;
                var nextPage = Tabbed.Children[nextIndex];
                UIView.Transition(Platform.GetRenderer(Tabbed.CurrentPage).NativeView, Platform.GetRenderer(nextPage).NativeView, 0.15, UIViewAnimationOptions.TransitionCrossDissolve, null);
                Tabbed.CurrentPage = nextPage;
            }
    
            static bool ShouldRecognizeSimultaneously(UIGestureRecognizer gestureRecognizer, UIGestureRecognizer otherGestureRecognizer) => gestureRecognizer != otherGestureRecognizer;
    
            Page Page => Element as Page;
    
            public XTabbedRenderer()
            {
    
            }
    
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                if (Element == null)
                    return;
    
                if (Element.Parent is BaseShellItem)
                    Element.Layout(View.Bounds.ToRectangle());
    
                if (!Element.Bounds.IsEmpty)
                {
                    View.Frame = new System.Drawing.RectangleF((float)Element.X, (float)Element.Y, (float)Element.Width, (float)Element.Height);
                }
    
                var frame = View.Frame;
                var tabBarFrame = TabBar.Frame;
                Page.ContainerArea = new Rectangle(0, 0, frame.Width, frame.Height - tabBarFrame.Height);
            }
        }
    }
    
  • Rajesh_AngappanRajesh_Angappan INMember ✭✭
    edited January 23
    Xamarin tab view swipe support is added in xam.tabview nuget package.
Sign In or Register to comment.