syncfusion-winui-linear-gauge

Name: syncfusion-winui-linear-gauge
Author: syncfusion

github.com/syncfusionデザイン・UI148 回インストール1 週間前に更新

リポジトリ

syncfusion-winui-linear-gauge について

WinUI デスクトップアプリ開発者向けに、SfLinearGauge で水平または垂直の目盛りに値を表示する方法を解説する Syncfusion のスキルです。範囲、ポインター、アニメーション、操作性、軸のスタイル設定を扱います。

主な機能

01水平または垂直の数値スケール設定
02色付き範囲による値区分の表示
03バー、形状、コンテンツポインターの追加
04ポインターのアニメーションとイージング設定
05ドラッグ可能なポインターと値バインディング

活用シーン

01温度計や圧力計の作成
02バッテリー残量や進捗の表示
03操作可能な音量コントロールの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/winui-ui-components-skills --skill syncfusion-winui-linear-gauge

インストール後、Claude Code で/syncfusion-winui-linear-gaugeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

animation.md

axis-customization.md

getting-started.md

pointers.md

ranges.md

詳細

WinUI Linear Gauge（SfLinearGauge）

Windows デスクトップアプリケーションでデータを可視化するために、Syncfusion WinUI Linear Gauge（SfLinearGauge）コントロールを実装するための包括的なガイドです。Linear Gauge コントロールは、豊富なカスタマイズオプション、範囲、複数のポインタータイプ、アニメーション機能を備え、数値を水平または垂直のリニアスケール上に表示します。

このスキルを使用するタイミング

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

リニアゲージコントロールを作成する：WinUI デスクトップアプリケーションでデータを可視化します
数値を表示する：水平または垂直のリニアスケール上に表示します
範囲インジケーターを追加する：色分けされたセグメントで値のカテゴリを可視化します
バーポインターを使用する：塗りつぶされたインジケーターで現在の値を示します
シェイプポインターを使用する：さまざまな形状（円、ひし形、三角形など）で値を示します
コンテンツポインターを使用する：値の位置にカスタムコンテンツ（テキスト、画像、アイコン）を表示します
ポインターの動きをアニメーション化する：カスタマイズ可能な時間とイージング関数を設定します
インタラクティブなゲージを有効にする：値入力用にドラッグ可能なポインターを設定します
軸の外観をカスタマイズする：ラベル、目盛り、間隔、書式を設定します
ダッシュボードを構築する：温度、圧力、速度などの測定値を表示します
進行状況インジケーターを作成する：範囲と視覚的なフィードバックを提供します
問題を解決する：ゲージの描画、ポインターの位置、操作に関する問題に対処します

コンポーネントの概要

SfLinearGauge は、リニアスケール上に数値を表示する多目的データ可視化コントロールで、次の機能を備えています。

向き： 水平または垂直のゲージレイアウト
軸のカスタマイズ： ラベル、目盛り、間隔、カスタム範囲を設定可能なスケール
範囲のサポート： 値のカテゴリを可視化する複数の色分けされた範囲
3 種類のポインター：
- バーポインター： 開始位置から値までの塗りつぶされたバー
- シェイプポインター： 組み込みの形状またはカスタムテンプレートを使用したマーカー
- コンテンツポインター： 値の位置に表示するカスタムコンテンツ（テキスト、画像、アイコン）
複数のポインター： 同じスケール上に異なる値を示す複数のポインターを追加
アニメーション： カスタマイズ可能なイージング関数を使用した滑らかなポインター遷移
インタラクティブ機能： ユーザー入力用のドラッグ可能なシェイプポインター
カスタマイズ： 豊富なスタイル設定、テンプレート、グラデーション、子コンテンツのサポート
データバインディング： Value プロパティのバインディングに対応した MVVM フレンドリーな設計

コントロールの構造：

最小値、最大値、間隔を設定できる単一の軸
色分けされた値のセグメント用の複数の範囲
塗りつぶされたインジケーター用のバーポインターコレクション
シェイプポインターとコンテンツポインター用のマーカーポインターコレクション
外観、位置、動作を完全に制御

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

はじめに

📄 参照： references/getting-started.md

WinUI 3 デスクトップアプリケーションの作成
Syncfusion.Gauge.WinUI NuGet パッケージのインストール
XAML での Linear Gauge コントロールの追加
C# での Linear Gauge コントロールの追加
ゲージへの軸の追加
値の可視化用の範囲の追加
バーポインターの追加
マーカーポインター（シェイプとコンテンツ）の追加
完全な動作例

軸のカスタマイズ

📄 参照： references/axis-customization.md

最小値と最大値の設定
ラベル間の間隔の設定
軸の方向のカスタマイズ（IsInversed）
ミラー軸のサポート（IsMirrored）
軸の向き（水平／垂直）
100 ピクセルあたりの最大ラベル数
軸線のスタイル設定（線、太さ、色）
軸線の表示設定
ラベルのカスタマイズ（フォント、色、書式）
外観をカスタマイズするラベルテンプレート
ラベルの表示と配置（内側／外側）
ラベルの位置とオフセットの調整
目盛りのカスタマイズ（主目盛りと補助目盛り）
目盛りのスタイル設定と破線パターン
目盛りの配置とオフセット
カスタムスケール範囲（対数など）

範囲

📄 参照： references/ranges.md

範囲の開始値と終了値の設定
範囲の幅のカスタマイズ（StartWidth、MidWidth、EndWidth）
幅が等しい範囲と異なる範囲
背景色のカスタマイズ
複数のストップを持つグラデーションブラシのサポート
範囲の位置（内側／外側／軸をまたぐ）
軸要素への範囲色の使用
ラベル用の範囲内コンテンツのサポート

ポインター

📄 参照： references/pointers.md

3 種類のポインターの概要
バーポインターの実装とカスタマイズ
組み込みシェイプとカスタムシェイプを使用するシェイプポインター
テキスト、画像、アイコン用のコンテンツポインター
1 つのゲージに複数のポインターを配置
ポインターのドラッグとインタラクティブ操作
ポインターイベント（ValueChangeStarted、ValueChanging、ValueChanged、ValueChangeCompleted）
ポインターの配置とアンカー設定
ポインターのサイズとスタイル設定

アニメーション

📄 参照： references/animation.md

ポインターアニメーションの有効化
アニメーションの長さの設定
アニメーションのイージング関数
バーポインターへのアニメーションの適用
マーカーポインターへのアニメーションの適用
カスタムのアニメーションタイミングと効果

クイックスタートの例

次の最小限の動作例を使って、すぐに始められます。

1. 名前空間を追加

XAML：

<Window xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges">

C#：

using Syncfusion.UI.Xaml.Gauges;

2. 基本的なリニアゲージを作成（XAML）

<Window
    x:Class="GaugeApp.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">
    
    <Grid>
        <gauge:SfLinearGauge>
            <gauge:SfLinearGauge.Axis>
                <gauge:LinearAxis Minimum="0"
                                  Maximum="100"
                                  Interval="10">
                    <gauge:LinearAxis.BarPointers>
                        <gauge:BarPointer Value="60" />
                    </gauge:LinearAxis.BarPointers>
                </gauge:LinearAxis>
            </gauge:SfLinearGauge.Axis>
        </gauge:SfLinearGauge>
    </Grid>
</Window>

3. または、プログラムから作成（C#）

using Syncfusion.UI.Xaml.Gauges;

namespace GaugeApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // Create gauge programmatically
            SfLinearGauge sfLinearGauge = new SfLinearGauge();
            sfLinearGauge.Axis.Minimum = 0;
            sfLinearGauge.Axis.Maximum = 100;
            sfLinearGauge.Axis.Interval = 10;
            
            // Add bar pointer
            BarPointer barPointer = new BarPointer();
            barPointer.Value = 60;
            sfLinearGauge.Axis.BarPointers.Add(barPointer);
            
            this.Content = sfLinearGauge;
        }
    }
}

4. ポインターの値を設定（任意）

// Update pointer value
barPointer.Value = 75;

// With animation
barPointer.EnableAnimation = true;
barPointer.AnimationDuration = 1000; // 1 second
barPointer.Value = 90;

一般的なパターン

パターン 1：バーポインターを使った基本的な水平ゲージ

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Minimum="0" Maximum="100" Interval="10">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="60" Background="Green" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

パターン 2：垂直温度ゲージ

<gauge:SfLinearGauge Orientation="Vertical">
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Minimum="-60" Maximum="60" Interval="20">
            <gauge:LinearAxis.Ranges>
                <gauge:LinearGaugeRange StartValue="-60" EndValue="0" Background="Blue" />
                <gauge:LinearGaugeRange StartValue="0" EndValue="30" Background="Orange" />
                <gauge:LinearGaugeRange StartValue="30" EndValue="60" Background="Red" />
            </gauge:LinearAxis.Ranges>
            
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="25" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

パターン 3：複数のポインターを使ったゲージ

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="140" Interval="10">
            
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="90" />
            </gauge:LinearAxis.BarPointers>
            
            
            <gauge:LinearAxis.MarkerPointers>
                <gauge:LinearShapePointer Value="90"
                                          VerticalAnchor="End"
                                          OffsetPoint="0,-8" />
                
                
                <gauge:LinearContentPointer Value="90"
                                            VerticalAnchor="End"
                                            OffsetPoint="0,-28">
                    <gauge:LinearContentPointer.Content>
                        <TextBlock Text="90%" />
                    </gauge:LinearContentPointer.Content>
                </gauge:LinearContentPointer>
            </gauge:LinearAxis.MarkerPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

パターン 4：ドラッグ可能なポインターを備えたインタラクティブなゲージ

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis ShowTicks="False"
                          AxisLineStroke="CornflowerBlue"
                          AxisLineStrokeThickness="30">
            <gauge:LinearAxis.MarkerPointers>
                <gauge:LinearShapePointer Value="30"
                                          IsInteractive="True"
                                          OffsetPoint="0,-15"
                                          VerticalAnchor="End"
                                          Fill="Indigo"
                                          ValueChanged="OnPointerValueChanged" />
            </gauge:LinearAxis.MarkerPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

private void OnPointerValueChanged(object sender, ValueChangedEventArgs e)
{
    // Handle value change
    double newValue = e.NewValue;
}

パターン 5：色分けされた範囲を持つゲージ

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="140" Interval="10">
            <gauge:LinearAxis.Ranges>
                <gauge:LinearGaugeRange StartValue="0" EndValue="50" Background="Red" />
                <gauge:LinearGaugeRange StartValue="50" EndValue="100" Background="Orange" />
                <gauge:LinearGaugeRange StartValue="100" EndValue="140" Background="Green" />
            </gauge:LinearAxis.Ranges>
            
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="90" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

パターン 6：アニメーション付きのポインター更新

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Interval="10">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="60"
                                  EnableAnimation="True"
                                  AnimationDuration="1500">
                    <gauge:BarPointer.AnimationEasingFunction>
                        <CircleEase EasingMode="EaseOut" />
                    </gauge:BarPointer.AnimationEasingFunction>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

パターン 7：グラデーションのバーポインター

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="40">
                    <gauge:BarPointer.GradientStops>
                        <gauge:GaugeGradientStop Value="0" Color="#FFCC2B5E" />
                        <gauge:GaugeGradientStop Value="40" Color="#FF753A88" />
                    </gauge:BarPointer.GradientStops>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

パターン 8：ViewModel のデータバインディング

public class GaugeViewModel : INotifyPropertyChanged
{
    private double currentValue;
    
    public double CurrentValue
    {
        get => currentValue;
        set
        {
            currentValue = value;
            OnPropertyChanged(nameof(CurrentValue));
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
    
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="{x:Bind ViewModel.CurrentValue, Mode=TwoWay}" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

主要なプロパティのリファレンス

ゲージのプロパティ（SfLinearGauge）

プロパティ	型	説明
`Axis`	LinearAxis	リニア軸の構成を取得または設定します
`IsInversed`	bool	軸を反転するかどうか（右から左、または下から上）を取得または設定します
`IsMirrored`	bool	軸を反対側にミラーリングするかどうかを取得または設定します
`Orientation`	Orientation	ゲージの向きを取得または設定します：水平、垂直

軸のプロパティ（LinearAxis）

プロパティ	型	説明
`Minimum`	double	軸の最小値（既定値：0）
`Maximum`	double	軸の最大値（既定値：100）
`Interval`	double	軸上のラベル間隔
`ShowAxisLine`	bool	軸線を表示するか非表示にするか（既定値：true）
`ShowLabels`	bool	軸ラベルを表示するか非表示にするか（既定値：true）
`ShowTicks`	bool	目盛りを表示するか非表示にするか（既定値：true）
`AxisLineStroke`	Brush	軸線の色
`AxisLineStrokeThickness`	double	軸線の太さ
`LabelPosition`	GaugeLabelsPosition	ラベルの位置：内側、外側
`LabelOffset`	double	軸線とラベルの間隔
`LabelFormat`	string	ラベルの書式文字列（例：通貨の場合は "c"）
`TickPosition`	GaugeElementPosition	目盛りの位置：内側、外側、軸をまたぐ
`MajorTickLength`	double	主目盛りの長さ
`MinorTickLength`	double	補助目盛りの長さ
`MinorTicksPerInterval`	int	1 区間あたりの補助目盛りの数
`UseRangeColorForAxis`	bool	軸ラベルと目盛りに範囲色を適用します

ポインターのプロパティ（ベース：LinearGaugePointer）

プロパティ	型	説明
`Value`	double	ポインターの現在値
`EnableAnimation`	bool	ポインターのアニメーションを有効にします（デフォルト：false）
`AnimationDuration`	double	アニメーションの時間（ミリ秒、デフォルト：1500）
`AnimationEasingFunction`	EasingFunctionBase	アニメーションのイージング関数

バーポインターのプロパティ

プロパティ	型	説明
`Background`	Brush	バーポインターの塗りつぶし色
`PointerSize`	double	バーポインターの太さ
`CornerStyle`	CornerStyle	角のスタイル：BothFlat、BothCurve、StartCurve、EndCurve
`Offset`	double	軸線からの距離（正の値：内側、負の値：外側）
`GradientStops`	ObservableCollection	色の変化に使用するグラデーション停止位置のコレクション
`Child`	UIElement	バーポインター内に表示する子コンテンツ

形状ポインターのプロパティ（LinearShapePointer）

プロパティ	型	説明
`ShapeType`	GaugeShapeType	形状：Circle、Diamond、Triangle、InvertedTriangle、Rectangle
`ShapeHeight`	double	形状ポインターの高さ
`ShapeWidth`	double	形状ポインターの幅
`Fill`	Brush	形状の塗りつぶし色
`Stroke`	Brush	形状の境界線の色
`StrokeThickness`	double	形状の境界線の太さ
`HasShadow`	bool	影の効果を有効にします（デフォルト：false）
`IsInteractive`	bool	ドラッグを有効にします（デフォルト：false）
`ShapeTemplate`	DataTemplate	カスタム形状テンプレート
`OffsetPoint`	Point	デフォルト位置からのX/Yオフセット
`HorizontalAnchor`	GaugeAnchor	水平方向の配置：Start、Center、End
`VerticalAnchor`	GaugeAnchor	垂直方向の配置：Start、Center、End

コンテンツポインターのプロパティ（LinearContentPointer）

プロパティ	型	説明
`Content`	object	カスタムコンテンツ（TextBlock、Imageなど）
`OffsetPoint`	Point	デフォルト位置からのX/Yオフセット
`HorizontalAnchor`	GaugeAnchor	水平方向の配置：Start、Center、End
`VerticalAnchor`	GaugeAnchor	垂直方向の配置：Start、Center、End

範囲のプロパティ（LinearGaugeRange）

プロパティ	型	説明
`StartValue`	double	範囲の開始値
`EndValue`	double	範囲の終了値
`StartWidth`	double	範囲の開始位置での幅
`MidWidth`	double	範囲の中間位置での幅（任意）
`EndWidth`	double	範囲の終了位置での幅
`Background`	Brush	範囲の塗りつぶし色
`RangePosition`	GaugeElementPosition	位置：Inside、Outside、Cross
`GradientStops`	ObservableCollection	色の変化に使用するグラデーション停止位置のコレクション
`Child`	UIElement	範囲内に表示する子コンテンツ

一般的な使用例

天気アプリの温度ゲージ

現在の気温を表示する垂直温度ゲージを作成します。温度範囲を色分けし（寒色は青、適温はオレンジ、高温は赤）、ポインターの遷移をアニメーション化します。

バッテリー残量インジケーター

緑／黄／赤の範囲を持つ水平バッテリー残量ゲージを作成します。バーポインターで充電レベルを示し、コンテンツポインターでパーセンテージを表示します。

車両ダッシュボードの速度計

10単位ごとの目盛り、現在の速度を示す形状ポインター、速度制限を示す範囲インジケーターを備えた、水平または垂直の速度計を実装します。

パーセンテージ付きプログレスバー

角を丸めたバーポインターを使用して進捗インジケーターを作成します。子コンテンツにパーセンテージを表示し、値の更新時には滑らかなアニメーションを適用します。

産業用モニタリングの圧力計

カスタムの軸範囲、安全／警告／危険ゾーンを示す複数の範囲、しきい値を調整できるインタラクティブなポインターを備えた圧力計を設計します。

音量調整スライダー

ドラッグ可能な図形ポインターを備えた横向きゲージ、カスタム軸スタイル、値変更イベントを使用して、音量調整用のインタラクティブなコントロールを作成します。

データ分析ダッシュボード

複数のリニアゲージを使ったダッシュボードパネルを作成します。各ゲージの向き、配色、範囲を変えて、パフォーマンスを可視化します。

システムリソースモニター

アニメーション付きのバー型ポインターと、リソースの使用状況を示すグラデーション塗りつぶしを備えた CPU／メモリ／ディスク使用率ゲージを実装し、値をリアルタイムで更新します。

次のステップ： 実装したい内容に合わせて、上記のリファレンスドキュメントを参照してください。初期設定は getting-started.md から始め、必要に応じて個別の機能を確認してください。

Markdown 対応

ログインしてコメント

基本情報

作者: syncfusion
リポジトリ: syncfusion/winui-ui-components-skills
カテゴリ: デザイン・UI
インストール数: 48
GitHub スター: 1

問題を報告