syncfusion-maui-toolkit-tabview
starsforks
How to install syncfusion-maui-toolkit-tabview?
syncfusion/maui-toolkit-ui-components-skills/syncfusion-maui-toolkit-tabview
$npx -y skills add syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-tabviewImplement tabbed navigation with Syncfusion MAUI TabView. Covers tab setup, customization, selection events, nested tabs, swiping gestures, and visual state management.
SKILL.md
| 1 | # Syncfusion MAUI TabView Implementation Guide |
| 2 | |
| 3 | ## Component Overview |
| 4 | |
| 5 | The **SfTabView** is Syncfusion's advanced tabbed navigation component for .NET MAUI applications. It provides a simple and intuitive interface for tab navigation in both mobile and desktop applications, allowing users to explore and switch between different tabs efficiently. |
| 6 | |
| 7 | ### Key Capabilities |
| 8 | |
| 9 | - **Nested Tabs:** Support for hierarchical tab structures with nested TabView instances |
| 10 | - **Header Flexibility:** Fixed and scrollable headers with image, text, and custom content support |
| 11 | - **Tab Customization:** Extensive appearance options including colors, fonts, spacing, and positioning |
| 12 | - **Gesture Support:** Built-in swiping gestures for seamless tab switching |
| 13 | - **Event System:** Comprehensive event handling for tab selection and interactions |
| 14 | - **State Management:** Visual state manager support for responsive UI patterns |
| 15 | - **Animation Control:** Smooth content transitions with customizable animation duration and easing |
| 16 | |
| 17 | --- |
| 18 | |
| 19 | ## When to Use This Skill |
| 20 | |
| 21 | Use this skill when: |
| 22 | |
| 23 | ✅ **User wants to create tabbed interfaces** - Implementing multi-section layouts where only one tab is visible at a time |
| 24 | ✅ **User needs tab customization** - Styling tabs with images, icons, text colors, fonts, and custom header content |
| 25 | ✅ **User implements selection and navigation** - Handling tab selection events, programmatic tab switching, and event-driven workflows |
| 26 | ✅ **User implements gestures** - Adding swipe gestures to switch between tabs on mobile devices |
| 27 | ✅ **User needs nested tabs** - Creating hierarchical tab structures (tabs containing tabs) |
| 28 | ✅ **User needs visual state management** - Binding tab properties to view models for responsive designs |
| 29 | ✅ **User implements settings/preferences UI** - Using tabs to organize configuration sections |
| 30 | ✅ **User builds multi-step forms or wizards** - Using tabs to organize workflow steps |
| 31 | ✅ **User needs data dashboard layouts** - Organizing multiple data views in tab panels |
| 32 | |
| 33 | --- |
| 34 | |
| 35 | ## Documentation and Navigation Guide |
| 36 | |
| 37 | ### Getting Started |
| 38 | 📄 **Read:** [references/getting-started.md](references/getting-started.md) |
| 39 | - Installation and package setup with NuGet |
| 40 | - Registering handlers in MauiProgram.cs |
| 41 | - Creating your first TabView (XAML and C# approaches) |
| 42 | - Adding tabs and populating content |
| 43 | - Data binding with ItemsSource, HeaderItemTemplate, and ContentItemTemplate |
| 44 | - Running the application |
| 45 | - Common setup issues and solutions |
| 46 | |
| 47 | ### Tab Customization & Styling |
| 48 | 📄 **Read:** [references/tab-customization.md](references/tab-customization.md) |
| 49 | - Tab item customization (text, icons, badges) |
| 50 | - Header display modes (text, icon, image modes) |
| 51 | - Tab bar appearance and sizing |
| 52 | - Image positioning options (top, bottom, left, right) |
| 53 | - Text color and font customization |
| 54 | - Font family, size, and attributes |
| 55 | - Tab header padding and scroll buttons |
| 56 | - Content transition animations |
| 57 | - Ripple effects and hover behavior |
| 58 | |
| 59 | ### Selection, Events & Swiping |
| 60 | 📄 **Read:** [references/selection-and-swiping.md](references/selection-and-swiping.md) |
| 61 | - Tab selection and the SelectedIndex property |
| 62 | - Selection change events (SelectionChanging, SelectionChanged) |
| 63 | - TabItemTapped event handling |
| 64 | - Programmatic tab switching |
| 65 | - Swipe gestures and EnableSwiping property |
| 66 | - Selection indicator customization |
| 67 | - Disabled tabs |
| 68 | - Event cancellation and event parameters |
| 69 | |
| 70 | ### Advanced Features |
| 71 | 📄 **Read:** [references/advanced-features.md](references/advanced-features.md) |
| 72 | - Nested TabView (creating hierarchical tab structures) |
| 73 | - Event handling in nested tabs |
| 74 | - Visual state managers for responsive designs |
| 75 | - Header placement options (top, bottom, left, right) |
| 76 | - Overflow behavior and scrollable headers |
| 77 | - Performance optimization techniques |
| 78 | - Font auto-scaling |
| 79 | |
| 80 | ### Center Button Configuration |
| 81 | 📄 **Read:** [references/center-button.md](references/center-button.md) |
| 82 | - Enabling the center button with IsCenterButtonEnabled |
| 83 | - CenterButtonSettings property configuration |
| 84 | - Customizing appearance (background, stroke, corner radius) |
| 85 | - Setting button size, text, and images |
| 86 | - Display modes (text, image, or both) |
| 87 | - CenterButtonTapped event handling |
| 88 | |
| 89 | ### Common Use Cases & Patterns |
| 90 | 📄 **Read:** [references/use-cases-and-patterns.md](references/use-cases-and-patterns.md) |
| 91 | - Settings/preferences interface |
| 92 | - Multi-step form wizard |
| 93 | - Data dashboard layout |
| 94 | - Document viewer with tabs |
| 95 | - Best practices and anti-patterns |
| 96 | - Accessibility guidelines (WCAG compliance) |
| 97 | - Keyboard navigation support |
| 98 | - Troubleshooting common issues |
| 99 | |
| 100 | --- |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
