How to change Shell height of Flyout Items at the bottom of the page

RedRaRedRa Member ✭✭✭

Hi guys,

Using Shell with Flyout Items in FlyoutDisplayOptions="AsMultipleItems" at the bottom of the each page apperns default tabs ...
My question is how to customize this tabs ? For example how simply to change height of the tabs at each page ?

Best Answer

Answers

  • RedRaRedRa Member ✭✭✭
    edited September 21

    @LandLu said:
    You need to use Custom Renderer for Shell to implement it on each platform.

    Override the CreateTabBarAppearanceTracker on iOS:

    [assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
    namespace ShellDemo.iOS
    {
        public class CustomShellRenderer : ShellRenderer
        {
            protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                base.OnElementPropertyChanged(sender, e);
            }
    
            protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
            {
                return new CustomTabbarAppearance();
            }
        }
    
        public class CustomTabbarAppearance : IShellTabBarAppearanceTracker
        {
            public void Dispose()
            {
                
            }
    
            public void ResetAppearance(UITabBarController controller)
            {
                
            }
    
            public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
            {
                
            }
    
            public void UpdateLayout(UITabBarController controller)
            {
                UITabBar tabBar = controller.TabBar;
                int tabBarHeight = 100;
    
                if (tabBar.Frame.Height != tabBarHeight)
                {
                    tabBar.Frame = new CGRect(tabBar.Frame.X, tabBar.Frame.Y + (tabBar.Frame.Height - tabBarHeight), tabBar.Frame.Width, tabBarHeight);
                }            
            }
        }
    }
    

    Override the CreateBottomNavViewAppearanceTracker on Android:

    [assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
    namespace ShellDemo.Droid
    {
        public class CustomShellRenderer : ShellRenderer
        {
            public CustomShellRenderer(Context context) : base(context)
            {
            }
    
            protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
            {
                return new CustomBottomNavAppearance();
            }
        }
    
        public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
        {
            public void Dispose()
            {
                
            }
    
            public void ResetAppearance(BottomNavigationView bottomView)
            {
                var parameters = bottomView.LayoutParameters;
                parameters.Height = 200;
    
                bottomView.LayoutParameters = parameters;
            }
    
            public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
            {
                
            }
        }
    }
    

    Thank you, it is helped !!
    Do you now how to center text inside of BottomNavigationView ?
    Right now the text at the bottom of the BottomNavigationView ...

Sign In or Register to comment.