[Shell] How to use custom renderers for flyout, navigation bar, tab bar, and top tabs?

[davidortinau]

Description

Please provide guidance on how to customize these Shell elements when more advanced customization is needed.

• [ ] Flyout custom renderer
• [ ] Navigation bar custom renderer
• [ ] Bottom tab bar custom renderer
• [ ] Top tabs custom renderer Parent: #2415

[stfnilsson]

Yes, please :-)

[stfnilsson]

Tried to create a custom ShellItem and a custom renderer which inherits from ShellItemRenderer but it's never called. I want to customize the tabbar, same ui on all platforms.

(A raised center tabbar item)

[ryanharding]

Tried to create a custom ShellItem and a custom renderer which inherits from ShellItemRenderer but it's never called. I want to customize the tabbar, same ui on all platforms.

(A raised center tabbar item)

@stfnilsson you have any luck with centering the tabbar item?

[SkyeHoefling]

@stfnilsson @ryanharding

I have put together a blog that may be helpful that documents how to create a raised large center tab in shell. Right now I only have a blog for Android, but the technique works for iOS as well. I'm hoping to finish up my iOS blog next week.

• https://www.andrewhoefling.com/Blog/Post/xamarin-forms-shell-customizing-the-tabbar-android

This past weekend I did a presentation at Xamarin Saturday in Toronto and it was all recorded. In this demo I went through implementations for both Android and iOS. Once they break down the videos to individual presentations I can link it here as well.

@davidortinau is there a place I could contribute to the docs with my recommendations for customizing the BottomTabBar?

[stfnilsson]

Thanks!

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

---

From: Andrew Hoefling [email protected] Sent: Thursday, August 29, 2019 4:09:14 AM To: xamarin/Xamarin.Forms [email protected] Cc: Stefan Nilsson [email protected]; Mention [email protected] Subject: Re: [xamarin/Xamarin.Forms] [Shell] How to use custom renderers for flyout, navigation bar, tab bar, and top tabs? (#4764)

@stfnilssonhttps://github.com/stfnilsson @ryanhardinghttps://github.com/ryanharding

I have put together a blog that may be helpful that documents how to create a raised large center tab in shell. Right now I only have a blog for Android, but the technique works for iOS as well. I'm hoping to finish up my iOS blog next week.

• https://www.andrewhoefling.com/Blog/Post/xamarin-forms-shell-customizing-the-tabbar-android

This past weekend I did a presentation at Xamarin Saturday in Toronto and it was all recorded. In this demo I went through implementations for both Android and iOS. Once they break down the videos to individual presentations I can link it here as well.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/xamarin/Xamarin.Forms/issues/4764?email_source=notifications&email_token=ACBGLPV5JI4NM5M2EWBU6VLQG4VUVA5CNFSM4GKWGF7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5M73EI#issuecomment-525991313, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ACBGLPW6GANQ7HVGI73XIG3QG4VUVANCNFSM4GKWGF7A.

[Elashi]

In iOS, I tried to customize few classes but I noticed that the interface implementation are not virtual ! this way won't be able to override these functions. Our other option is to copy the whole class and then add our custom rendering but this does not make sense.

Example, when I derive from ShellTabBarAppearanceTracker to add my customization, I cannot override IShellTabBarAppearanceTracker.SetAppearance. This is true for almost all Shell interfaces iOS implementations unlike Android's implementation.

I think this is wrong and I believe that all interface implementations should be marked virtual. Unless I am missing something.

[Mikilll94]

Any update on this?

[profrogers1990]

Hi, I'm new to xamarin, I've got my Flyout page working, Would someone be able to explain how I implement the custom renderer to fix this issue please