skills.rest
unoplatform
unoplatformOFFICIAL
Explore all skills by this author →
Website𝕏@unoplatformGitHub

uno-toolkit-navigationbar

Implement Uno Platform navigation bars with back and action commands.

9|1|Updated Dec 10, 2024
Search Tags:#cross-platform#xaml#back-button#appbar#uno-toolkit#navigationbar
One-click install
npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-navigationbar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uno-toolkit-navigationbar
Source: https://github.com/unoplatform/studio/tree/main/plugins/uno-platform-studio/skills/uno-toolkit-navigationbar
Command: npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-navigationbar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Page-level navigation bar for Uno Platform apps with a back button and action items; renders natively on iOS and Android and as XAML on Windows.

Core Features & Use Cases

  • Back button integration: uses MainCommand as an AppBarButton for back navigation.
  • Primary and Secondary actions: supports PrimaryCommands and SecondaryCommands for right-side actions.
  • Cross-platform rendering: renders as XAML on Windows and as the native bar on iOS/Android.
  • Title binding: content property drives the bar title for dynamic scenarios.

Quick Start

Configure a page-level NavigationBar with a MainCommand back button and a couple of action items to implement a standard app header.

Frequently Asked Questions about uno-toolkit-navigationbar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a cross-platform navigation bar with a back button in Uno Platform?▼

A cross-platform navigation bar in Uno Platform uses the NavigationBar control with MainCommand bound to an AppBarButton for back navigation. It renders natively on iOS and Android while appearing as XAML on Windows.

How do I add menu actions to an app bar in Uno Platform?▼

To add menu actions to an app bar in Uno Platform, configure the NavigationBar with PrimaryCommands and SecondaryCommands collections. These properties place right-side action items in the header across Windows, iOS, and Android.

Does the Uno Platform NavigationBar render natively on iOS and Android?▼

Yes, the Uno Platform NavigationBar renders natively on iOS and Android. On Windows, it renders as standard XAML, ensuring a consistent header appearance and behavior across all supported platforms.

How do I bind a dynamic title to a navigation bar header in XAML?▼

To bind a dynamic title to a navigation bar header in XAML, set the content property of the Uno Platform NavigationBar control. This content property drives the bar title for dynamic scenarios across all platforms.

What is the correct way to implement back navigation in an Uno Platform app header?▼

The correct way to implement back navigation in an Uno Platform app header is to use the NavigationBar control and enforce the back button as the MainCommand. This ensures proper back navigation binding across native iOS, Android, and Windows XAML rendering.

Related Skills

Explore More Software Engineering Skills→
managedcodemanagedcode
466

dotnet-uno-platform

Develop cross-platform .NET applications with Uno Platform from unified C# and XAML codebases.

Official
Advanced
dtsongdtsong
1

Navigation Design

Design mobile navigation architecture with screen hierarchy, deep linking, and state preservation.

Community
Intermediate
unoplatformunoplatform
9

uno-toolkit-tabbaritem-extensions

Configure TabBarItem on-click navigation via XAML using TabBarItemExtensions.

Official
Basic
zaid-khan-codezaid-khan-code
3

react-native

Standardize React Native app structure with components, hooks, and platform-specific code.

Community
Intermediate