Forum Xamarin.Forms

Tabbed Page in UWP : TabBar in the bottom

leeyoleeyo USMember ✭✭

Hello,

I'm currently working on a tabbed page app, and I'd like to uniformize the design for iOS/UWP. So the point is to move the UWP's tab bar to the bottom of the screen. I've been trying to achieve this by overriding TabbedPageRenderer under UWP project, but I couldn't find anything about tab bar position... Is there a way ?

Thanks for help ! ;)

Best Answer

  • leeyoleeyo USMember ✭✭
    edited March 2017 Accepted Answer

    Hey @michaelwarnes, I finally went for some other way :

    I've got a ContentPage that contains ContentViews and my menu bar in the bottom. This ContentPage's ViewModel keeps the actual opened tab index in memory. Each ContentView is bound on IsVisible property to an individual bool (contained in parent's ViewModel). Each button is bound to a method that closes current opened tab (changing its visibility to false) and that opens the asked tab (changing its visibility to true). (edit) Finally, to be sure my ContentViews will pop on same position, their parent (the ContentPage) contains an AbsoluteLayout that sets the ContentViews position.

    I went to that system for a few reasons like : I can do anything I want to personnalize my menu bar (position, style, ...), AND I can show/hide any menu button after page rendering (while IsVisible change on a TabbedPage will NOT hide the button). It's been less than two months that I'm working with Xamarin, and I've already met a lot of bugs or "things that should work but won't", so I don't even try to use the "official way" anymore and I make my own tools when I need it.

Answers

  • leeyoleeyo USMember ✭✭

    Is even there a solution or should I make my own Tabbed Pages ?

  • michaelwarnesmichaelwarnes USMember ✭✭

    I haven't seen one, and like you i'd like to have uniformity ...I can't understand why it's not optional, will keep you posted if I find anything

  • leeyoleeyo USMember ✭✭
    edited March 2017 Accepted Answer

    Hey @michaelwarnes, I finally went for some other way :

    I've got a ContentPage that contains ContentViews and my menu bar in the bottom. This ContentPage's ViewModel keeps the actual opened tab index in memory. Each ContentView is bound on IsVisible property to an individual bool (contained in parent's ViewModel). Each button is bound to a method that closes current opened tab (changing its visibility to false) and that opens the asked tab (changing its visibility to true). (edit) Finally, to be sure my ContentViews will pop on same position, their parent (the ContentPage) contains an AbsoluteLayout that sets the ContentViews position.

    I went to that system for a few reasons like : I can do anything I want to personnalize my menu bar (position, style, ...), AND I can show/hide any menu button after page rendering (while IsVisible change on a TabbedPage will NOT hide the button). It's been less than two months that I'm working with Xamarin, and I've already met a lot of bugs or "things that should work but won't", so I don't even try to use the "official way" anymore and I make my own tools when I need it.

  • michaelwarnesmichaelwarnes USMember ✭✭

    HI @LionelMennig thats very interesting, thanks for the info. I've been using Xamarin 'in anger' (but on the whole absolutely loving it) for about 1 month now, and it seems to be almost there! but as you say there are inconsistencies. I've previously used other mobile platforms, and like you have ended up implementing functionality myself, however it seemed like an opportunity to try and make a more vanilla app to maximise cross platform code use.

    Straight away I hit the top vs bottom tab problem, so I used this plugin BottomNavigationBarXF, however it only caters for Android, and not UWP. It's a really good plugin, but there are gotchas with it, such as crashing if you do not create childpages in the constructor.

    It would be good to not use plugins too heavily as there is a risk of discontinued support/interest, however I am using the sqlite-net-pcl plugin which is excellent for local storage, and I've decided to use this https://github.com/edsnider/LocalNotificationsPlugin for local notifications.

    However I really like your approach using contentviews, and I'm very tempted to use that approach, have you hit any snags around navigation using this approach? Are you using a TabbedPage at all, or just a vanilla ContentPage to simulate a TabbedPage? The great thing about this is it is all in your PCL and doesn't require any platform specific code.

    It seems that the complexities of establishing the .net standard platform in favour of PCL has definately made cross-platform developemnt in .net more tricky, but I fell it is moving in the right direction and will only improve..

  • leeyoleeyo USMember ✭✭

    @michaelwarnes I edited previous reply to mention the AbsoluteLayout. By now it worked 100% as I wanted it to work. I didn't use TabbedPage again, but it's nice that you asked me :

    To be more precise about my project, I needed a tabbed page, and its last tab had to be another tabbed page. With Xamarin TabbedPages and the menu bar position issue, I wouldn't be able to achieve what I wanted, so I used "my" system again on child's ViewModel and it worked as I wanted (I'm now free to position the menu in my XAML).

  • michaelwarnesmichaelwarnes USMember ✭✭

    sounds like a great cross platfrm solution, has absolutelayout caused any inconsistencies in different devices?

  • leeyoleeyo USMember ✭✭

    @michaelwarnes I tested it on UWP (desktop) and iOS (iPad 3 & 4), it's working fine. Can't say about Android but it should be fine. By the way with this system you can also use something like this :

    override protected void OnPropertyChanged(string propertyName) { base.OnPropertyChanged(propertyName); if(propertyName == "IsVisible" && this.IsVisible) { // TODO } }

  • LucaZieglerLucaZiegler USMember ✭✭

    I found a perfect solution using UWP styles.

    Create a TabbedPage custom renderer in your UWP project to apply the following style:

    [...]
    public class TabbedPageRenderer : Xamarin.Forms.Platform.UWP.TabbedPageRenderer
       {
          protected override void OnElementChanged(VisualElementChangedEventArgs e)
          {
             base.OnElementChanged(e);
             if (Control != null)
                Control.Style = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["PivotHeaderBottomStyle"];
          }
      }
    

    Add this style to your UWP App.xaml:
    https://pastebin.com/gyx0a5Bq

    In addition I found no way to fix the overlap problem of the tab bar, so I added a padding (0,0,0,49) in the TabbedPage.

  • BillyMartinBillyMartin USMember ✭✭✭

    Great TabbedPage renderer. How do I change the Tabbar color on the fly?

  • BillyMartinBillyMartin USMember ✭✭✭

    Got it to work and change background and text color on the fly, but still can't add icons:

    https://docs.microsoft.com/en-us/answers/questions/344447/how-do-i-make-a-xamarin-uwp-bottom-tabbar-and-chan.html#answer-346624

Sign In or Register to comment.