uno-navigation-navigationview

# Uno Navigation with NavigationView — Agent Skill ## Reference Templates For complete, compilable shell XAML with parameterized placeholders, see: **`references/shell-navigationview-template.md`** — Contains: - Icon lookup table (Home, Search, Settings, Profile, etc.) - SHELL_PAGE_NAME.xaml — Without Settings variant - SHELL_PAGE_NAME.xaml — With Settings variant - SHELL_PAGE_NAME.xaml.cs — Settings code-behind (`Region.SetName` for built-in Settings item) - 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 NavigationView Navigation Documentation ``` uno_platform_docs_search("Uno Navigation NavigationView sidebar hamburger region") ``` Primary documentation pages: - **Define Regions (NavigationView section)**: `external/uno.extensions/doc/Learn/Navigation/Walkthrough/DefineRegions.md` - **Responsive Shell**: `external/uno.extensions/doc/Learn/Navigation/Walkthrough/ResponsiveShell.md` Fetch the define regions page: ``` uno_platform_docs_fetch(sourcePath="external/uno.extensions/doc/Learn/Navigation/Walkthrough/DefineRegions.md") ``` Focus on the "Using Regions with NavigationView" section. ### Step 2: For Responsive Navigation If the user needs adaptive navigation (NavigationView on desktop, TabBar on mobile): See the `uno-navigation-responsive-shell` skill. ## Key Principles (Stable) - NavigationView uses region-based navigation to link menu items to content - Parent container needs `uen:Region.Attached="True"` - NavigationView needs `uen:Region.Attached="True"` - Each `NavigationViewItem` uses `uen:Region.Name="RouteName"` to map to content - Content area uses a Grid with `uen:Region.Attached="True"` and `uen:Region.Navigator="Visibility"` - XAML namespace: `xmlns:uen="using:Uno.Extensions.Navigation.UI"` ## Critical Rules - The root `Grid` with `uen:Region.Attached="True"` enables region navigation for the entire shell - `uen:Region.Attached="True"` MUST also be on the `NavigationView` itself - The content area `Grid` inside `NavigationView` needs BOTH `uen:Region.Attached="True"` AND `uen:Region.Navigator="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. - The Settings item is NOT a `NavigationViewItem` in `MenuItems` — use `Loaded` event + `Region.SetName` in code-behind - Route names in `RouteMap` MUST match the `uen:Region.Name` values in `SHELL_PAGE_NAME.xaml` - 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 NavigationView + TabBar - [[uno-navigation-panel-visibility]] — Visibility-based content switching details - [[uno-navigation-tabbar]] — TabBar alternative - [[uno-navigation-routes]] — Route registration details