syncfusion-winui-radial-gauge

放射状ゲージの実装

Syncfusion WinUI Radial Gauge（SfRadialGauge）は、円形の目盛りに数値を表示する多目的なデータ視覚化コントロールです。スピードメーター、温度モニター、ダッシュボードゲージ、メーターゲージ、多軸時計、腕時計、アクティビティゲージ、コンパスなど、さまざまな円形インジケーターの作成に適しています。

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

次のような場合に、このスキルを使用してください。

• 指標を円形に表示する - スピードメーター、タコメーター、燃料計、圧力計
• ダッシュボードインジケーターを作成する - KPI ゲージ、パフォーマンスモニター、進捗インジケーター
• 測定値の表示を作成する - 温度モニター、湿度ゲージ、電圧計
• アクティビティトラッカーを実装する - フィットネスリング、進捗サークル、目標トラッカー
• カスタムダイヤルをデザインする - コンパス表示、時計の文字盤、方向インジケーター
• 範囲を視覚的に表示する - 色分けされたゾーン（赤／黄／緑）、危険／警告／安全領域
• 値の変化をアニメーション表示する - ポインターアニメーションによる滑らかな遷移
• ユーザー操作を有効にする - 値を調整できるドラッグ可能なポインター
• 複数の指標を表示する - 関連するデータポイントを表示する多軸ゲージ

コンポーネントの概要

主な機能：

• 円形の軸：目盛り、ラベル、目盛り線、スタイルをカスタマイズ可能
• 4 種類のポインター - 針、図形、コンテンツ、範囲ポインター
• 視覚的な範囲 - グラデーションに対応した色分けセグメント
• 注釈 - テキスト、画像、カスタム UI 要素を追加
• アニメーション - イージング関数を使った滑らかなポインターの動き
• インタラクティブなドラッグ操作 - ユーザーが調整可能なポインター値
• 複数の軸 - 1 つのゲージに複数の目盛りを表示
• 柔軟なスタイル設定 - レスポンシブレイアウトに対応するピクセルまたは係数ベースのサイズ指定

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

はじめに

📄 参照： references/getting-started.md

次のような場合に使用してください。

• Syncfusion WinUI Radial Gauge をインストールしてセットアップする
• 初めての放射状ゲージを作成する
• 基本的な軸、範囲、ポインター、注釈を追加する
• コンポーネントの構造を理解する
• 完全に動作するサンプルを確認する

軸の設定

📄 参照： references/axis-configuration.md

次のような場合に使用してください。

• 軸の最小値、最大値、間隔を設定する
• 開始角度と終了角度をカスタマイズする（180°、270°、360°など）
• 軸の半径と位置を調整する
• 軸線のスタイルを設定する（幅、色、グラデーション）
• ラベルをカスタマイズする（書式、テンプレート、回転、位置）
• 目盛り線を設定する（主目盛り／補助目盛り、長さ、スタイル、位置）
• 軸の要素を表示／非表示にする
• 複数の軸を実装する
• カスタム目盛り範囲を作成する
• 軸イベントを処理する

ポインター

📄 参照： references/pointers.md

次のような場合に使用してください。

• ノブとテール付きの針ポインターを追加する
• 図形ポインター（円、ひし形、三角形など）を使用する
• カスタム UI を使ったコンテンツポインターを作成する
• 円弧セグメント用の範囲ポインターを実装する
• 1 つの軸に複数のポインターを追加する
• インタラクティブなポインタードラッグを有効にする
• ポインターの動きをアニメーション表示する
• ポインター値の変更イベントを処理する
• ポインターの外観とオフセットをカスタマイズする

範囲

📄 参照： references/ranges.md

次のような場合に使用してください。

• 値の範囲を色分けして作成する
• 範囲の開始値と終了値を定義する
• 範囲の幅をカスタマイズする（均一または先細り）
• 範囲にグラデーションを適用する
• 範囲の位置を指定する（軸からのオフセット）
• 範囲にラベルを追加する
• 軸要素に範囲の色を使用する
• テンプレートベースの範囲ラベルを作成する

注釈

📄 参照： references/annotations.md

次のような場合に使用してください。

• 特定の位置にテキストラベルを追加する
• ゲージに画像を表示する
• 角度または軸の値を使って注釈の位置を指定する
• 中心からの注釈の距離を調整する
• 注釈の配置を設定する（水平方向／垂直方向）
• カスタム UI 要素を注釈として追加する

アニメーション

📄 参照： references/animation.md

次のような場合に使用します。

• ポインターアニメーションを有効にする
• アニメーションの時間を制御する
• イージング関数（linear、bounce、elastic など）を適用する
• 値のスムーズな遷移を作成する

API リファレンス

📄 参照： references/api-reference.md

次のような場合に使用します。

• 特定のプロパティを調べる
• クラス階層を理解する
• 使用可能なカスタマイズオプションを探す
• API ドキュメント全体を参照する

クイックスタートの例

範囲と針ポインターを備えた、基本的な速度計ゲージの例です。

<Window x:Class="RadialGaugeApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges">
    
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis Maximum="150"
                              Interval="10">
                
                
                <gauge:RadialAxis.Ranges>
                    <gauge:GaugeRange StartValue="0"
                                      EndValue="50"
                                      Background="Green" />
                    <gauge:GaugeRange StartValue="50"
                                      EndValue="100"
                                      Background="Orange" />
                    <gauge:GaugeRange StartValue="100"
                                      EndValue="150"
                                      Background="Red" />
                </gauge:RadialAxis.Ranges>
                
                
                <gauge:RadialAxis.Pointers>
                    <gauge:NeedlePointer Value="90"
                                         EnableAnimation="True" />
                </gauge:RadialAxis.Pointers>
                
                
                <gauge:RadialAxis.Annotations>
                    <gauge:GaugeAnnotation DirectionUnit="Angle"
                                           DirectionValue="90"
                                           PositionFactor="0.5">
                        <gauge:GaugeAnnotation.Content>
                            <TextBlock Text="90"
                                       FontSize="25"
                                       FontWeight="Bold" />
                        </gauge:GaugeAnnotation.Content>
                    </gauge:GaugeAnnotation>
                </gauge:RadialAxis.Annotations>
                
            </gauge:RadialAxis>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>
    
</Window>

using Syncfusion.UI.Xaml.Gauges;
using Microsoft.UI.Xaml;

namespace RadialGaugeApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // Can also create gauge programmatically
            SfRadialGauge gauge = new SfRadialGauge();
            
            RadialAxis axis = new RadialAxis();
            axis.Maximum = 150;
            axis.Interval = 10;
            
            // Add ranges
            axis.Ranges.Add(new GaugeRange { 
                StartValue = 0, 
                EndValue = 50, 
                Background = new SolidColorBrush(Colors.Green) 
            });
            
            // Add pointer
            axis.Pointers.Add(new NeedlePointer { 
                Value = 90, 
                EnableAnimation = true 
            });
            
            gauge.Axes.Add(axis);
        }
    }
}

よく使われるパターン

パターン 1：温度モニター

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="-60"
                          Maximum="60"
                          Interval="20"
                          StartAngle="180"
                          EndAngle="0">
            
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="-60"
                                  EndValue="0"
                                  Background="#2196F3" />
                <gauge:GaugeRange StartValue="0"
                                  EndValue="30"
                                  Background="#4CAF50" />
                <gauge:GaugeRange StartValue="30"
                                  EndValue="60"
                                  Background="#FF5722" />
            </gauge:RadialAxis.Ranges>
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="25"
                                    PointerWidth="15"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock Text="25°C"
                                   FontSize="30"
                                   FontWeight="Bold" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

パターン 2：ドラッグ操作に対応したインタラクティブなゲージ

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks="False"
                          AxisLineFill="CornflowerBlue"
                          AxisLineWidth="30">
            
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value="60"
                                    IsInteractive="True"
                                    MarkerOffset="-30"
                                    Background="Indigo"
                                    ValueChanged="Pointer_ValueChanged" />
            </gauge:RadialAxis.Pointers>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
    // Handle pointer value changes
    Debug.WriteLine($"New value: {e.Value}");
}

パターン 3：複数軸の時計

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        
        <gauge:RadialAxis Maximum="12"
                          Interval="1"
                          RadiusFactor="0.8"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="10"
                                     NeedleLength="0.5"
                                     NeedleEndWidth="8" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
        
        
        <gauge:RadialAxis Maximum="60"
                          Interval="5"
                          RadiusFactor="0.95"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="35"
                                     NeedleLength="0.7"
                                     NeedleEndWidth="4" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

パターン 4：パーセンテージ付きのプログレスリング

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowLabels="False"
                          ShowTicks="False"
                          StartAngle="270"
                          EndAngle="270"
                          Maximum="100"
                          AxisLineWidth="20"
                          AxisLineFill="LightGray">
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="73"
                                    PointerWidth="20"
                                    Background="#4CAF50"
                                    CornerStyle="BothCurve"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock>
                            <Run Text="73" FontSize="40" FontWeight="Bold" />
                            <Run Text="%" FontSize="20" />
                        </TextBlock>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

カテゴリ別の主なプロパティ

SfRadialGauge

• Axes - RadialAxis オブジェクトのコレクション
• CanScaleToFit - 開始角度と終了角度に基づいて軸を配置します

軸の設定

• Minimum / Maximum - 軸の値の範囲
• Interval - ラベル間の間隔
• StartAngle / EndAngle - 円弧の角度（0～360°）
• RadiusFactor - 軸のサイズ（利用可能な領域に対する割合、0～1）
• IsInversed - 反時計回りの方向

軸のスタイル設定

• AxisLineWidth / AxisLineWidthUnit - 線の太さ（Pixel/Factor）
• AxisLineFill - 線の色／ブラシ
• GradientStops - 軸線のグラデーションカラー
• ShowAxisLine - 軸線の表示／非表示

ラベルと目盛り

• ShowLabels / ShowTicks - 要素の表示／非表示
• LabelFormat - 数値形式（通貨、パーセントなど）
• LabelTemplate - カスタムラベルテンプレート
• LabelPosition / TickPosition - 内側／外側／交差
• LabelOffset / TickOffset - 軸からの距離
• MajorTickLength / MinorTickLength - 目盛りのサイズ
• MinorTicksPerInterval - 小目盛りの数

ポインター（すべての種類）

• Value - 現在のポインターの値
• EnableAnimation - 値の変更時にアニメーションを有効にする
• AnimationDuration - アニメーションの時間（ms）
• AnimationEasingFunction - イージング関数
• IsInteractive - ドラッグ操作を有効にする

針ポインター固有

• NeedleLength / NeedleStartWidth / NeedleEndWidth - 針の形状
• KnobRadius / KnobFill / KnobStroke - 中央のノブ
• TailLength / TailWidth - 針の尾部

形状ポインター固有

• ShapeType - Circle、Diamond、Triangle など
• ShapeHeight / ShapeWidth - 形状のサイズ
• MarkerOffset - 軸からの距離

範囲ポインター固有

• PointerWidth - 円弧の幅
• CornerStyle - BothFlat、BothCurve、StartCurve、EndCurve

範囲

• StartValue / EndValue - 範囲の境界
• StartWidth / EndWidth - 範囲の太さ
• WidthUnit - Pixel または Factor
• RangeOffset - 軸からの距離
• Background - 範囲の色
• GradientStops - グラデーションカラー
• Label / LabelTemplate - 範囲ラベル

注釈

• DirectionUnit - Angle または AxisValue
• DirectionValue - 位置の値
• PositionFactor - 中心からの距離（0～1）
• Content - 任意の UIElement

よくある使用例

1. 速度計／タコメーター - 危険ゾーンを色分けした、車両の速度／RPM 表示
2. 温度ゲージ - 低温／適温／高温の範囲を備えた気候モニター
3. 圧力計 - しきい値インジケーターを備えた、タイヤ圧や油圧の表示
4. バッテリー残量 - パーセンテージ注釈付きの円形バッテリーインジケーター
5. フィットネストラッカー - 歩数、カロリー、距離を示すアクティビティリング
6. KPI ダッシュボード - 目標しきい値を備えたビジネス指標
7. 音量コントロール - ドラッグ操作に対応した円形の音量調節機能
8. コンパス - 度数目盛り付きの方向ゲージ
9. タイマー／ストップウォッチ - 経過時間の視覚化
10. 進捗インジケーター - タスクの完了状況、ダウンロードの進捗
11. 評価表示 - スコアの視覚化（1～10 の尺度）
12. 複数指標の表示 - 関連する測定値を示す複数の軸

メモ

• すべてのサイズプロパティは、レスポンシブレイアウト向けにピクセルまたはファクターの単位に対応しています
• ファクター値（0～1）は、軸の半径に乗じて比例したサイズを設定します
• 値の更新時に滑らかに遷移させるには、アニメーションを使用します
• ドラッグ操作でユーザーが調整できるポインターを使用するには、IsInteractiveを有効にします
• 複数の軸で異なる半径係数を使い、同じ中心を共有できます
• GradientStopsは、軸の値に応じて滑らかな色の遷移を設定します
• 注釈には、任意のWinUI UIElement（TextBlock、Image、Gridなど）を含めることができます

---

インストール： Syncfusion.Gauge.WinUI NuGetパッケージをインストールします

名前空間： Syncfusion.UI.Xaml.Gauges

GitHubサンプル： WinUI Radial Gaugeのデモ