syncfusion-wpf-radial-menu

Syncfusion WPF Radial Menu の実装

Syncfusion WPF Radial Menu（SfRadialMenu） は、階層型メニューを円形レイアウトで表示し、従来のメニューよりも同じスペースで多くのメニュー項目を表示できます。コンテキストメニュー、ツールパレット、タッチ対応インターフェイスに最適です。

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

ユーザーが次のことを必要としている場合に、このスキルを使用してください。

• WPF アプリケーションにラジアルメニュー（円形レイアウトのメニュー）を実装する
• 階層的な円形ナビゲーションを備えたコンテキストメニューを作成する
• 中心点の周囲にある円形レイアウトでメニュー項目を表示する
• ラジアルパターンでドリルダウンナビゲーションを実装する
• ラジアルメニュー構造のカラーパレットを作成する
• キオスクやタブレットのアプリケーション向けに、タッチ操作に適した円形メニューを構築する
• 従来の直線型メニューと比べ、同じスペースでより多くのメニューオプションを表示する

---

コンポーネントの概要

SfRadialMenu は、中心点の周囲にメニュー項目を放射状に配置する円形メニューコントロールです。次の機能をサポートしています。

• ドリルダウン機能を備えた階層型ナビゲーション
• ビジネスオブジェクトコレクションとのデータバインディング
• カスタムおよび既定のレイアウトモード
• 中央およびメニュー項目のアイコンのカスタマイズ
• 豊富な外観およびスタイル設定オプション
• SfRadialColorItem によるカラーパレットのサポート
• ツールチップの設定
• コマンドバインディングとイベント処理

名前空間： Syncfusion.Windows.Controls.Navigation
アセンブリ： Syncfusion.SfRadialMenu.WPF

---

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

はじめに

📄 参照： references/getting-started.md

• 名前空間とアセンブリの設定
• 基本的な XAML とコードビハインドの実装
• Show() および Close() メソッドによるメニューの開閉
• イベント処理：Opened、Closed、Navigating
• 初期状態を指定する IsOpen プロパティ
• SfSkinManager によるテーマのサポート

項目の設定とデータバインディング

📄 参照： references/populating-items.md

• ItemsSource をビジネスオブジェクトコレクションにバインドする
• ヘッダーテキストに使用する DisplayMemberPath
• コマンドバインディングに使用する CommandPath
• 項目の外観をカスタマイズする ItemTemplate
• ナビゲーションを追跡する DrillDownItem
• 手動回転を有効にする EnableFreeRotation
• Command および CommandParameter プロパティ
• CloseOnExecute の動作
• CheckMode のオプション（None、CheckBox、Radio）
• ラジオボタングループの GroupName
• チェックボックス／ラジオボタンの状態を指定する IsChecked
• SfRadialMenuItem のイベント（Click、Checked、UnChecked）

レイアウトの設定

📄 参照： references/layout-types.md

• 既定のレイアウトタイプ（自動セグメント分割）
• VisibleSegmentsCount を使用するカスタムレイアウトタイプ
• 項目の位置を正確に指定する SegmentIndex
• セグメントの分布の制御
• レイアウトタイプの選択ガイド

アイコンと視覚要素

📄 参照： references/icons.md

• メニュー中央をカスタマイズする Center Icon プロパティ
• 項目のアイコンに使用する SfRadialMenuItem Icon プロパティ
• Image 要素とカスタム UIElements の使用
• アイコンのサイズとストレッチのオプション

外観とスタイル設定

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

• メニューサイズを指定する RadiusX および RadiusY
• 内側の円のサイズを指定する CenterRimRadiusFactor
• リムのブラシ：RimBackground、RimActiveBrush、RimInactiveBrush、RimHoverBrush
• 展開矢印の表示／非表示を切り替える IsExpanderVisible
• 外側のリムの太さを指定する RimRadiusFactor
• 項目ごとのカスタマイズ：MenuBackgroundColor、MenuMouseOverBackgroundColor
• ShowMouseOverStyle プロパティ
• ナビゲーションボタンに使用する CenterBackButtonForeground
• セパレーターのスタイル設定：SeparatorBackground、SeparatorWidth
• ストロークのプロパティ：StrokeThickness、MouseOverRimStrokeThickness
• 高度なホバーのカスタマイズに使用する MouseOverRimStyle

ツールチップ

📄 参照： references/tooltips.md

• 項目のツールチップに使用する ToolTip プロパティ
• ToolTipPlacement のオプション（None、Left、Top、Right、Bottom）
• メニューを基準にしたツールチップの配置

カラーパレット

📄 参照： references/color-palette.md

• 色の選択に SfRadialColorItem を使用
• 階層型カラーパレットの作成
• 色のバリエーション用のネストされたカラー項目
• カラーピッカーインターフェースの構築

---

クイックスタートの例

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>

コードビハインドでの基本的な放射状メニュー

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

サブ項目を含む階層型メニュー

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

---

一般的なパターン

ボタンのクリック時にメニューを開く

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

ビジネスオブジェクトとのデータバインディング

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

特定の位置を指定したカスタムレイアウト

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

リムカラーを使用したスタイル設定

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

コマンドとパラメーターを含むメニュー項目

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

---

主なプロパティとイベント

SfRadialMenu のプロパティ

プロパティ	型	説明
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 のプロパティ

プロパティ	型	説明
Header	object	メニュー項目に表示されるコンテンツ
Icon	UIElement	項目用のカスタムアイコン
Command	ICommand	クリック時に実行するコマンド
CommandParameter	object	コマンドに渡すパラメーター
SegmentIndex	int	カスタムレイアウトモードでの位置
CloseOnExecute	bool	項目のクリック後にメニューを閉じます
CheckMode	CheckMode	なし、チェックボックス、またはラジオボタンの動作
IsChecked	bool	チェックボックス／ラジオボタンのチェック状態
GroupName	string	ラジオボタングループ名
ToolTip	string	ツールチップのテキスト
ToolTipPlacement	Placement	ツールチップの位置
MenuBackgroundColor	Brush	項目の背景色

イベント

イベント	説明
Opened	放射状メニューが開いたときに発生します
Closed	放射状メニューが閉じたときに発生します
Navigating	サブ項目への移動時に発生します（キャンセル可能）
Click（MenuItem）	メニュー項目がクリックされたときに発生します
Checked（MenuItem）	チェックボックス／ラジオボタン項目がチェックされたときに発生します
UnChecked（MenuItem）	チェックボックス項目のチェックが外されたときに発生します

---

一般的なユースケース

1. テキストエディター用のコンテキストメニュー

太字、斜体、下線、フォントサイズ、色などの書式設定オプションを含む放射状メニューを作成し、右クリック時に表示します。

2. グラフィックエディター用のツールパレット

描画ツール（ペン、ブラシ、消しゴム、図形）を円形レイアウトで選択できるツールセレクターを実装します。

3. 放射状レイアウトのカラーピッカー

SfRadialColorItem を使用してカラーパレットを構築し、第1階層に基本色、第2階層に色合いを配置します。

4. タッチ対応キオスクナビゲーション

円形レイアウトによってアクセシビリティを向上させる、キオスクアプリケーション向けのタッチ操作に適したナビゲーションメニューを設計します。

5. サブコマンド付きコマンドパレット

最上位の項目をカテゴリ、サブ項目を個別のコマンドとする階層型コマンドメニューを作成します。

6. クイックアクションメニュー

一般的なアクション（編集、削除、共有、その他）を含む放射状メニューを開く、フローティングアクションボタンを実装します。

---

実装ガイド

ユーザーがラジアルメニューを実装したい場合：

1. 基本から始める → セットアップと基本的な実装については、getting-started.mdを案内してください
2. データバインディングについて → ItemsSource、テンプレート、コマンドについては、populating-items.mdを案内してください
3. レイアウトを正確に制御するには → カスタムレイアウトとSegmentIndexについては、layout-types.mdを提示してください
4. 外観をカスタマイズするには → icons.mdとappearance-and-styling.mdを案内してください
5. 色選択UIについて → SfRadialColorItemの使い方については、color-palette.mdを案内してください
6. ツールチップについて → ツールチップの設定については、tooltips.mdを参照してください

以下の点を常に考慮してください：

• スペースの制約：ラジアルメニューは限られたスペースにより多くの項目を表示できます
• タッチ操作とマウス操作：タッチインターフェイスでは半径を大きくします
• 階層の深さ：使いやすさを保つため、メニュー階層は2～3段にします
• 項目数：各階層の項目数は4～8個が最適です
• 視覚的フィードバック：明確なホバー状態を示すため、RimHoverBrushとMenuMouseOverBackgroundColorを使用します