syncfusion-winforms-radial-menu

Syncfusion WinForms での RadialMenu の実装

このスキルでは、Syncfusion WinForms RadialMenu コントロールの実装方法を説明します。色パレット、フォントセレクター、数値スライダーなどの専用要素を備えた、円形の階層型コンテキストメニューです。

このスキルを使用する場面

次のようなニーズがある場合に、このスキルを使用してください。

• 階層構造を持つ円形コンテキストメニューを実装する
• タブレットやタッチ対応アプリケーション向けに、タッチしやすい円形ナビゲーションを作成する
• 円形レイアウトで色を選択するために、RadialColorPalette を追加する
• フォントファミリーを選択するために、RadialFontListBox を実装する
• 数値を入力するために、RadialMenuSlider（最小値と最大値の範囲）を追加する
• Office 2016 テーマ（Colorful、White、DarkGray、Black）を適用する
• チェックボックスやラジオボタンを備えたカスタムコンテキストメニューを作成する
• SuperAccelerator（Alt+キー）を使用したキーボードショートカットを有効にする
• 円形レイアウトでサブメニュー階層を実装する
• 外観（色、リム、弧、表示スタイル）をカスタマイズする
• 標準のコンテキストメニューを最新の円形メニューに置き換える

RadialMenu は、タッチ対応アプリケーション、グラフィックエディター、円形レイアウトでコンテキストに応じたコマンドにすばやくアクセスする必要があるアプリケーションに最適です。

コンポーネントの概要

RadialMenu は、コマンドを円形レイアウトで表示する、円形の階層型メニューコントロールです。専用の入力要素を備えた最新のコンテキストメニューとして機能します。主な機能は次のとおりです。

• 階層構造：サブメニューに対応したメニュー項目（階層をたどるナビゲーション）
• RadialMenuItem：チェックボックス／ラジオボタンモードに対応した標準メニュー項目
• RadialColorPalette：円形メニューに統合されたカラーピッカー
• RadialFontListBox：円形レイアウトのフォントファミリーセレクター
• RadialMenuSlider：値の範囲を指定する数値スライダー
• Office 2016 テーマ：プロフェッショナルな組み込みスタイルを 5 種類用意
• カスタマイズ可能なスタイル：色、リムの太さ、弧の間隔、表示モード
• キーボードサポート：Alt+キーのショートカットに対応する SuperAccelerator
• タッチ操作に最適化：円形レイアウトに大きなタッチ領域を配置
• ツールチップ：メニュー項目にカーソルを合わせるとツールチップを表示

標準の ContextMenu との主な違い： RadialMenu は、タッチ操作に最適化された円形レイアウトを提供します。また、専用要素（カラーパレット、フォントリスト、スライダー）と最新の Office 2016 テーマを備えています。

ドキュメントとナビゲーションガイド

はじめにと基本設定

📄 参照先： references/getting-started.md

次のニーズがある場合は、このリファレンスを参照してください。

• アセンブリの依存関係と NuGet パッケージのインストール
• 名前空間：Syncfusion.Windows.Forms.Tools
• デザイナーまたはコードで RadialMenu を作成する
• フォームに追加して表示する
• Items コレクションに基本的なメニュー項目を追加する
• コントロールの階層を理解する
• 最小限の完全な動作例

メニュー項目と階層構造

📄 参照先： references/menu-items-and-structure.md

次のニーズがある場合は、このリファレンスを参照してください。

• RadialMenuItem インスタンスを作成する
• サブメニュー項目を含む階層型メニューを作成する
• CheckMode プロパティ（None、CheckBox、RadioButton）
• ラジオボタンをグループ化する GroupName
• 入れ子になったメニュー構造を構築する
• Click イベントを処理する
• 例：チェックボックス項目、ラジオボタングループ、サブメニュー

専用要素（カラーパレット、フォントリスト、スライダー）

📄 参照先： references/special-elements.md

次のニーズがある場合は、このリファレンスを参照してください。

• 色の選択に使用する RadialColorPalette
• フォントファミリーの選択に使用する RadialFontListBox
• 数値の入力に使用する RadialMenuSlider
• MinimumValue と MaximumValue の設定
• 色／フォント／値の選択イベントを処理する
• メインメニュー項目と統合する
• 各要素タイプの完全な例

スタイルと外観のカスタマイズ

📄 参照： references/styling-and-appearance.md

以下が必要な場合は、このリファレンスを参照してください：

• ドリル領域の色（OuterArcColor、OuterArcHighLightedColor）
• 外縁のカスタマイズ（RimBackground、OuterRimThickness）
• アークの間隔設定（OuterArcGap）
• DisplayStyle（Text、Image、TextAboveImage、ImageAboveText）
• 画像サイズのカスタマイズ（MenuItemImageSize、ImageSize）
• 中央アイコンの設定（Icon プロパティ）
• スタイルのカスタマイズ例

テーマとビジュアルスタイル

📄 参照： references/themes-and-styles.md

以下が必要な場合は、このリファレンスを参照してください：

• Style プロパティの概要
• Office 2016 のテーマ（Colorful、White、DarkGray、Black）
• デフォルトのテーマ
• テーマの比較と選択ガイド
• 実行時のテーマの適用
• テーマのベストプラクティス

高度な機能と設定

📄 参照： references/advanced-features.md

以下が必要な場合は、このリファレンスを参照してください：

• WedgeCount プロパティ（スライス数の設定）
• 初期表示用の MenuVisibility プロパティ
• 状態復元用の PersistPreviousState
• ImageList の設定（ImageListAdv）
• 項目の配置用の UseIndexBasedOrder
• SuperAccelerator によるキーボードサポート
• アクセラレーターキーの設定（Alt+キー）
• ShowTooltip プロパティとツールチップのカスタマイズ
• 高度な設定例

クイックスタートの例

RadialMenu とメニュー項目を作成する最小限の例を示します：

using Syncfusion.Windows.Forms.Tools;
using System;
using System.Drawing;
using System.Windows.Forms;

public class RadialMenuExample : Form
{
    private RadialMenu radialMenu1;
    
    public RadialMenuExample()
    {
        // Create RadialMenu
        radialMenu1 = new RadialMenu();
        radialMenu1.Visible = true;
        radialMenu1.Style = RadialMenuStyle.Office2016Colorful;
        
        // Create menu items
        RadialMenuItem editItem = new RadialMenuItem();
        editItem.Text = "Edit";
        
        RadialMenuItem cutItem = new RadialMenuItem();
        cutItem.Text = "Cut";
        
        RadialMenuItem copyItem = new RadialMenuItem();
        copyItem.Text = "Copy";
        
        RadialMenuItem pasteItem = new RadialMenuItem();
        pasteItem.Text = "Paste";
        
        // Add items to menu
        radialMenu1.Items.Add(editItem);
        radialMenu1.Items.Add(cutItem);
        radialMenu1.Items.Add(copyItem);
        radialMenu1.Items.Add(pasteItem);
        
        // Add menu to form
        this.Controls.Add(radialMenu1);
        
        this.Text = "RadialMenu Example";
        this.Size = new Size(500, 400);
    }
}

結果： Office 2016 の Colorful テーマで、4 つの項目（Edit、Cut、Copy、Paste）を含む円形メニューです。

よく使われるパターン

サブメニュー付きコンテキストメニュー

パターン： 階層型サブメニューを備えた円形コンテキストメニューを作成します。

// Create main RadialMenu
RadialMenu contextMenu = new RadialMenu();
contextMenu.Visible = true;
contextMenu.Style = RadialMenuStyle.Office2016Colorful;

// Create main menu item with submenu
RadialMenuItem formatItem = new RadialMenuItem();
formatItem.Text = "Format";

// Create submenu items
RadialMenuItem boldItem = new RadialMenuItem();
boldItem.Text = "Bold";
boldItem.Click += (s, e) => ApplyBoldFormatting();

RadialMenuItem italicItem = new RadialMenuItem();
italicItem.Text = "Italic";
italicItem.Click += (s, e) => ApplyItalicFormatting();

// Add submenu items to parent
formatItem.Items.Add(boldItem);
formatItem.Items.Add(italicItem);

// Add to main menu
contextMenu.Items.Add(formatItem);
this.Controls.Add(contextMenu);

用途： サブメニューへドリルダウンできる階層型メニューのナビゲーションが必要な場合。

カラーピッカーメニュー

パターン： 円形メニューに色選択機能を追加します。

// Create RadialMenu
RadialMenu menu = new RadialMenu();
menu.Visible = true;
menu.Style = RadialMenuStyle.Office2016Colorful;

// Create RadialColorPalette
RadialColorPalette colorPalette = new RadialColorPalette();
colorPalette.Text = "Color";
colorPalette.ColorSelected += (s, e) => 
{
    // Handle color selection
    Color selectedColor = e.Color;
    ApplyColor(selectedColor);
};

// Add color palette to menu
menu.Items.Add(colorPalette);
this.Controls.Add(menu);

用途： 円形メニューに統合された色選択機能が必要な場合（グラフィックアプリ、テキストエディター）。

スライダー付き書式設定ツールバーメニュー

パターン： フォント選択、カラーピッカー、サイズスライダーを組み合わせます。

// Create RadialMenu
RadialMenu formatMenu = new RadialMenu();
formatMenu.Visible = true;
formatMenu.Style = RadialMenuStyle.Office2016White;
formatMenu.WedgeCount = 3; // Reserve space for 3 items

// Font list
RadialFontListBox fontList = new RadialFontListBox();
fontList.Text = "Font";
fontList.SelectedFontChanged += (s, e) => 
{
    ApplyFont(fontList.SelectedFont);
};

// Color palette
RadialColorPalette colorPalette = new RadialColorPalette();
colorPalette.Text = "Color";

// Size slider
RadialMenuSlider sizeSlider = new RadialMenuSlider();
sizeSlider.Text = "Size";
sizeSlider.MinimumValue = 8;
sizeSlider.MaximumValue = 72;
sizeSlider.SliderValueChanged += (s, e) => 
{
    ApplyFontSize((int)sizeSlider.SliderValue);
};

// Add all elements
formatMenu.Items.Add(fontList);
formatMenu.Items.Add(colorPalette);
formatMenu.Items.Add(sizeSlider);

this.Controls.Add(formatMenu);

用途： コンパクトな円形メニューに包括的な書式設定コントロールが必要な場合。

主なプロパティ

コアプロパティ

プロパティ	型	説明	使用する場面
Visible	bool	RadialMenu の表示／非表示	表示状態を制御する
Style	RadialMenuStyle	ビジュアルテーマ	Office 2016 のテーマを適用する
Items	Collection	メニュー項目のコレクション	RadialMenuItem、パレットなどを追加する
WedgeCount	int	表示可能なメニュースライスの最大数	項目用のスペースを確保する
MenuVisibility	bool	読み込み時にメニューを表示するか	メニューを初期表示する

スタイル設定プロパティ

プロパティ	型	説明	使用する場面
OuterArcColor	Color	ドリル領域の色（通常時）	アークの外観をカスタマイズする
OuterArcHighLightedColor	Color	ドリル領域の色（ホバー時）	ホバー効果をカスタマイズする
RimBackground	Color	外縁の色	外縁の外観をカスタマイズする
OuterRimThickness	int	外縁の厚さ（ピクセル単位）	外縁のサイズを調整する
OuterArcGap	int	外縁とアークの間隔	間隔を調整する
DisplayStyle	DisplayStyle	テキスト／画像のレイアウト	項目の外観を制御する
MenuItemImageSize	Size	すべての項目の画像サイズ	画像サイズを統一する
Icon	Image	中央のアイコン	中央にカスタムアイコンを追加する

高度なプロパティ

プロパティ	型	説明	使用する場面
PersistPreviousState	bool	以前のメニュー状態を復元する	ナビゲーション状態を維持する
ImageList	ImageListAdv	画像コレクション	カスタム画像を指定する
UseIndexBasedOrder	bool	インデックスベースで項目を並べ替える	項目の位置を制御する
ShowToolTip	bool	ツールチップを有効にする	項目の説明を表示する

RadialMenuItem のプロパティ

プロパティ	型	説明	使用する場面
Text	string	メニュー項目のテキスト	項目のラベルを表示する
ImageIndex	int	ImageList 内の画像インデックス	項目にアイコンを追加する
CheckMode	CheckMode	None/CheckBox/RadioButton	チェック動作を有効にする
GroupName	string	ラジオボタングループ	ラジオボタンをグループ化する
Items	Collection	サブメニュー項目	階層型メニューを作成する

よくある使用例

グラフィック・画像エディター

編集ツール用の放射状コンテキストメニュー：

• 塗りつぶし色や線の色を選ぶカラーパレット
• テキストツール用のフォントセレクター
• ブラシやペンのサイズを調整するスライダー
• 編集コマンド（切り取り、コピー、貼り付け）

タッチ対応アプリケーション

タッチ操作に最適化された円形メニュー：

• 放射状レイアウトの大きなタッチ対象
• よく使うコマンドへのすばやいアクセス
• ドリルダウンによるサブメニューの移動
• タブレットやスタイラスに適したインターフェイス

テキストエディターとワープロソフト

書式設定用のコンテキストメニュー：

• フォントファミリーの選択
• テキスト色の選択
• フォントサイズスライダー
• スタイルの切り替え（太字、斜体、下線）

CAD・デザインアプリケーション

デザインツール用のコンテキストメニュー：

• オブジェクト操作コマンド
• レイヤーコントロール
• スナップオプション
• 表示コントロール

実装チェックリスト

RadialMenu を実装するときは、次の点を確認してください。

• ✅ 必要なアセンブリが参照されている（Syncfusion.Tools.Windows.dll など）
• ✅ 名前空間が含まれている（Syncfusion.Windows.Forms.Tools）
• ✅ RadialMenu インスタンスが作成され、設定されている
• ✅ Visible プロパティが true に設定されている（または必要に応じて切り替えられる）
• ✅ Style プロパティがテーマ用に設定されている（Office2016Colorful を推奨）
• ✅ メニュー項目が Items コレクションに追加されている
• ✅ クリックイベントハンドラーがメニュー項目に追加されている
• ✅ 多数の項目を使用する場合、WedgeCount が設定されている
• ✅ カスタムアイコンを使用する場合、ImageList が設定されている
• ✅ マウスとタッチ（該当する場合）でテストされている

トラブルシューティング早見表

問題： RadialMenu が表示されない

• Visible = true に設定する
• メニューがフォームの Controls に追加されていることを確認する
• Location プロパティがフォームの範囲内にあることを確認する
• フォームにフォーカスがあることを確認する

問題： メニュー項目が表示されない

• Items コレクションに項目が設定されていることを確認する
• WedgeCount >= 項目数であることを確認する
• 項目に Text または ImageIndex が設定されていることを確認する
• DisplayStyle プロパティを確認する

問題： サブメニューを移動できない

• 親の Items コレクションに項目を追加する（メニューの Items ではありません）
• 子項目に Text プロパティが設定されていることを確認する
• 階層構造が正しいことを確認する

問題： 画像が表示されない

• ImageList プロパティを設定する
• メニュー項目に ImageIndex を設定する
• 画像が ImageListAdv に存在することを確認する
• DisplayStyle に画像が含まれていることを確認する

問題： キーボードショートカットが動作しない

• SuperAccelerator コンポーネントを追加する
• 各項目に SetAccelerator メソッドを使用する
• フォームにフォーカスがあることを確認する
• Alt キーを押して有効にする

問題： カラーパレット／フォントリストが表示されない

• RadialColorPalette または RadialFontListBox インスタンスを作成する
• メニューの Items コレクションに追加する（RadialMenuItem ではありません）
• Text プロパティが設定されていることを確認する
• カスタムアイコンを使用する場合、ImageIndex を確認する

まとめ

RadialMenu は、次の機能を備えた円形の階層型メニューを提供します。

• 円形レイアウト：タッチ操作に最適化された放射状メニュー構造
• 専用要素：カラーパレット、フォントリスト、数値スライダー
• Office 2016 テーマ：5 種類のプロフェッショナルなビジュアルスタイル
• 階層型ナビゲーション：ドリルダウンに対応したサブメニュー
• カスタマイズ可能なスタイル：色、リム、円弧、表示モード
• キーボード対応：SuperAccelerator による Alt+キーのショートカット

タッチ操作に適した円形のコンテキストメニュー、専用の入力要素（色／フォント／スライダー）、またはモダンなテーマのメニューが必要な場合は、RadialMenu を使用して WinForms アプリケーションで直感的で使いやすいナビゲーションを作成してください。