How to create a bottom TabBar using C# Markup

[cbdefontenay]

Hi!
I'm currently exploring the Uno Platform and diving into using the C# markup extension to build a simple app. However, I've hit a roadblock while attempting to implement a basic bottom TabBar. Ideally, clicking on a TabBarItem should seamlessly navigate to the designated page. Despite my efforts, which included experimenting with models (MVUX) and tweaking the Shell.cs file, I haven't been able to achieve the desired functionality. Additionally, I've encountered issues with the TabBar not being displayed on all pages as intended. Maybe the answer is very simple, but I really got stucked...
I would really appreciate if someone had any clue of how to create a TabBar + Navigation (using TabItems) using C# Markup.

I even tried the doc (but did not work): https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Tutorials/Navigation/Advanced/HowTo-UseTabBar.html

I've provided a link to my GitHub project for reference: https://github.com/cbdefontenay/LearnVocab/tree/master

[pedrojesus-work]

@cbdefontenay looking closer into docs and your project... you need to define some RegionNames for your home content, you can do it using the .Region() extension method. In order to navigate to a page, using tabs, you don't need to use a Command, the way you're doing now will Push a page into your navigation stack. The correct would be to define your TabBarItem with the route name of the desired Page.

[cbdefontenay]

Thank you for your help. In the doc the other pages I want to navigate to are Page, not Content, which I tried to change, but using Jetbrains Rider at least, Content does not work, there is only a ContentControl, so I kept Page. But I tried to change the .Command() to .Region(), as you said, but somehow it is also not working, even if the pages are already registered in App.cs. I updated the code with the .Region() extension method.

[kazo0]

@cbdefontenay I have submitted a PR to your repo that makes a bunch of changes that should achieve what you want.

Even though you have Pages that you want to navigate to, you can still use the Regions as part of your TabBar. You can see this done here in this section of the Navigation docs Basically, you can just define an empty Grid with .Region(attached: true, navigator: "Visiblity") and the Navigation Extensions will take care of adding the proper Page content to the Grid based on the defined Routes.

I re-structured the app a bit to achieve what I think you want. Now we would have a MainPage which simply serves as the "navigation shell", for lack of a better term, that hosts the main TabBar and the Grid where your Pages will be displayed. This way, the TabBar will always be displayed on the screen and the Pages can change as you tap on the TabBarItems.

I also fixed a small bug where you were defining the Region names as Region().Name("Home") when it should be used like an attached property: Region(name: "Home")

LearnApp.webm

[cbdefontenay]

@kazo0 Thank you very much for your help and the time you dedicated to resolving my issue. Your approach is significantly better and has greatly helped my understanding of Navigation and TabBar functionality within the Uno Platform. I have accepted the pull request, and the code you provided also worked on my laptop. Once again, thank you for both the fix and the detailed explanation.