syncfusion-maui-linear-gauge

.NET MAUI 線形ゲージの実装

Syncfusion® .NET MAUI Linear Gauge（SfLinearGauge）は、線形目盛り上に値を表示する強力なデータ可視化コントロールです。.NET MAUI アプリケーションで、直感的な計測表示、進捗インジケーター、温度計のような可視化、インタラクティブなスライダーコントロールを作成するために使用できます。

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

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

• 線形目盛りで測定値を表示する - 温度、圧力、容量、速度などの線形指標
• 進捗インジケーターを作成する - ダウンロードの進捗、タスクの完了状況、視覚的なフィードバックを伴う読み込み状態
• インタラクティブなゲージを構築する - ユーザーが調整できるスライダー、ドラッグ可能な値セレクター
• パフォーマンス範囲を表示する - 色分けされたゾーン（例：赤／黄／緑のパフォーマンスインジケーター）
• 複数のデータポイントを可視化する - 比較のために同じ目盛り上に複数のポインターを表示
• 縦向きまたは横向きの表示を実装する - 温度計、燃料計、バッテリーインジケーター
• アニメーション付きの可視化を作成する - 値の変更時に滑らかに遷移
• ミラーリングされたゲージレイアウトを構築する - RTL 対応または対称的なデュアル表示

コンポーネントの概要

主な機能：

• 柔軟な向き - 縦向きまたは横向きのレイアウト
• カスタマイズ可能な目盛り - 最小値／最大値、間隔、外観を調整可能
• 複数のポインタータイプ - バーポインター、形状マーカー、カスタムコンテンツマーカー
• 視覚的な範囲 - 特定の値の範囲を強調表示する色分けされたゾーン
• インタラクティブなジェスチャー - ドラッグやスワイプによるポインター値の変更
• 豊富なカスタマイズ - ラベル、目盛り線、スタイル、グラデーション、角のスタイル
• アニメーション対応 - 値の滑らかな遷移と読み込みアニメーション
• ミラー効果 - RTL レイアウトと対称的なデザイン

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

はじめに

📄 参照： references/getting-started.md

参照する場面： 初回セットアップ、インストール、または基本的な実装

取り上げるトピック：

• Syncfusion.Maui.Gauges NuGet パッケージのインストール
• MauiProgram.cs でのハンドラーの登録
• 最初の線形ゲージの作成
• 基本的な目盛り要素の追加
• 範囲とポインターの追加
• 完全な動作例
• セットアップの問題のトラブルシューティング

目盛りの構成

📄 参照： references/scale-configuration.md

参照する場面： ゲージの目盛りプロパティ、最小値／最大値、間隔、または外観の構成

取り上げるトピック：

• 目盛りの既定の動作（0～100）
• 最小値と最大値のカスタマイズ
• 目盛りの間隔の設定
• 目盛りの外観（太さ、塗りつぶし色、端のスタイル）
• 向き（縦向きと横向き）
• 逆向きの目盛り（値の方向を反転）
• 目盛りの位置とオフセット
• 一般的な目盛りパターン

ラベルと目盛り線

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

参照する場面： 目盛りラベルのカスタマイズ、テキストの書式設定、または目盛り線の構成

取り上げるトピック：

• ラベルの位置と配置
• ラベルテキストの書式設定（数値形式、カスタムテキスト）
• ラベルのスタイル設定（フォント、色、サイズ）
• ラベルのオフセットと表示設定
• 主目盛り線の構成
• 補助目盛り線の構成
• 目盛り線の位置、長さ、スタイル
• 目盛り線またはラベルの非表示
• 完全なカスタマイズ例

範囲

📄 参照： references/ranges.md

参照する場面： 視覚的な範囲、色分けされたゾーン、またはパフォーマンスインジケーターの追加

取り上げるトピック：

• 範囲の概要と目的
• 基本的な範囲の実装
• 範囲の形状のカスタマイズ（開始／中間／終了の幅）
• 範囲の位置（開始値／終了値）
• 範囲のスタイル設定（単色の塗りつぶし、グラデーション）
• 同じ目盛り上に複数の範囲を設定
• 目盛りに対する範囲の位置
• 角のスタイルと外観
• パフォーマンスゾーンと色分けの例

バーポインター

📄 参照： references/bar-pointer.md

参照するタイミング： バー形式のポインター（塗りつぶされたプログレスバー）を実装するとき

対象トピック：

• バーポインターの概要
• 基本的なバーポインターの実装
• ポインターの値と位置の設定
• バーのスタイル設定（塗りつぶし、グラデーション、不透明度）
• バーの角のスタイル
• バーのオフセットと配置
• 値の変更時のアニメーション
• 複数のバーポインター
• ポインターのイベント
• バーポインターの一般的なパターン

マーカーポインター

📄 参照： references/marker-pointers.md

参照するタイミング： 形状マーカーまたはカスタムコンテンツポインターを追加するとき

対象トピック：

• 形状マーカーポインター（組み込みの形状）
  • 使用可能な形状：円、三角形、ひし形、逆三角形、長方形
  • 形状のサイズ、塗りつぶし、線のカスタマイズ
  • 形状の配置とオフセット
• コンテンツマーカーポインター（カスタムコンテンツ）
  • 画像をポインターとして使用
  • テキストベースのポインター
  • カスタムビューをポインターとして使用
  • コンテンツの配置と位置調整
• 同じスケール上の複数のマーカーポインター
• マーカーのアニメーション効果
• マーカーの一般的なパターンと使用例

インタラクション

📄 参照： references/interaction.md

参照するタイミング： ユーザー操作、ドラッグジェスチャー、またはポインターイベントを有効にするとき

対象トピック：

• インタラクションの概要
• IsInteractive プロパティの有効化
• ドラッグジェスチャーの処理
• スワイプジェスチャーの処理
• ValueChangeStarted イベント
• ValueChanging イベント（リアルタイム更新）
• ValueChangeCompleted イベント
• ポインターの移動の制約
• インタラクティブなポインターの例
• 複数ポインターのインタラクションシナリオ

アニメーションと効果

📄 参照： references/animation-and-effects.md

参照するタイミング： アニメーション、ミラー効果、または特殊な視覚効果を追加するとき

対象トピック：

• アニメーションの概要
• 読み込み時のアニメーションの有効化
• アニメーションの再生時間とイージング
• 値の変更時のポインターアニメーション
• 範囲のアニメーション効果
• ミラーゲージ効果（IsMirrored）
• RTL サポートとミラー表示のレイアウト
• 向きの変更とトランジション
• アニメーションの完全な例