Hello,
I've created a basic sample app with Xamarin.Forms, where I tried to repoduce a UI like Twitter or Instagram with:
So, the the pages architecture of my app looks like this:
|-- MasterDetailpage
..|--TabbedPage
.....|-- NavigationPage
........|-- ContentPage
For achieving this, I've used:
This renderer looks like this:
public class CustomNavigationPageRenderer : MasterDetailPageRenderer { protected override void OnLayout(bool changed, int l, int t, int r, int b) { base.OnLayout(changed, l, t, r, b); var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar); for (var i = 0; i < toolbar.ChildCount; i++) { var imageButton = toolbar.GetChildAt(i) as ImageButton; var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable; if (drawerArrow == null) continue; bool displayBack = false; var app = Xamarin.Forms.Application.Current; //var navPage = ((app.MainPage.Navigation.ModalStack[0] as MasterDetailPage).Detail as NavigationPage); var detailPage = (app.MainPage as MasterDetailPage).Detail; if (detailPage.GetType() == typeof(BottomTp.Views.NaxamMainPage)) { var tabPage = detailPage as BottomTabbedPage; var curPage = tabPage.CurrentPage; var navPageLevel = curPage.Navigation.NavigationStack.Count; if (navPageLevel > 1) displayBack = true; } if (!displayBack) ChangeIcon(imageButton, Resource.Drawable.icon); } } private void ChangeIcon(ImageButton imageButton, int id) { if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Lollipop) imageButton.SetImageDrawable(Context.GetDrawable(id)); imageButton.SetImageResource(id); } }
This works well, but I get a last problem when I "return" to the main page:
Here is a short animation to describe this issue:
Is there a way to deactivate this animation? How could I fix this?
Someone helped me to fix this on Stackoverflow, so I give here the solution:
Create a custom control that inherits from NavigationPage
:
public class CustomNavigationPage : NavigationPage { public CustomNavigationPage() { } public CustomNavigationPage(Page root) : base(root) { } }
Replace the default NavigationPage
that are used in the TabbedPage
with CustomNavigationPage
Add this new renderer for the CustomNavigationPage
control:
[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))] namespace BottomTp.Droid.Renderers { class CustomNavigationPageRenderer : NavigationPageRenderer { public CustomNavigationPageRenderer(Context c) : base(c) { } protected override Task<bool> OnPopToRootAsync(Page page, bool animated) { return base.OnPopToRootAsync(page, false); } protected override Task<bool> OnPopViewAsync(Page page, bool animated) { return base.OnPopViewAsync(page, false); } protected override Task<bool> OnPushAsync(Page view, bool animated) { return base.OnPushAsync(view, false); } } }
The code of my sample on GitHub has been updated with the latest changes. There is also a basic sample, without TabbedPage or TabsControl.
Answers
Someone helped me to fix this on Stackoverflow, so I give here the solution:
Create a custom control that inherits from
NavigationPage
:Replace the default
NavigationPage
that are used in theTabbedPage
withCustomNavigationPage
Add this new renderer for the
CustomNavigationPage
control:The code of my sample on GitHub has been updated with the latest changes. There is also a basic sample, without TabbedPage or TabsControl.