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