syncfusion-wpf-range-selector

範囲セレクターの実装

インタラクティブなスクロール機能と、大規模な期間を移動するナビゲーション機能を備えた、時間ベースのデータ可視化向け Syncfusion® WPF 範囲セレクター（SfDateTimeRangeNavigator）コントロールの実装ガイドです。

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

次のような場合に、このスキルを使用します。

• スクロールとズームで大規模な時間ベースのデータセットを移動する
• 大きなデータ期間から特定の日付と時刻の範囲を選択する
• 範囲ベースのデータフィルタリングを備えたインタラクティブなダッシュボードを作成する
• 時間範囲を選択してチャートをズームする
• 階層型の時間ラベル（年／月、四半期／月など）を表示する
• データ探索のため、ほかの可視化（チャート、グリッド）と組み合わせる
• 視覚的なフィードバックとツールチップを備えたデータ範囲の選択を有効にする

範囲セレクターコントロールは、大規模な時系列データの一部をユーザーが探索して選択する必要がある場面に最適です。ラベルをスマートに計算する、直感的なスクロールバーインターフェイスを提供します。

コンポーネントの概要

SfDateTimeRangeNavigator は、時間ベースのデータを移動するための専用コントロールで、次の主要な機能を備えています。

主な機能：

• インタラクティブなナビゲーション： 大規模なデータセットをスクロールおよびズームして移動します
• 2 階層のラベル： 階層型の時間表示（上位／下位のラベルバー）
• スマートラベル： ズーム時にラベルを自動的に計算します
• 範囲選択： 範囲を正確に選択できるサイズ変更可能なスクロールバー
• コンテンツの統合： チャート、スパークライン、または任意の UI 要素を埋め込みます
• データバインディング： プロパティバインディングによる標準的な WPF IEnumerable のサポート

一般的なシナリオ：

• 金融データの探索（株価、取引量）
• 日付範囲でフィルタリングする履歴データの分析
• 同期されたビュー向けのダッシュボード範囲コントロール
• 視覚的なプレビューを備えた時系列データの選択

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

はじめに

📄 参照： references/getting-started.md

次のような場合に参照します。

• 視覚的な構造（上位／下位のバー、コンテンツ、スクロールバー）を理解する
• アセンブリ参照を追加し、パッケージをインストールする
• SfDateTimeRangeNavigator コントロールを初期化する
• ItemsSource を設定し、日付と時刻のデータにバインドする
• ナビゲーター内にコンテンツ（チャート、スパークライン）を追加する
• コードビハインドから範囲ナビゲーターを作成する
• コントロールにテーマを適用する

このリファレンスでは、インストールから最初に動作する実装まで、セットアップの全手順を説明します。

インタラクティブ機能とイベント

📄 参照： references/interactivity.md

次のような場合に参照します。

• ズームおよびパン機能を実装する
• ZoomPosition と ZoomFactor をチャートの軸にバインドする
• 選択した範囲からデータを取得する
• 範囲更新のために ValueChanged イベントを処理する
• つまみの外観（左／右のスライダー）をカスタマイズする
• つまみの SymbolTemplate と LineStyle を設定する
• 上位および下位バーのスタイルをカスタマイズする
• パフォーマンス向上のため、遅延更新を有効にする
• LowerBarLabelsCreated／UpperBarLabelsCreated イベントを処理する

このリファレンスでは、すべてのインタラクティブ機能とイベント処理について説明します。

ラベルのカスタマイズ

📄 参照： references/label-customization.md

次のような場合に参照します。

• 間隔の種類（Year、Quarter、Month、Week、Day、Hour）を設定する
• LabelFormatters でラベルの書式をカスタマイズする
• 選択済みおよび未選択のラベルにスタイルを設定する
• バーの内側または外側にラベルを配置する
• ラベルバーの表示を制御する
• RangePadding（None、Round）を設定する
• グリッド線と目盛線をカスタマイズする
• スマートラベルの計算動作を理解する

このリファレンスでは、ラベルと間隔のカスタマイズについてすべて説明します。

ツールチップの設定

📄 参照： references/tooltip-support.md

次のような場合に参照します。

• スライダーのつまみでツールチップを有効にする
• ツールチップの日付と時刻の表示形式を設定する
• 左右のツールチップテンプレートをカスタマイズする
• 選択した範囲の値を精度を保って表示する

このリファレンスでは、ツールチップの表示とカスタマイズについて説明します。

トラブルシューティング

📄 参照： references/troubleshooting.md

次の問題が発生した場合：

• アセンブリ参照の問題
• データバインディングの問題、または ItemsSource のエラー
• コンテンツが正しく表示されない
• ズームバインディングがチャートと同期しない
• 大規模なデータセットでのパフォーマンスの問題
• テーマの適用に関する問題
• ライセンス関連のエラー

このリファレンスでは、一般的な問題の解決策を紹介しています。

クイックスタートの例

チャートを備えた基本的な Range Navigator

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    <Grid>
        
        <syncfusion:SfChart x:Name="Chart" Margin="10">
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:DateTimeAxis 
                    ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}"
                    ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"/>
            </syncfusion:SfChart.PrimaryAxis>
            
            <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis/>
            </syncfusion:SfChart.SecondaryAxis>
            
            <syncfusion:LineSeries ItemsSource="{Binding Data}" 
                                   XBindingPath="Date" 
                                   YBindingPath="Value"/>
        </syncfusion:SfChart>
        
        
        <syncfusion:SfDateTimeRangeNavigator x:Name="RangeNavigator"
                                             ItemsSource="{Binding Data}"
                                             XBindingPath="Date"
                                             VerticalAlignment="Bottom"
                                             Height="100"
                                             Margin="10">
            <syncfusion:SfDateTimeRangeNavigator.Content>
                <syncfusion:SfLineSparkline ItemsSource="{Binding Data}"
                                            YBindingPath="Value"/>
            </syncfusion:SfDateTimeRangeNavigator.Content>
        </syncfusion:SfDateTimeRangeNavigator>
    </Grid>
</Window>

ViewModel

public class DataViewModel : INotifyPropertyChanged
{
    public ObservableCollection<DataPoint> Data { get; set; }
    
    public DataViewModel()
    {
        Data = new ObservableCollection<DataPoint>();
        DateTime startDate = DateTime.Today.AddYears(-1);
        
        for (int i = 0; i < 365; i++)
        {
            Data.Add(new DataPoint 
            { 
                Date = startDate.AddDays(i), 
                Value = 50 + (i % 30) 
            });
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
}

public class DataPoint
{
    public DateTime Date { get; set; }
    public double Value { get; set; }
}

一般的なパターン

パターン 1：Range Navigator とチャートの同期

同期したナビゲーションを行うには、ナビゲーターのズームプロパティをチャートの軸にバインドします。

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis 
            ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}"
            ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"/>
    </syncfusion:SfChart.PrimaryAxis>
</syncfusion:SfChart>

<syncfusion:SfDateTimeRangeNavigator x:Name="RangeNavigator"
                                     ItemsSource="{Binding Data}"
                                     XBindingPath="Date"/>

パターン 2：選択したデータの取得

選択範囲内のデータにアクセスします。

private void OnRangeChanged(object sender, EventArgs e)
{
    var navigator = sender as SfDateTimeRangeNavigator;
    var selectedData = navigator.SelectedData;
    
    // Process selected data
    ProcessDataInRange(selectedData);
}

パターン 3：カスタム間隔の設定

ラベルバーに特定の間隔タイプを設定します。

<syncfusion:SfDateTimeRangeNavigator ItemsSource="{Binding Data}" 
                                     XBindingPath="Date">
    <syncfusion:SfDateTimeRangeNavigator.Intervals>
        <syncfusion:Interval IntervalType="Year"/>
        <syncfusion:Interval IntervalType="Month"/>
    </syncfusion:SfDateTimeRangeNavigator.Intervals>
</syncfusion:SfDateTimeRangeNavigator>

パターン 4：パフォーマンス向上のための更新の遅延

大規模なデータセットでは、更新の遅延を有効にします。

<syncfusion:SfDateTimeRangeNavigator EnableDeferredUpdate="True"
                                     DeferredUpdateDelay="500"
                                     ItemsSource="{Binding LargeDataset}"
                                     XBindingPath="Date"/>

主なプロパティ

データバインディング

• ItemsSource - データコレクション（IEnumerable を実装する必要があります）
• XBindingPath - 日時値のプロパティ名
• Content - ナビゲーター内に表示する UI 要素（チャート、スパークラインなど）

範囲とズーム

• ZoomPosition - 現在のズーム位置（0.0～1.0）
• ZoomFactor - 現在のズームレベル（0.0～1.0）
• Minimum - ナビゲーターの開始範囲
• Maximum - ナビゲーターの終了範囲
• ViewRangeStart - 選択範囲の開始値（読み取り専用）
• ViewRangeEnd - 選択範囲の終了値（読み取り専用）
• SelectedData - 選択範囲内のデータコレクション（読み取り専用）

間隔とラベル

• Intervals - ラベルバーの間隔設定コレクション
• HigherLevelBarStyle - 上位ラベルバーのスタイル
• LowerLevelBarStyle - 下位ラベルバーのスタイル
• RangePadding - パディングの種類（None、Round）

インタラクティブ機能

• EnableDeferredUpdate - スクロール／パン中の更新を遅延します
• DeferredUpdateDelay - 更新を遅延する時間（ミリ秒）
• ShowGridLines - コンテンツ内のグリッド線を表示／非表示にします
• ShowToolTip - スライダーつまみのツールチップを有効／無効にします
• ToolTipLabelFormat - ツールチップの日付時刻形式

カスタマイズ

• LeftThumbStyle - 左側のスライダーつまみのスタイル
• RightThumbStyle - 右側のスライダーつまみのスタイル
• LeftToolTipTemplate - 左側のツールチップのテンプレート
• RightToolTipTemplate - 右側のツールチップのテンプレート

一般的なユースケース

金融ダッシュボード

株価チャートに範囲選択機能を加え、特定の期間を詳しく分析できるようにします。ユーザーは数年分のデータをスクロールし、特定の取引日にズームインできます。

システム監視

システム指標を時系列で監視し、異常が発生した特定の期間を選択して分析できます。

売上分析

複数年、四半期、月にわたる売上データを確認し、階層型の時間ラベルで異なる時間スケールのパターンを表示できます。

気象データの可視化

過去の気象データを確認し、比較や分析のために特定の日付範囲を選択できます。

IoT センサーデータ

長期間にわたるセンサーの測定値を確認し、詳しく調査するための特定の時間枠を選択できます。

他のコントロールとの統合

Range Selector は、次のコントロールとシームレスに連携します。

• SfChart - ズームとパンを同期します
• SfLineSparkline - コンテンツ領域で軽量なデータプレビューを表示します
• DataGrid - 選択範囲に基づいてグリッドデータをフィルタリングします
• カスタムの可視化 - 任意の UI 要素をコンテンツとして埋め込めます

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

大規模なデータセットで最適なパフォーマンスを得るには：

• EnableDeferredUpdate を有効にして、更新頻度を減らします
• 軽量なレンダリングを行うため、コンテンツ領域ではフルチャートの代わりに SfLineSparkline を使用します
• 非常に大規模なデータセットでは、データ仮想化を検討します
• データサイズに応じて DeferredUpdateDelay を適切に設定します

関連スキル

• チャートの実装 - チャートの実装に関する詳細
• 親ライブラリ： Syncfusion WPF コンポーネントの実装

---

次のステップ： 現在の実装ニーズに応じて、上記の適切なリファレンスファイルに移動してください。