syncfusion-wpf-digital-gauge

デジタルゲージの実装（SfDigitalGauge）

SfDigitalGauge コントロールは、英数字をデジタル LED 風のセグメントで表示します。WPF アプリケーションで仮想デジタルディスプレイ、時計、スピードメーター、カウンターを作成するのに最適です。

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

次のような場合は、SfDigitalGauge を使用してください。

• 数値を表示する（時計、タイマー、カウンターなど）
• ダッシュボードや計器パネル用のデジタルディスプレイを作成する
• 英数字のテキストを表示する（製品コード、ステータスメッセージなど）
• 速度や距離を表示するデジタルスピードメーターやオドメーターを作成する
• クラシックな LED セグメントの外観を備えたレトロスタイルのデジタルインターフェイスを作成する
• 特殊文字を表示する（ドットマトリックス形式）
• リアルタイムで更新されるディスプレイを実装する（ライブデータフィード、センサーの読み取り値など）

コンポーネントの種類： データ可視化コントロール
プラットフォーム： Windows Presentation Foundation（WPF）
パッケージ： Syncfusion.SfGauge.WPF

---

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

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください。

• WPF プロジェクトに SfDigitalGauge をインストールして構成する
• アセンブリ参照を追加する（NuGet、ツールボックス、または手動）
• XAML と C# コードの名前空間を設定する
• 初回使用時にコントロールを初期化する
• 基本的な値を表示する
• テーマのサポートを適用する

文字の種類とセグメント

📄 参照： references/character-types.md

次のような場合に参照してください。

• 4 種類のセグメント表示から選択する
• 数字のみを表示する（7 セグメント）
• 数字とアルファベットを表示する（14 セグメントまたは 16 セグメント）
• 特殊文字を表示する（8×8 ドットマトリックス）
• 用途に応じた CharacterType を理解する
• セグメントの種類を視覚的に比較する

カスタマイズとスタイル設定

📄 参照： references/customization.md

次のような場合に参照してください。

• 文字の寸法（高さ、幅）を調整する
• 文字間の間隔を調整する
• 文字のストローク色を変更する
• 暗く表示する（非アクティブな）セグメントをスタイル設定する
• 背景セグメントの不透明度を調整する
• 見栄えのよいディスプレイを作成する

変形

📄 参照： references/transformations.md

次のような場合に参照してください。

• 文字を拡大・縮小する
• 傾斜変形を適用する
• 傾いたデジタルディスプレイを作成する
• X 軸または Y 軸に沿って文字を変形する
• 遠近効果を実装する

セグメントのスタイル設定と高度な機能

📄 参照： references/segment-styling.md

次のような場合に参照してください。

• セグメントの太さを調整する
• 右から左（RTL）のテキスト方向を有効にする
• 外観を細かく調整する
• 背景色に合わせる

---

クイックスタート

基本的なデジタルディスプレイ

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    <gauge:SfDigitalGauge Value="12345" />
</Window>

using Syncfusion.UI.Xaml.Gauges;

SfDigitalGauge digitalGauge = new SfDigitalGauge();
digitalGauge.Value = "12345";
this.Content = digitalGauge;

デジタル時計表示

<gauge:SfDigitalGauge Value="11:59:50 PM"
                      Height="100"
                      Width="375"
                      CharacterHeight="60"
                      CharacterWidth="25"
                      CharacterType="EightCrossEightDotMatrix"
                      CharacterStroke="#146CED"
                      DimmedBrush="#F2F2F2"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center" />

SfDigitalGauge clock = new SfDigitalGauge();
clock.Value = "11:59:50 PM";
clock.Height = 100;
clock.Width = 375;
clock.CharacterHeight = 60;
clock.CharacterWidth = 25;
clock.CharacterType = CharacterType.EightCrossEightDotMatrix;
clock.CharacterStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#146CED");
clock.DimmedBrush = (SolidColorBrush)new BrushConverter().ConvertFrom("#F2F2F2");
clock.HorizontalAlignment = HorizontalAlignment.Center;
clock.VerticalAlignment = VerticalAlignment.Center;

---

よくあるパターン

パターン 1：シンプルな数値カウンター

数字のみの場合は、7 セグメント表示を使用します。

<gauge:SfDigitalGauge Value="12345" 
                      CharacterType="SegmentSeven"
                      CharacterHeight="40"
                      CharacterWidth="20"
                      CharacterStroke="Red" />

使用場面： 0～9 の数字だけが必要なカウンター、タイマー、数値表示。

パターン 2：英数字ディスプレイ

テキストと数字には、14 セグメントまたは 16 セグメントを使用します。

<gauge:SfDigitalGauge Value="SPEED 088" 
                      CharacterType="SegmentFourteen"
                      CharacterHeight="50"
                      CharacterWidth="30"
                      CharacterStroke="Green" />

使用場面： ステータスメッセージ、製品コード、英数字が混在するラベル。

パターン 3：特殊文字向けドットマトリックス

幅広い文字をサポートするには、8×8 ドットマトリックスを使用します。

<gauge:SfDigitalGauge Value="SYNC@2024!" 
                      CharacterType="EightCrossEightDotMatrix"
                      CharacterHeight="60"
                      CharacterWidth="35"
                      CharacterStroke="Orange" />

使用場面： メールアドレス、URL、特殊記号、複雑なテキスト表示。

パターン 4：スタイル設定済みダッシュボードディスプレイ

包括的なスタイル設定を適用して、プロフェッショナルな外観にします。

<gauge:SfDigitalGauge Value="TEMP 72°F"
                      CharacterType="SegmentSixteen"
                      CharacterHeight="55"
                      CharacterWidth="32"
                      CharactersSpacing="8"
                      CharacterStroke="#00FF00"
                      DimmedBrush="#1A1A1A"
                      DimmedBrushOpacity="30"
                      SegmentThickness="3" />

使用場面： 明瞭な視認性が求められるダッシュボードパネル、制御室、監視用ディスプレイ。

パターン 5：傾斜したデジタルスピードメーター

動的な遠近効果を作成します。

<gauge:SfDigitalGauge Value="125 MPH"
                      CharacterType="SegmentSeven"
                      CharacterHeight="70"
                      CharacterWidth="40"
                      SkewAngleX="15"
                      CharacterStroke="Cyan" />

使用場面： スピードメーター、レーシングダッシュボード、動きを感じさせる動的なディスプレイ。

---

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

プロパティ	型	説明
Value	string	表示する英数字のテキスト
CharacterType	Enum	セグメントの種類：SegmentSeven、SegmentFourteen、SegmentSixteen、EightCrossEightDotMatrix
CharacterHeight	double	文字ごとの高さ（ピクセル）
CharacterWidth	double	文字ごとの幅（ピクセル）
CharactersSpacing	double	文字間の距離
CharacterStroke	Brush	アクティブ（点灯中）セグメントの色
DimmedBrush	Brush	非アクティブ（減光中）セグメントの色
DimmedBrushOpacity	double	減光中のセグメントの不透明度（0-100）
SegmentThickness	double	セグメント線の太さ
SkewAngleX	double	水平方向の傾斜角度（度）
SkewAngleY	double	垂直方向の傾斜角度（度）
EnableRTLFormat	bool	右から左へのテキスト方向を有効にします

---

一般的な使用例

1. リアルタイム時計の表示

更新されるセグメントで現在時刻を表示します：

// Update timer every second
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(1);
timer.Tick += (s, e) => digitalGauge.Value = DateTime.Now.ToString("hh:mm:ss tt");
timer.Start();

2. カウントダウンタイマー

イベント用のカウントダウン表示を作成します：

TimeSpan remaining = TimeSpan.FromMinutes(10);
digitalGauge.Value = remaining.ToString(@"mm\:ss");

3. センサー値のリアルタイム表示

適切な書式でセンサーデータを表示します：

digitalGauge.Value = $"TEMP {sensorReading:F1}°C";
digitalGauge.CharacterType = CharacterType.SegmentSixteen;

4. デジタルオドメーター

先頭にゼロを付けて距離を表示します：

double miles = 12345.6;
digitalGauge.Value = miles.ToString("000000.0");
digitalGauge.CharacterType = CharacterType.SegmentSeven;

5. ステータスインジケーター

システムのステータスメッセージを表示します：

digitalGauge.Value = isOnline ? "ONLINE" : "OFFLINE";
digitalGauge.CharacterStroke = isOnline ? Brushes.Green : Brushes.Red;
digitalGauge.CharacterType = CharacterType.SegmentFourteen;

---

ベストプラクティス

1. 適切なCharacterTypeを選択します：

   • 数字のみ → SegmentSeven
   • 数字と文字 → SegmentFourteenまたはSegmentSixteen
   • 特殊文字 → EightCrossEightDotMatrix

2. 読みやすさを確保します：

   • 適切なCharacterHeightを使用します（多くの場合、40-70px）
   • 適切なCharactersSpacingを設定します（5-15px）
   • コントラストの高いCharacterStrokeの色を選択します

3. 減光中のセグメントを最適化します：

   • DimmedBrushを背景に合わせます
   • DimmedBrushOpacityを調整し（20-40）、控えめな効果にします

4. パフォーマンスに関する考慮事項：

   • Valueを頻繁に更新すること（間隔が50ms未満）は避けます
   • 文字列の書式設定を使用して、不要な更新を防ぎます

5. アクセシビリティ：

   • スクリーンリーダー向けにテキストによる代替情報を提供します
   • 十分な色のコントラストを確保します
   • 視覚に障害のあるユーザーに配慮します

---

関連スキル

• ラジアルゲージの実装 - 円形ゲージの表示に使用します
• 範囲セレクターの実装 - 範囲ベースのデータ可視化に使用します
• WPFのテーマ設定 - 一貫性のあるテーマの適用に使用します

---

追加リソース

• Syncfusion Digital Gaugeのドキュメント
• Theme Studio
• GitHubのサンプル