syncfusion-wpf-linear-gauge

リニアゲージの実装

Windows Presentation Foundation アプリケーションで Syncfusion WPF リニアゲージ（SfLinearGauge）コントロールを実装するための包括的なガイドです。リニアゲージは、線形目盛りに沿って数値をグラフィカルに表示します。温度計、進捗インジケーター、スライドメーター、水平または垂直方向での値の可視化に最適です。

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

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

• WPF アプリケーションで SfLinearGauge を実装する
• 温度や測定値を可視化する 温度計スタイルの表示を作成する
• 目盛りと値マーカーを備えた 進捗インジケーターを作成する
• 目盛り、ポインター、範囲を使って 数値を線形に可視化する
• パフォーマンスの監視や値の追跡に使う スライドメーターを作成する
• 異なる値の範囲を示す色付きゾーンで 値を表示する
• カスタマイズ可能な方向で 水平または垂直のゲージを実装する
• 新しい値へ滑らかに移動する アニメーション付きポインターを追加する
• 1つの目盛り上で値を比較するために 複数のポインターを設定する
• 柔軟な配置とスタイル設定で カスタムゲージレイアウトを設計する

コンポーネントの概要

SfLinearGauge コントロールは、水平または垂直方向の線形目盛りに沿って値を測定し、表示します。次の機能を備えた包括的なゲージ可視化システムを提供します。

• 線形目盛り - 最小値／最大値、間隔、方向を設定できる基盤
• ポインター - 目盛り上の特定の値を示すバー型およびシンボル型のポインター
• 範囲 - 特定の値の範囲を強調表示する色付きのセクション
• ラベル - 書式設定、接頭辞／接尾辞、配置オプションを備えた数値ラベル
• 目盛り線 - 目盛りの間隔を示す主目盛り線と副目盛り線
• 方向 - 横向き（ランドスケープ）または縦向き（ポートレート）のレイアウトをサポート
• アニメーション - 再生時間を設定できる滑らかなポインターアニメーション
• テーマ設定 - UI スタイルを統一する組み込みテーマのサポート

主な機能：

• 1つの目盛り上で複数の種類のポインター（バー型およびシンボル型）を使用可能
• しきい値を可視化する色分けされた範囲
• XAML とコードビハインドによる完全なカスタマイズ
• MVVM データバインディングのサポート
• レスポンシブなサイズ設定とレイアウト
• プロフェッショナルなゲージのデザイン

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

はじめに

📄 参照： references/getting-started.md

読むタイミング： 新しいリニアゲージの実装を始めるとき、または初回セットアップを行うとき。

内容：

• Syncfusion.SfGauge.WPF NuGet パッケージのインストール
• アセンブリ参照の追加（3つの方法）
• XAML と C# での名前空間のインポート
• 空の SfLinearGauge コントロールの初期化
• 基本プロパティを使った最初の目盛りの設定
• 値を示すシンボルポインターの追加
• 進捗を示すバー型ポインターの追加
• 値のゾーンを表す色付き範囲の作成
• 最小構成の完全な動作例
• SfSkinManager を使ったテーマの適用

目盛りの設定

📄 参照： references/scale-configuration.md

読むタイミング： 目盛りの外観、範囲、間隔、サイズ、方向、位置を設定するとき。

内容：

• MainScale プロパティと LinearScale の理解
• 目盛り範囲の最小値と最大値の設定
• ラベルと目盛り線の間隔の設定
• 目盛りの外観のカスタマイズ（色、境界線、線幅）
• 目盛りサイズのカスタマイズ（ScaleBarSize、ScaleBarLength）
• 目盛りの方向の設定（Forward または Backward）
• ScaleBarPositionFactor を使った目盛りの配置
• カスタム配置のための ElementsPositionMode
• 間隔の自動計算
• XAML と C# による完全なコード例

ポインター

📄 参照: references/pointers.md

読むタイミング： 値を示すポインターの追加、バーまたはシンボルポインターの実装、ポインターの外観のカスタマイズ、アニメーションの有効化、複数のポインターの追加を行う場合。

内容：

• ポインターの種類の概要（BarPointer と SymbolPointer）
• 進捗や塗りつぶしを示すバー ポインターの実装
• バー ポインターのカスタマイズ（ストロークの色、太さ）
• 値を示すシンボル ポインターの実装
• シンボル ポインターのカスタマイズ（サイズ、形状、ストローク）
• シンボル ポインターの位置指定（Above、Below、Cross）
• テンプレートを使用したカスタム シンボル ポインターの形状
• 1つのスケールへの複数のポインターの追加
• EnableAnimation によるポインター アニメーションの有効化
• AnimationDuration によるアニメーション速度の制御
• ポインターの値とデータのバインド
• 各ポインターの種類の完全な例

範囲

📄 参照: references/ranges.md

読むタイミング： 値の範囲を色で強調表示する、しきい値ゾーンを作成する、複数の範囲を追加する、または範囲の外観や位置をカスタマイズする場合。

内容：

• 範囲の概要と視覚的な目的
• 範囲の StartValue と EndValue の設定
• 範囲のカスタマイズ（ストロークの色、幅、不透明度）
• 幅が変化する範囲（StartWidth、EndWidth）
• 範囲の色と目盛りおよびラベルのバインド
• RangeOffset による範囲の位置指定
• RangePosition プロパティ（Above、Below）
• 色分けされたゾーンとして複数の範囲を追加
• よく使われる範囲パターン（安全／警告／危険ゾーン）
• 複数の範囲を使った完全な例

ラベルと目盛り

📄 参照: references/labels-and-ticks.md

読むタイミング： スケールラベルのカスタマイズ、ラベルテキストの書式設定、ラベルの位置指定、目盛りの設定、または目盛り間隔の調整を行う場合。

内容：

• ラベル：
  • LabelStroke によるラベルの色のカスタマイズ
  • フォントのカスタマイズ（LabelSize、FontFamily、FontStyle）
  • ラベルの位置指定（LabelPosition：Above、Below）
  • 間隔を調整するラベルのオフセット
  • ラベルテキストへの接頭辞と接尾辞の追加
  • ラベルの表示制御
• 目盛り：
  • 主目盛りと補助目盛りのカスタマイズ（ストローク、サイズ、太さ）
  • 目盛りの位置指定（TickPosition：Above、Below、Cross）
  • MinorTicksPerInterval の設定
  • 目盛りの外観とスタイル設定
• ラベルと目盛りを組み合わせた完全な例

方向

📄 参照: references/orientation.md

読むタイミング： ゲージの方向を水平から垂直に、またはその逆に変更する場合。

内容：

• Orientation プロパティの概要
• 水平方向（既定の横長レイアウト）
• 垂直方向（縦長レイアウト）
• 方向のユースケースと考慮事項
• ポインターと範囲に対するレイアウトの影響
• 両方の方向の完全な例

クイックスタートの例

スケール、バー ポインター、シンボル ポインター、色付き範囲を備えた、最小限の動作する Linear Gauge の例です。

XAML

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    <Grid>
        <gauge:SfLinearGauge>
            <gauge:SfLinearGauge.MainScale>
                <gauge:LinearScale 
                    Minimum="0" 
                    Maximum="100"
                    Interval="10"
                    ScaleBarStroke="#E0E0E0"
                    LabelStroke="#424242"
                    MajorTickStroke="Gray"
                    MajorTickSize="15"
                    MinorTickStroke="Gray"
                    MinorTickSize="7"
                    MinorTicksPerInterval="3"
                    ScaleBarSize="10"
                    ScaleBarLength="300">
                    
                    
                    <gauge:LinearScale.Pointers>
                        <gauge:LinearPointer 
                            PointerType="BarPointer"
                            Value="65"
                            BarPointerStroke="#36D1DC"
                            BarPointerStrokeThickness="10"/>
                        
                        
                        <gauge:LinearPointer 
                            PointerType="SymbolPointer"
                            Value="65"
                            SymbolPointerHeight="15"
                            SymbolPointerWidth="15"
                            SymbolPointerPosition="Above"
                            SymbolPointerStroke="#5B86E5"/>
                    </gauge:LinearScale.Pointers>
                    
                    
                    <gauge:LinearScale.Ranges>
                        <gauge:LinearRange 
                            StartValue="0" 
                            EndValue="35"
                            RangeStroke="#27BEB7"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                        
                        <gauge:LinearRange 
                            StartValue="35" 
                            EndValue="70"
                            RangeStroke="Orange"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                        
                        <gauge:LinearRange 
                            StartValue="70" 
                            EndValue="100"
                            RangeStroke="Red"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                    </gauge:LinearScale.Ranges>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.MainScale>
        </gauge:SfLinearGauge>
    </Grid>
</Window>

C# コードビハインド

using Syncfusion.UI.Xaml.Gauges;
using System.Windows.Media;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        CreateLinearGauge();
    }
    
    private void CreateLinearGauge()
    {
        // Create gauge
        SfLinearGauge gauge = new SfLinearGauge();
        
        // Create scale
        LinearScale scale = new LinearScale
        {
            Minimum = 0,
            Maximum = 100,
            Interval = 10,
            ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224)),
            LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66)),
            MajorTickStroke = new SolidColorBrush(Colors.Gray),
            MajorTickSize = 15,
            MinorTickStroke = new SolidColorBrush(Colors.Gray),
            MinorTickSize = 7,
            MinorTicksPerInterval = 3,
            ScaleBarSize = 10,
            ScaleBarLength = 300
        };
        
        // Add bar pointer
        scale.Pointers.Add(new LinearPointer
        {
            PointerType = LinearPointerType.BarPointer,
            Value = 65,
            BarPointerStroke = new SolidColorBrush(Color.FromRgb(54, 209, 220)),
            BarPointerStrokeThickness = 10
        });
        
        // Add symbol pointer
        scale.Pointers.Add(new LinearPointer
        {
            PointerType = LinearPointerType.SymbolPointer,
            Value = 65,
            SymbolPointerHeight = 15,
            SymbolPointerWidth = 15,
            SymbolPointerPosition = LinearSymbolPointersPosition.Above,
            SymbolPointerStroke = new SolidColorBrush(Color.FromRgb(91, 134, 229))
        });
        
        // Add ranges
        scale.Ranges.Add(new LinearRange
        {
            StartValue = 0,
            EndValue = 35,
            RangeStroke = new SolidColorBrush(Color.FromRgb(39, 190, 183)),
            StartWidth = 10,
            EndWidth = 10,
            RangeOffset = 0.4
        });
        
        gauge.MainScale = scale;
        this.Content = gauge;
    }
}

よく使われるパターン

温度計パターン

垂直方向で温度計スタイルのゲージを作成します。

<gauge:SfLinearGauge Orientation="Vertical">
    <gauge:SfLinearGauge.MainScale>
        <gauge:LinearScale 
            Minimum="-20" 
            Maximum="120"
            LabelPostfix="°C"
            ScaleBarSize="15">
            <gauge:LinearScale.Pointers>
                <gauge:LinearPointer 
                    PointerType="BarPointer"
                    Value="37"
                    BarPointerStroke="Red"
                    BarPointerStrokeThickness="15"/>
            </gauge:LinearScale.Pointers>
        </gauge:LinearScale>
    </gauge:SfLinearGauge.MainScale>
</gauge:SfLinearGauge>

進捗インジケーターパターン

アニメーション付きポインターで進捗を表示します。

<gauge:LinearScale.Pointers>
    <gauge:LinearPointer 
        PointerType="BarPointer"
        Value="{Binding ProgressValue}"
        EnableAnimation="True"
        AnimationDuration="500"
        BarPointerStroke="#36D1DC"
        BarPointerStrokeThickness="12"/>
</gauge:LinearScale.Pointers>

複数ゾーンの値メーターパターン

安全／警告／危険ゾーンを作成します。

<gauge:LinearScale.Ranges>
    
    <gauge:LinearRange 
        StartValue="0" 
        EndValue="60"
        RangeStroke="Green"
        StartWidth="15"
        EndWidth="15"/>
    
    
    <gauge:LinearRange 
        StartValue="60" 
        EndValue="80"
        RangeStroke="Yellow"
        StartWidth="15"
        EndWidth="15"/>
    
    
    <gauge:LinearRange 
        StartValue="80" 
        EndValue="100"
        RangeStroke="Red"
        StartWidth="15"
        EndWidth="15"/>
</gauge:LinearScale.Ranges>

複数ポインターによる比較パターン

1つのスケール上で2つの値を比較します。

<gauge:LinearScale.Pointers>
    
    <gauge:LinearPointer 
        PointerType="SymbolPointer"
        Value="75"
        SymbolPointerStroke="Blue"
        SymbolPointerPosition="Above"/>
    
    
    <gauge:LinearPointer 
        PointerType="SymbolPointer"
        Value="90"
        SymbolPointerStroke="Green"
        SymbolPointerPosition="Below"/>
</gauge:LinearScale.Pointers>

主なプロパティ

SfLinearGauge のプロパティ

プロパティ	型	説明
MainScale	LinearScale	すべてのゲージ要素を含むメイン スケール
Orientation	Orientation	水平（既定）または垂直のレイアウト

LinearScale のプロパティ

プロパティ	型	説明
Minimum	double	スケールの最小値（デフォルト：0）
Maximum	double	スケールの最大値（デフォルト：100）
Interval	double	目盛りとラベルの間隔
ScaleBarStroke	Brush	スケールバーの背景色
ScaleBarSize	double	スケールバーの太さ（水平の場合は高さ）
ScaleBarLength	double	スケールバーの長さ（水平の場合は幅）
ScaleDirection	LinearScaleDirection	順方向または逆方向
Pointers	ObservableCollection	LinearPointer オブジェクトのコレクション
Ranges	ObservableCollection	LinearRange オブジェクトのコレクション
LabelStroke	Brush	ラベルテキストの色
LabelPosition	LinearLabelsPosition	スケールの上または下
LabelPrefix	string	ラベルの前に付けるテキスト
LabelPostfix	string	ラベルの後に付けるテキスト
MajorTickStroke	Brush	主目盛りの色
MajorTickSize	double	主目盛りの長さ
MinorTickStroke	Brush	副目盛りの色
MinorTickSize	double	副目盛りの長さ
MinorTicksPerInterval	int	主目盛り間の副目盛りの数
TickPosition	LinearTicksPosition	上、下、または交差

LinearPointer のプロパティ

プロパティ	型	説明
PointerType	LinearPointerType	BarPointer または SymbolPointer
Value	double	スケール上のポインターの値
BarPointerStroke	Brush	バーポインターの色
BarPointerStrokeThickness	double	バーポインターの幅
SymbolPointerStroke	Brush	シンボルポインターの色
SymbolPointerHeight	double	シンボルポインターの高さ
SymbolPointerWidth	double	シンボルポインターの幅
SymbolPointerPosition	LinearSymbolPointersPosition	上、下、または交差
EnableAnimation	bool	ポインターの滑らかな遷移を有効にします
AnimationDuration	int	アニメーションの時間（ミリ秒）

LinearRange のプロパティ

プロパティ	型	説明
StartValue	double	範囲の開始値
EndValue	double	範囲の終了値
RangeStroke	Brush	範囲の色
StartWidth	double	開始位置での範囲の幅
EndWidth	double	終了位置での範囲の幅（先細りの範囲の場合）
RangeOffset	double	スケールバーからの距離
RangeOpacity	double	範囲の不透明度（0.0～1.0）

一般的なユースケース

温度の監視

温度の読み取り値を表示し、通常、警告、危険な温度を色分けした範囲で示します。温度計のような表示には、垂直方向を使用します。

パフォーマンス指標

バー表示のポインターで現在値を示し、許容しきい値を範囲で示すことで、KPI、CPU 使用率、メモリ消費量などのパフォーマンス指標を追跡します。

進捗状況の追跡

アニメーション付きのバー表示ポインターを使用して、値の更新に合わせて滑らかに遷移させ、タスク、ダウンロード、プロセスの完了率を示します。

測定値の表示

圧力計、スピードメーター、電圧計など、線形スケール表示が役立つあらゆる測定器を作成します。

値の比較

複数のポインターを使用して、実績値と目標値、現在値と過去値、または単一スケール上の複数の指標を比較します。

ダッシュボードウィジェット

線形ゲージをダッシュボードに組み込み、一目でデータを監視できる、コンパクトで視覚的に魅力的なウィジェットとして活用します。

API ドキュメント

オンライン API リファレンス：

• SfLinearGauge クラス
• LinearScale クラス
• LinearPointer クラス
• LinearRange クラス
• Syncfusion.UI.Xaml.Gauges 名前空間

---

次のステップ： 実装のニーズに応じて、上記のリファレンスファイルを参照してください。初期設定には getting-started.md から始め、その後、必要に応じて各機能を確認してください。