syncfusion-wpf-radial-slider

SfRadialSlider の実装（WPF）

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

次のような場合に、このスキルを使用します。

• WPF アプリケーションに円形／放射状の数値セレクターを追加する
• 値の範囲（Minimum、Maximum）、ステップ間隔（SmallChange）、または目盛りの間隔（TickFrequency）を設定する
• 円形トラックの開始角度と終了角度、および回転方向をカスタマイズする
• Content または ContentTemplate を使用して、選択した値を内側のリム内に表示する
• DataTemplate を使用して、目盛り、目盛りラベル、ポインター、またはプレビューポインターをカスタマイズする
• DrawLabel イベントを使用して、目盛りラベルのテキストを動的に書式設定する
• 内側のリム、外側のリム、前景、背景をスタイル設定する

---

コンポーネントの概要

SfRadialSlider
├── Outer rim      — circular track background (Background, OuterRimStroke)
├── Ticks          — tick marks on the track (TickRadiusFactor, TickTemplate)
├── Labels         — tick value labels (LabelRadiusFactor, LabelTemplate, DrawLabel)
├── Pointer        — selection indicator (PointerRadiusFactor, PointerStyle)
├── Preview pointer — hover indicator (PreviewPointerStyle)
└── Inner rim      — center circle content area (InnerRimRadiusFactor, InnerRimFill, Content)

アセンブリ：

• Syncfusion.SfRadialMenu.WPF
• Syncfusion.SfShared.WPF

名前空間： Syncfusion.Windows.Controls.Navigation
XAML スキーマ： http://schemas.syncfusion.com/wpf

---

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

はじめに

📄 参照： references/getting-started.md

• アセンブリ参照と名前空間
• XAML と C# でのコントロールの作成
• ドラッグまたはクリックによる値の選択
• Value のプログラムによる設定
• ValueChanged イベント
• SfSkinManager を使用したテーマ設定

値と範囲の設定

📄 参照： references/value-and-range.md

• Value / Minimum / Maximum
• コンテンツ領域への値の表示（Content + ContentTemplate）
• SmallChange — ステップ間隔
• TickFrequency — 目盛りの間隔
• ShowMaximumValue — 値が間隔の倍数でない場合に最大値を表示する
• StartAngle / EndAngle — 円弧の範囲
• SweepDirection — 時計回りまたは反時計回り

目盛り、ラベル、テンプレート

📄 参照： references/ticks-and-templates.md

• TickRadiusFactor / TickVisibility / TickTemplate
• LabelRadiusFactor / LabelVisibility / LabelTemplate
• InnerRimRadiusFactor / OuterRimRadiusFactor
• PointerRadiusFactor / PointerStyle
• PreviewPointerStyle
• DrawLabel イベント — ラベルごとのテキスト、色、フォント

外観とスタイル設定

📄 参照： references/appearance.md

• Foreground / Background
• InnerRimFill / InnerRimStroke / InnerRimStrokeThickness
• OuterRimStroke / OuterRimStrokeThickness
• FlowDirection（RTL）
• SfSkinManager のテーマ

---

クイックスタート

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:SfRadialSlider Name="radialSlider"
                           Height="200" Width="200"/>

using Syncfusion.Windows.Controls.Navigation;

SfRadialSlider radialSlider = new SfRadialSlider();
radialSlider.Height = 200;
radialSlider.Width  = 200;
this.Content = radialSlider;

内側のリム内に選択した値を表示します。

<syncfusion:SfRadialSlider Value="{Binding SelectedValue, Mode=TwoWay}"
                           Content="{Binding SelectedValue, Mode=TwoWay}"
                           Height="200" Width="200">
    <syncfusion:SfRadialSlider.DataContext>
        <local:ViewModel/>
    </syncfusion:SfRadialSlider.DataContext>
</syncfusion:SfRadialSlider>

---

よくあるパターン

シナリオ	方法
0～100 の温度セレクター	Minimum="0" Maximum="100"
全円と円弧	StartAngle="0" EndAngle="360" と StartAngle="90" EndAngle="330"
5 の倍数にスナップする	SmallChange="5"
目盛りの数を減らす	TickFrequency="20"
反時計回りの円弧	SweepDirection="Counterclockwise"
最大値のラベルを表示する	ShowMaximumValue="True"
値に応じてラベルに色を付ける	DrawLabel イベントを処理する
ポインターのスタイルをカスタマイズする	TargetType="syncfusion:RadialPointer" を指定した PointerStyle
中央に書式設定済みの値を表示する	バインドされた TextBlock を含む ContentTemplate

---

主なプロパティ

プロパティ	デフォルト	説明
Value	0	現在選択されている値
Minimum	0	目盛りの最小値
Maximum	100	目盛りの最大値
SmallChange	0.1	選択可能な最小の増分
TickFrequency	10	表示される目盛りの間隔
ShowMaximumValue	false	最大値が TickFrequency の倍数でない場合に最大値を表示します
StartAngle	0	円弧の開始角度
EndAngle	360	円弧の終了角度
SweepDirection	Clockwise	目盛りの方向
Content	null	内側のリム内に表示するコンテンツ
ContentTemplate	null	内側のリムのコンテンツに使用する DataTemplate
InnerRimRadiusFactor	0.2	内側の円の半径（0～1）
OuterRimRadiusFactor	0.7	外側のリムの半径（0～1）
TickRadiusFactor	0.72	目盛りの位置の半径
LabelRadiusFactor	0.87	ラベルの位置の半径
PointerRadiusFactor	0.75	ポインターの位置の半径
TickVisibility	Visible	目盛りの表示／非表示
LabelVisibility	Visible	目盛りラベルの表示／非表示