Syncfusion Wpf Radial Menu

Implementing Syncfusion WPF Radial Menu

The Syncfusion WPF Radial Menu (SfRadialMenu) displays a hierarchical menu in a circular layout, exposing more menu items in the same space than traditional menus. It's ideal for context menus, tool palettes, and touch-enabled interfaces.

When to Use This Skill

Use this skill when the user needs to:

• Implement a radial menu (circular menu layout) in WPF applications
• Create context menus with hierarchical circular navigation
• Display menu items in a circular layout around a center point
• Implement drill-down navigation in a radial pattern
• Create color palettes with radial menu structure
• Build touch-friendly circular menus for kiosk or tablet applications
• Show more menu options in the same space compared to traditional linear menus

Component Overview

SfRadialMenu is a circular menu control that arranges menu items radially around a center point. It supports:

• Hierarchical navigation with drill-down capability
• Data binding with business object collections
• Custom and default layout modes
• Icon customization for center and menu items
• Extensive appearance and styling options
• Color palette support with SfRadialColorItem
• Tooltip configuration
• Command binding and event handling

Namespace: Syncfusion.Windows.Controls.Navigation
Assembly: Syncfusion.SfRadialMenu.WPF

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Namespace and assembly setup
• Basic XAML and code-behind implementation
• Opening and closing the menu with Show() and Close() methods
• Event handling: Opened, Closed, Navigating
• IsOpen property for initial state
• Theme support with SfSkinManager

Populating Items and Data Binding

📄 Read: references/populating-items.md

• Binding ItemsSource to business object collections
• DisplayMemberPath for header text
• CommandPath for command binding
• ItemTemplate for custom item appearance
• DrillDownItem for tracking navigation
• EnableFreeRotation for manual rotation
• Command and CommandParameter properties
• CloseOnExecute behavior
• CheckMode options (None, CheckBox, Radio)
• GroupName for radio button groups
• IsChecked for checkbox/radio states
• SfRadialMenuItem events (Click, Checked, UnChecked)

Layout Configuration

📄 Read: references/layout-types.md

• Default layout type (automatic segmentation)
• Custom layout type with VisibleSegmentsCount
• SegmentIndex for precise item positioning
• Controlling segment distribution
• Layout type selection guide

Icons and Visual Elements

📄 Read: references/icons.md

• Center Icon property for menu center customization
• SfRadialMenuItem Icon property for item icons
• Using Image elements and custom UIElements
• Icon sizing and stretching options

Appearance and Styling

📄 Read: references/appearance-and-styling.md

• RadiusX and RadiusY for menu size
• CenterRimRadiusFactor for inner circle size
• Rim brushes: RimBackground, RimActiveBrush, RimInactiveBrush, RimHoverBrush
• IsExpanderVisible for showing/hiding expander arrows
• RimRadiusFactor for outer rim thickness
• Per-item customization: MenuBackgroundColor, MenuMouseOverBackgroundColor
• ShowMouseOverStyle property
• CenterBackButtonForeground for navigation button
• Separator styling: SeparatorBackground, SeparatorWidth
• Stroke properties: StrokeThickness, MouseOverRimStrokeThickness
• MouseOverRimStyle for advanced hover customization

Tooltips

📄 Read: references/tooltips.md

• ToolTip property for item tooltips
• ToolTipPlacement options (None, Left, Top, Right, Bottom)
• Positioning tooltips relative to the menu

Color Palette

📄 Read: references/color-palette.md

• SfRadialColorItem for color selection
• Creating hierarchical color palettes
• Nested color items for color variants
• Building color picker interfaces

Quick Start Example

Basic Radial Menu in XAML

<Window xmlns:navigation="clr-namespace:Syncfusion.Windows.Controls.Navigation;assembly=Syncfusion.SfRadialMenu.Wpf">
    <Grid>
        <navigation:SfRadialMenu IsOpen="True">
            <navigation:SfRadialMenuItem Header="Bold"/>
            <navigation:SfRadialMenuItem Header="Cut"/>
            <navigation:SfRadialMenuItem Header="Copy"/>
            <navigation:SfRadialMenuItem Header="Paste"/>
        </navigation:SfRadialMenu>
    </Grid>
</Window>

Basic Radial Menu in Code-Behind

using Syncfusion.Windows.Controls.Navigation;

SfRadialMenu radialMenu = new SfRadialMenu();
radialMenu.IsOpen = true;

radialMenu.Items.Add(new SfRadialMenuItem() { Header = "Bold" });
radialMenu.Items.Add(new SfRadialMenuItem() { Header = "Cut" });
radialMenu.Items.Add(new SfRadialMenuItem() { Header = "Copy" });
radialMenu.Items.Add(new SfRadialMenuItem() { Header = "Paste" });

Hierarchical Menu with Sub-Items

<navigation:SfRadialMenu IsOpen="True">
    <navigation:SfRadialMenuItem Header="Format">
        <navigation:SfRadialMenuItem Header="Bold"/>
        <navigation:SfRadialMenuItem Header="Italic"/>
        <navigation:SfRadialMenuItem Header="Underline"/>
    </navigation:SfRadialMenuItem>
    <navigation:SfRadialMenuItem Header="Edit">
        <navigation:SfRadialMenuItem Header="Cut"/>
        <navigation:SfRadialMenuItem Header="Copy"/>
        <navigation:SfRadialMenuItem Header="Paste"/>
    </navigation:SfRadialMenuItem>
    <navigation:SfRadialMenuItem Header="Undo"/>
    <navigation:SfRadialMenuItem Header="Redo"/>
</navigation:SfRadialMenu>

Common Patterns

Opening Menu on Button Click

<Grid>
    <navigation:SfRadialMenu x:Name="radialMenu">
        <navigation:SfRadialMenuItem Header="Bold"/>
        <navigation:SfRadialMenuItem Header="Copy"/>
        <navigation:SfRadialMenuItem Header="Paste"/>
    </navigation:SfRadialMenu>
    
    <Button Content="Open Menu" Click="OpenMenu_Click"/>
</Grid>

private void OpenMenu_Click(object sender, RoutedEventArgs e)
{
    radialMenu.Show();
}

Data Binding with Business Objects

// Model
public class EditorCommand
{
    public string Name { get; set; }
    public string IconPath { get; set; }
    public ICommand Command { get; set; }
}

// ViewModel
public class EditorViewModel
{
    public List<EditorCommand> Commands { get; set; }
    
    public EditorViewModel()
    {
        Commands = new List<EditorCommand>
        {
            new EditorCommand { Name = "Bold", IconPath = "bold.png" },
            new EditorCommand { Name = "Copy", IconPath = "copy.png" },
            new EditorCommand { Name = "Paste", IconPath = "paste.png" }
        };
    }
}

<navigation:SfRadialMenu IsOpen="True" 
                         ItemsSource="{Binding Commands}"
                         DisplayMemberPath="Name"
                         CommandPath="Command"/>

Custom Layout with Specific Positioning

<navigation:SfRadialMenu IsOpen="True" 
                         LayoutType="Custom" 
                         VisibleSegmentsCount="8">
    <navigation:SfRadialMenuItem Header="Item 1" SegmentIndex="0"/>
    <navigation:SfRadialMenuItem Header="Item 2" SegmentIndex="2"/>
    <navigation:SfRadialMenuItem Header="Item 3" SegmentIndex="4"/>
    <navigation:SfRadialMenuItem Header="Item 4" SegmentIndex="6"/>
</navigation:SfRadialMenu>

Styling with Rim Colors

<navigation:SfRadialMenu IsOpen="True"
                         RimBackground="LightBlue"
                         RimActiveBrush="Orange"
                         RimHoverBrush="DarkOrange"
                         CenterRimRadiusFactor="0.3">
    <navigation:SfRadialMenuItem Header="Bold"/>
    <navigation:SfRadialMenuItem Header="Copy"/>
    <navigation:SfRadialMenuItem Header="Paste"/>
</navigation:SfRadialMenu>

Menu Items with Commands and Parameters

<navigation:SfRadialMenu IsOpen="True">
    <navigation:SfRadialMenuItem Header="Bold"
                                 Command="{Binding BoldCommand}"
                                 CommandParameter="Bold"
                                 CloseOnExecute="True"/>
    <navigation:SfRadialMenuItem Header="Copy"
                                 Command="{Binding CopyCommand}"
                                 CommandParameter="Copy"
                                 CloseOnExecute="True"/>
</navigation:SfRadialMenu>

Key Properties and Events

SfRadialMenu Properties

SfRadialMenuItem Properties

Events

Common Use Cases

1. Context Menu for Text Editor

Create a radial menu with formatting options (Bold, Italic, Underline, Font Size, Color) that appears on right-click.

2. Graphics Editor Tool Palette

Implement a tool selector with drawing tools (Pen, Brush, Eraser, Shapes) in a circular layout.

3. Color Picker with Radial Layout

Build a color palette using SfRadialColorItem with primary colors at the first level and shades at the second level.

4. Touch-Enabled Kiosk Navigation

Design a touch-friendly navigation menu for kiosk applications where circular layout provides better accessibility.

5. Command Palette with Sub-Commands

Create a hierarchical command menu where top-level items represent categories and sub-items are specific commands.

6. Quick Action Menu

Implement a floating action button that opens a radial menu with common actions (Edit, Delete, Share, More).

Implementation Guidance

When the user wants to implement a radial menu:

1. Start with the basics → Guide them to getting-started.md for setup and basic implementation
2. For data binding → Direct them to populating-items.md for ItemsSource, templates, and commands
3. For precise layout control → Show them layout-types.md for Custom layout and SegmentIndex
4. For visual customization → Point to icons.md and appearance-and-styling.md
5. For color selection UI → Guide to color-palette.md for SfRadialColorItem usage
6. For tooltips → Refer to tooltips.md for tooltip configuration

Always consider:

• Space constraints: Radial menus expose more items in limited space
• Touch vs mouse: Larger radius for touch interfaces
• Hierarchy depth: Keep menu levels to 2-3 for usability
• Item count: Optimal range is 4-8 items per level
• Visual feedback: Use RimHoverBrush and MenuMouseOverBackgroundColor for clear hover states