syncfusion-wpf-radial-menu

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Radial Menu

实现Syncfusion WPF径向菜单

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.

Syncfusion WPF径向菜单（SfRadialMenu） 以圆形布局展示层级菜单，相比传统菜单能在相同空间内呈现更多菜单项。它非常适合上下文菜单、工具面板以及触控交互界面。

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

当用户需要以下功能时，可使用该技能：

在WPF应用中实现径向菜单（圆形菜单布局）
创建具备层级圆形导航的上下文菜单
围绕中心点以圆形布局展示菜单项
实现径向模式的向下钻取导航
创建具备径向菜单结构的调色板
为自助终端或平板应用构建触控友好的圆形菜单
相比传统线性菜单，在相同空间内展示更多菜单选项

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

SfRadialMenu 是一款圆形菜单控件，菜单项围绕中心点呈放射状排列。它支持：

具备向下钻取功能的层级导航
与业务对象集合的数据绑定
自定义与默认布局模式
中心区域与菜单项的图标自定义
丰富的外观与样式配置选项
结合SfRadialColorItem实现调色板支持
工具提示配置
命令绑定与事件处理

命名空间：

Syncfusion.Windows.Controls.Navigation

程序集：

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

📄 阅读： references/getting-started.md

命名空间与程序集设置
基础XAML与代码后置实现
使用Show()和Close()方法打开/关闭菜单
事件处理：Opened、Closed、Navigating
控制初始状态的IsOpen属性
结合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)

📄 阅读： references/populating-items.md

将ItemsSource绑定到业务对象集合
使用DisplayMemberPath设置标题文本
使用CommandPath进行命令绑定
自定义项外观的ItemTemplate
跟踪导航的DrillDownItem
启用手动旋转的EnableFreeRotation
Command与CommandParameter属性
CloseOnExecute行为
CheckMode选项（None、CheckBox、Radio）
单选按钮组的GroupName
复选框/单选框状态的IsChecked
SfRadialMenuItem事件（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

📄 阅读： references/layout-types.md

默认布局类型（自动分段）
结合VisibleSegmentsCount的自定义布局类型
精确定位菜单项的SegmentIndex
控制分段分布
布局类型选择指南

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

📄 阅读： references/icons.md

自定义菜单中心区域的Center Icon属性
菜单项图标的SfRadialMenuItem Icon属性
使用Image元素与自定义UIElements
图标尺寸与拉伸选项

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

📄 阅读： references/appearance-and-styling.md

控制菜单尺寸的RadiusX与RadiusY
控制内圈大小的CenterRimRadiusFactor
边缘画笔：RimBackground、RimActiveBrush、RimInactiveBrush、RimHoverBrush
显示/隐藏展开箭头的IsExpanderVisible
控制外圈厚度的RimRadiusFactor
单项自定义：MenuBackgroundColor、MenuMouseOverBackgroundColor
ShowMouseOverStyle属性
导航按钮的CenterBackButtonForeground
分隔线样式：SeparatorBackground、SeparatorWidth
描边属性：StrokeThickness、MouseOverRimStrokeThickness
高级悬停自定义的MouseOverRimStyle

Tooltips

工具提示

📄 Read: references/tooltips.md

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

📄 阅读： references/tooltips.md

菜单项工具提示的ToolTip属性
ToolTipPlacement选项（None、Left、Top、Right、Bottom）
相对于菜单定位工具提示

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

📄 阅读： references/color-palette.md

用于颜色选择的SfRadialColorItem
创建层级调色板
用于颜色变体的嵌套颜色项
构建颜色选择器界面

Quick Start Example

快速入门示例

Basic Radial Menu in XAML

XAML中的基础径向菜单

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>

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

代码后置中的基础径向菜单

csharp

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" });

csharp

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

带子项的层级菜单

xaml

<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>

xaml

<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

点击按钮打开菜单

xaml

<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>

csharp

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

xaml

<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>

csharp

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

Data Binding with Business Objects

与业务对象的数据绑定

csharp

// 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" }
        };
    }
}

xaml

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

csharp

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

// 视图模型
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" }
        };
    }
}

xaml

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

Custom Layout with Specific Positioning

带精确定位的自定义布局

xaml

<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>

xaml

<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

自定义边缘颜色的样式

xaml

<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>

xaml

<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

带命令与参数的菜单项

xaml

<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>

xaml

<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

SfRadialMenu属性

Property	Type	Description
IsOpen	bool	Gets or sets whether the radial menu is open
ItemsSource	IEnumerable	Business object collection for data binding
DisplayMemberPath	string	Property path for item headers
CommandPath	string	Property path for item commands
LayoutType	LayoutType	Default or Custom layout mode
VisibleSegmentsCount	int	Number of segments in Custom layout
EnableFreeRotation	bool	Allows manual rotation of the menu
RadiusX	double	Horizontal radius of the menu
RadiusY	double	Vertical radius of the menu
RimBackground	Brush	Outer rim background color
RimActiveBrush	Brush	Active expander rim color
RimHoverBrush	Brush	Hover state rim color
CenterRimRadiusFactor	double	Inner circle size (0.0 to 1.0)

属性	类型	描述
IsOpen	bool	获取或设置径向菜单是否处于打开状态
ItemsSource	IEnumerable	用于数据绑定的业务对象集合
DisplayMemberPath	string	菜单项标题的属性路径
CommandPath	string	菜单项命令的属性路径
LayoutType	LayoutType	默认或自定义布局模式
VisibleSegmentsCount	int	自定义布局中的分段数量
EnableFreeRotation	bool	是否允许手动旋转菜单
RadiusX	double	菜单的水平半径
RadiusY	double	菜单的垂直半径
RimBackground	Brush	外圈背景色
RimActiveBrush	Brush	激活状态下的展开边缘颜色
RimHoverBrush	Brush	悬停状态下的边缘颜色
CenterRimRadiusFactor	double	内圈大小（取值范围0.0至1.0）

SfRadialMenuItem Properties

SfRadialMenuItem属性

Property	Type	Description
Header	object	Content displayed in the menu item
Icon	UIElement	Custom icon for the item
Command	ICommand	Command to execute on click
CommandParameter	object	Parameter passed to the command
SegmentIndex	int	Position in Custom layout mode
CloseOnExecute	bool	Close menu after item click
CheckMode	CheckMode	None, CheckBox, or Radio behavior
IsChecked	bool	Checked state for CheckBox/Radio
GroupName	string	Radio button group name
ToolTip	string	Tooltip text
ToolTipPlacement	Placement	Tooltip position
MenuBackgroundColor	Brush	Item background color

属性	类型	描述
Header	object	菜单项中显示的内容
Icon	UIElement	菜单项的自定义图标
Command	ICommand	点击时执行的命令
CommandParameter	object	传递给命令的参数
SegmentIndex	int	自定义布局模式下的位置
CloseOnExecute	bool	点击菜单项后是否关闭菜单
CheckMode	CheckMode	无、复选框或单选框行为
IsChecked	bool	复选框/单选框的选中状态
GroupName	string	单选按钮组名称
ToolTip	string	工具提示文本
ToolTipPlacement	Placement	工具提示位置
MenuBackgroundColor	Brush	菜单项背景色

Events

事件

Event	Description
Opened	Fired when the radial menu opens
Closed	Fired when the radial menu closes
Navigating	Fired when navigating into sub-items (cancellable)
Click (MenuItem)	Fired when a menu item is clicked
Checked (MenuItem)	Fired when a CheckBox/Radio item is checked
UnChecked (MenuItem)	Fired when a CheckBox item is unchecked

事件	描述
Opened	径向菜单打开时触发
Closed	径向菜单关闭时触发
Navigating	导航到子项时触发（可取消）
Click（菜单项）	点击菜单项时触发
Checked（菜单项）	复选框/单选框项被选中时触发
UnChecked（菜单项）	复选框项被取消选中时触发

Common Use Cases

常见使用场景

1. Context Menu for Text Editor

1. 文本编辑器上下文菜单

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

创建包含格式化选项（加粗、斜体、下划线、字号、颜色）的径向菜单，右键点击时触发。

2. Graphics Editor Tool Palette

2. 图形编辑器工具面板

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

实现包含绘图工具（钢笔、画笔、橡皮擦、形状）的圆形布局工具选择器。

3. Color Picker with Radial Layout

3. 径向布局的颜色选择器

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

使用SfRadialColorItem构建调色板，一级为基础颜色，二级为颜色变体。

4. Touch-Enabled Kiosk Navigation

4. 触控自助终端导航

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

为自助终端应用设计触控友好的导航菜单，圆形布局具备更好的可访问性。

5. Command Palette with Sub-Commands

5. 带子命令的命令面板

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

创建层级命令菜单，顶层项代表分类，子项为具体命令。

6. Quick Action Menu

6. 快速操作菜单

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:

Start with the basics → Guide them to getting-started.md for setup and basic implementation
For data binding → Direct them to populating-items.md for ItemsSource, templates, and commands
For precise layout control → Show them layout-types.md for Custom layout and SegmentIndex
For visual customization → Point to icons.md and appearance-and-styling.md
For color selection UI → Guide to color-palette.md for SfRadialColorItem usage
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

当用户想要实现径向菜单时：

从基础开始 → 引导他们查看getting-started.md进行设置与基础实现
数据绑定相关 → 指向populating-items.md了解ItemsSource、模板与命令
精确布局控制 → 展示layout-types.md了解自定义布局与SegmentIndex
视觉自定义 → 参考icons.md与appearance-and-styling.md
颜色选择界面 → 引导查看color-palette.md了解SfRadialColorItem的使用
工具提示相关 → 参考tooltips.md进行工具提示配置

始终需要考虑：

空间限制：径向菜单能在有限空间内展示更多项
触控与鼠标：触控界面需设置更大的半径
层级深度：菜单层级控制在2-3层以保证可用性
项数量：每层级最优数量为4-8个
视觉反馈：使用RimHoverBrush与MenuMouseOverBackgroundColor提供清晰的悬停状态