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