Implementing Radial Menus in .NET MAUI
The Syncfusion .NET MAUI Radial Menu (SfRadialMenu) displays a hierarchical menu in a circular layout, optimized for touch-enabled devices. It's typically used as a context menu and can expose more menu items in the same space than traditional menus.
When to Use This Skill
Use this skill when the user needs to:
- Implement circular/radial menus in .NET MAUI applications
- Create touch-optimized context menus with hierarchical navigation
- Build floating menus that can be dragged across the screen
- Design nested menu systems with multiple levels of items
- Customize center buttons with text, icons, or custom views
- Segment menu layouts with custom positioning and indexing
- Add interactive menu items with images, icons, or custom content
- Handle menu events for navigation, opening/closing, and item tapping
- Implement modern UI effects like liquid glass/acrylic styling
Component Overview
Key Features:
- Hierarchical Navigation: Multiple levels of nested menu items
- Touch-Optimized: Circular layout designed for touch interaction
- Draggable: Float over content and drag anywhere on screen
- Rotation Support: Items can rotate around the center
- Custom Segmentation: Control item placement and spacing
- Font Icons: Built-in support for vector icons
- Custom Views: Use any MAUI view as menu item content
- Rich Customization: Colors, sizes, fonts, backgrounds, and more
- Event-Driven: Comprehensive event system for all interactions
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- NuGet package installation (Syncfusion.Maui.RadialMenu)
- Registering handlers in MauiProgram.cs
- Basic SfRadialMenu setup
- Creating your first radial menu with items
- XAML and C# implementation examples
Populating Items
📄 Read: references/populating-items.md
- Adding items through RadialMenuItem collection
- Text-only items, images with text, custom font icons
- Creating nested/hierarchical menu structures
- Using ItemsSource and ItemTemplate for data binding
- Animation duration, rim styling, separators
- DisplayMemberPath for property binding
Center Button Customization
📄 Read: references/center-button-customization.md
- Center button text and back button text
- Colors (text, background, stroke)
- Size and radius customization
- Font family, size, and attributes
- Custom views for center button
- Animation and auto-scaling
- Start angle configuration
Menu Item Customization
📄 Read: references/menu-item-customization.md
- SfRadialMenuItem properties
- Text, images, and font icons
- Font customization (family, size, attributes)
- Colors (background, text)
- Size (ItemHeight, ItemWidth)
- Custom views for menu items
- Command binding
- Enable/disable states
Layout and Segmentation
📄 Read: references/layout-segmentation.md
- Default layout (sequential arrangement)
- Custom layout (indexed positioning)
- VisibleSegmentsCount property
- SegmentIndex for precise placement
- Use cases for different layout types
Dragging and Rotation
📄 Read: references/dragging-rotation.md
- Enabling drag functionality (IsDragEnabled)
- Rotation control (EnableRotation)
- Drag events (DragBegin)
- Restricting drag behavior
- Positioning the menu on parent layout
Events
📄 Read: references/events.md
- Navigation events (Navigating, Navigated)
- Opening/Closing events
- Center button events (CenterButtonBackTapped)
- Item interaction events (ItemTapped, TouchDown, TouchUP)
- Event arguments and cancellation
1---2name: syncfusion-maui-radial-menu3description: Implements Syncfusion .NET MAUI Radial Menu (SfRadialMenu) - a hierarchical circular menu optimized for touch. Use when working with radial menus, circular menus, context menus, touch-optimized menus, or hierarchical circular navigation. Covers floating menus, drag-enabled menus, nested circular menus, and custom segmented layouts in .NET MAUI applications.4---5
6# Implementing Radial Menus in .NET MAUI
7
8The Syncfusion .NET MAUI Radial Menu (SfRadialMenu) displays a hierarchical menu in a circular layout, optimized for touch-enabled devices. It's typically used as a context menu and can expose more menu items in the same space than traditional menus.
9
10## When to Use This Skill
11
12Use this skill when the user needs to:
13
14- **Implement circular/radial menus** in .NET MAUI applications
15- **Create touch-optimized context menus** with hierarchical navigation
16- **Build floating menus** that can be dragged across the screen
17- **Design nested menu systems** with multiple levels of items
18- **Customize center buttons** with text, icons, or custom views
19- **Segment menu layouts** with custom positioning and indexing
20- **Add interactive menu items** with images, icons, or custom content
21- **Handle menu events** for navigation, opening/closing, and item tapping
22- **Implement modern UI effects** like liquid glass/acrylic styling
23
24## Component Overview
25
26**Key Features:**
27- **Hierarchical Navigation:** Multiple levels of nested menu items
28- **Touch-Optimized:** Circular layout designed for touch interaction
29- **Draggable:** Float over content and drag anywhere on screen
30- **Rotation Support:** Items can rotate around the center
31- **Custom Segmentation:** Control item placement and spacing
32- **Font Icons:** Built-in support for vector icons
33- **Custom Views:** Use any MAUI view as menu item content
34- **Rich Customization:** Colors, sizes, fonts, backgrounds, and more
35- **Event-Driven:** Comprehensive event system for all interactions
36
37## Documentation and Navigation Guide
38
39### Getting Started
40📄 **Read:** [references/getting-started.md](references/getting-started.md)
41- NuGet package installation (Syncfusion.Maui.RadialMenu)
42- Registering handlers in MauiProgram.cs
43- Basic SfRadialMenu setup
44- Creating your first radial menu with items
45- XAML and C# implementation examples
46
47### Populating Items
48📄 **Read:** [references/populating-items.md](references/populating-items.md)
49- Adding items through RadialMenuItem collection
50- Text-only items, images with text, custom font icons
51- Creating nested/hierarchical menu structures
52- Using ItemsSource and ItemTemplate for data binding
53- Animation duration, rim styling, separators
54- DisplayMemberPath for property binding
55
56### Center Button Customization
57📄 **Read:** [references/center-button-customization.md](references/center-button-customization.md)
58- Center button text and back button text
59- Colors (text, background, stroke)
60- Size and radius customization
61- Font family, size, and attributes
62- Custom views for center button
63- Animation and auto-scaling
64- Start angle configuration
65
66### Menu Item Customization
67📄 **Read:** [references/menu-item-customization.md](references/menu-item-customization.md)
68- SfRadialMenuItem properties
69- Text, images, and font icons
70- Font customization (family, size, attributes)
71- Colors (background, text)
72- Size (ItemHeight, ItemWidth)
73- Custom views for menu items
74- Command binding
75- Enable/disable states
76
77### Layout and Segmentation
78📄 **Read:** [references/layout-segmentation.md](references/layout-segmentation.md)
79- Default layout (sequential arrangement)
80- Custom layout (indexed positioning)
81- VisibleSegmentsCount property
82- SegmentIndex for precise placement
83- Use cases for different layout types
84
85### Dragging and Rotation
86📄 **Read:** [references/dragging-rotation.md](references/dragging-rotation.md)
87- Enabling drag functionality (IsDragEnabled)
88- Rotation control (EnableRotation)
89- Drag events (DragBegin)
90- Restricting drag behavior
91- Positioning the menu on parent layout
92
93### Events
94📄 **Read:** [references/events.md](references/events.md)
95- Navigation events (Navigating, Navigated)
96- Opening/Closing events
97- Center button events (CenterButtonBackTapped)
98- Item interaction events (ItemTapped, TouchDown, TouchUP)
99- Event arguments and cancellation
100
gabrielmoreira