Uno Navigation Tabbar

Uno Navigation with TabBar — Agent Skill

Reference Templates

For complete, compilable shell XAML with parameterized placeholders, see:

references/shell-tabbar-template.md — Contains:

• Icon lookup table (Home, Search, Settings, Profile, etc.)
• SHELL_PAGE_NAME.xaml shell template with TabBar
• Page template (XAML + code-behind)
• Route registration template
• Substitution rules
• Localization template (Resources.resw)

Workflow

Docs lookup: call uno_platform_docs_search(...) first, then uno_platform_docs_fetch(sourcePath="…") using the sourcePath field from a result (a relative .md path; add the result's anchor for a section). Never pass a URL, a .html link, or a hand-built path.

Step 1: Fetch the TabBar Navigation Documentation

uno_platform_docs_search("Uno Navigation TabBar bottom tab region navigation")

Primary documentation pages:

• TabBar Navigation (Chefs): external/uno.chefs/doc/toolkit/NavigateTabBar.md
• Define Regions: external/uno.extensions/doc/Learn/Navigation/Walkthrough/DefineRegions.md

Fetch the Chefs TabBar page:

uno_platform_docs_fetch(sourcePath="external/uno.chefs/doc/toolkit/NavigateTabBar.md")

Step 2: For TabBar Control Reference

For TabBar control properties and styling:

uno_platform_docs_search("Uno Toolkit TabBar TabBarItem styles badges")

See also the uno-toolkit-tabbar skill for the control itself.

Step 3: For Responsive Navigation

If combining TabBar (mobile) with NavigationView (desktop):

See the uno-navigation-responsive-shell skill.

Key Principles (Stable)

• TabBar uses region-based navigation similarly to NavigationView
• Each TabBarItem gets uen:Region.Name="RouteName"
• Parent container and content area need Region.Attached="True"
• Apply BottomTabBarStyle to the TabBar; per-TabBarItem styling comes from the active design-theme (e.g., MaterialBottomTabBarItemStyle from [[uno-toolkit-material-theme]])
• Requires Toolkit in <UnoFeatures> along with Navigation
• XAML namespaces: xmlns:uen="using:Uno.Extensions.Navigation.UI" and xmlns:utu="using:Uno.Toolkit.UI"

Critical Rules

• The root Grid with uen:Region.Attached="True" MUST be a direct child of the Page content — it enables region navigation
• uen:Region.Navigator="Visibility" MUST be on the content area Grid — this tells the framework to toggle child visibility
• The content area Grid with Region.Navigator="Visibility" must be empty in XAML. Do not add Collapsed child elements for each route. The navigation framework resolves registered routes and injects the corresponding views at runtime.
• uen:Region.Attached="True" MUST also be on the TabBar itself
• Route names in RouteMap MUST match the uen:Region.Name values in SHELL_PAGE_NAME.xaml
• Tab page routes are nested under the "Main" route so only the content area updates, not the entire page
• Do NOT use Region.Attached="True" inside Shell.xaml — only in SHELL_PAGE_NAME.xaml

Related Skills

• [[uno-navigation-regions]] — Region concepts
• [[uno-navigation-responsive-shell]] — Adaptive navigation
• [[uno-navigation-panel-visibility]] — Visibility-based content switching details
• [[uno-toolkit-tabbar]] — TabBar control reference
• [[uno-navigation-navigationview]] — Sidebar navigation alternative
• [[uno-navigation-routes]] — Route registration details