syncfusion-wpf-datapager

DataPager の実装

WPF アプリケーションで大規模なデータセットをページ分割するための、Syncfusion WPF DataPager（SfDataPager）の実装ガイドです。DataPager コントロールは、ナビゲーションボタン、ページ番号ボタン、柔軟なデータバインディングオプションを提供し、データを扱いやすいページに分割します。

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

次のことが必要な場合に、このスキルを使用してください。

• WPF アプリケーションで大規模なデータセットをページ分割する
• ページナビゲーションコントロール（先頭、末尾、次へ、前へボタン）を追加する
• データを扱いやすいページサイズで表示する
• 大規模なデータセットに対してオンデマンドページングを実装する
• ページ分割されたデータを任意の ItemsControl（DataGrid、ListBox、ListView）にバインドする
• ページネーションの外観（色、表示モード、向き）をカスタマイズする
• ページ変更イベントと検証を処理する
• ページ番号ボタンを使用したページ分割ビューを作成する
• 実行時にページサイズを変更する
• ページ間をプログラムで移動する

コンポーネントの概要

SfDataPager は、データコレクションをページに分割し、ナビゲーション UI を提供する WPF コントロールです。

• ナビゲーションボタン：先頭、末尾、前のページ、次のページのボタン
• ページ番号ボタン：ページへの直接アクセス（例：1、2、3、4、5）
• 自動省略記号：ページ数がページ番号ボタンの数を超えると、省略記号ボタンを表示します
• 柔軟なバインディング：PagedSource プロパティを介して、任意の ItemsControl で動作します
• オンデマンドページング：現在のページのデータのみを動的に読み込みます
• イベント：検証とカスタムロジックに使用する PageIndexChanging および PageIndexChanged
• 外観：色、表示モード、向きをカスタマイズできます

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

はじめに

📄 参照： references/getting-started.md

• 必須アセンブリ（Syncfusion.SfGrid.WPF、Syncfusion.Data.WPF）
• コントロールの構造と要素
• 最初の SfDataPager アプリケーションの作成
• SfDataGrid との統合
• ツールボックスへの SfDataPager の追加
• テーマのサポートとテーマ設定

データバインディングとページング

📄 参照： references/data-binding.md

• Source プロパティと PagedSource プロパティ
• PageIndex プロパティとイベント
• ListBox、ListView、その他の ItemsControl へのバインディング
• UseOnDemandPaging を使用したオンデマンドページング
• 動的なデータ読み込みに使用する LoadDynamicItems メソッド
• PageSize の設定
• ComboBox を使用した実行時の PageSize の変更

外観とスタイル

📄 参照： references/appearance.md

• AutoEllipsisMode（After、Before、Both、None）
• AccentBackground と AccentForeground の色
• NumericButtonStyle のカスタマイズ
• DisplayMode のオプション（12 種類のモード）
• Orientation（Horizontal、Vertical）

ページナビゲーション

📄 参照： references/page-navigation.md

• MoveToFirstPage()、MoveToLastPage() メソッド
• MoveToNextPage()、MoveToPreviousPage() メソッド
• 直接移動するための MoveToPage(int pageIndex)
• 検証に使用する PageIndexChanging イベント
• ページ変更前のユーザーとのやり取り

スタイルとテンプレート

📄 参照： references/styles-templates.md

• Expression Blend でのスタイル編集
• Visual Studio でのスタイル編集
• Edit a Copy と Create Empty のオプション
• カスタムコントロールテンプレート
• リソース管理

クイックスタートの例

SfDataGrid と統合した基本的な SfDataPager：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sfgrid="clr-namespace:Syncfusion.UI.Xaml.Grid;assembly=Syncfusion.SfGrid.WPF"
        xmlns:datapager="clr-namespace:Syncfusion.UI.Xaml.Controls.DataPager;assembly=Syncfusion.SfGrid.WPF">
    
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        
        
        <sfgrid:SfDataGrid AutoGenerateColumns="True"
                           ItemsSource="{Binding ElementName=sfDataPager, Path=PagedSource}"/>
        
        
        <datapager:SfDataPager x:Name="sfDataPager"
                               Grid.Row="1"
                               NumericButtonCount="10"
                               PageSize="10"
                               Source="{Binding OrdersDetails}"/>
    </Grid>
</Window>

主な概念：

• Source：データコレクション（例：OrdersDetails）にバインドします
• PagedSource：ItemsControl 用に PagedCollectionView で自動的にラップされます
• PageSize：1 ページあたりの項目数
• NumericButtonCount：表示するページ番号ボタンの数

よく使われるパターン

パターン 1：DataGrid を使用した基本的なページネーション

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <sfgrid:SfDataGrid ItemsSource="{Binding ElementName=sfDataPager, Path=PagedSource}"/>
    
    <datapager:SfDataPager x:Name="sfDataPager"
                           Grid.Row="1"
                           PageSize="20"
                           Source="{Binding DataCollection}"/>
</Grid>

パターン 2：外観のカスタマイズ

<datapager:SfDataPager x:Name="sfDataPager"
                       AccentBackground="DodgerBlue"
                       AccentForeground="White"
                       AutoEllipsisMode="Both"
                       NumericButtonCount="5"
                       PageSize="15"
                       Source="{Binding DataCollection}"/>

パターン 3：実行時の PageSize の変更

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    
    <sfgrid:SfDataGrid ItemsSource="{Binding ElementName=sfDataPager, Path=PagedSource}"/>
    
    <ComboBox Name="pageSizeComboBox"
              Grid.Column="1" Grid.Row="1"
              SelectedIndex="0"
              ItemsSource="{Binding PageSizeOptions}"/>
    
    <datapager:SfDataPager x:Name="sfDataPager"
                           Grid.Row="1"
                           PageSize="{Binding SelectedValue, ElementName=pageSizeComboBox}"
                           Source="{Binding DataCollection}"/>
</Grid>

パターン 4：オンデマンドページング（大規模なデータセット）

<datapager:SfDataPager x:Name="sfDataPager"
                       UseOnDemandPaging="True"
                       PageCount="100"
                       PageSize="20"
                       OnDemandLoading="OnDemandDataLoading"/>

private void OnDemandDataLoading(object sender, OnDemandLoadingEventArgs args)
{
    // Load data for current page only
    var pageData = dataSource.Skip(args.StartIndex).Take(args.PageSize);
    sfDataPager.LoadDynamicItems(args.StartIndex, pageData);
}

パターン 5：ページ変更の検証

<datapager:SfDataPager PageIndexChanging="sfDataPager_PageIndexChanging"/>

private void sfDataPager_PageIndexChanging(object sender, PageIndexChangingEventArgs e)
{
    // Validate or prompt user before page change
    if (HasUnsavedChanges())
    {
        var result = MessageBox.Show("Unsaved changes. Continue?", 
                                     "Confirm", 
                                     MessageBoxButton.YesNo);
        if (result == MessageBoxResult.No)
        {
            e.Cancel = true; // Cancel page navigation
        }
    }
}

主なプロパティ

プロパティ	型	説明
Source	IEnumerable	ページング対象のデータコレクション
PagedSource	PagedCollectionView	ページングされたデータ（ItemsSource にバインド）
PageSize	int	1ページあたりの項目数（既定値：0 = すべての項目）
PageIndex	int	現在のページインデックス（0ベース）
PageCount	int	ページの総数
NumericButtonCount	int	表示する数字ボタンの数
AutoEllipsisMode	AutoEllipsisMode	省略記号ボタンの配置（After、Before、Both、None）
AccentBackground	Brush	ナビゲーションボタン／選択中のボタンの背景色
AccentForeground	Brush	選択中のボタンの前景色
DisplayMode	PageDisplayMode	表示するボタン（例：FirstLastPreviousNextNumeric）
Orientation	Orientation	水平方向または垂直方向のレイアウト
UseOnDemandPaging	bool	オンデマンドのデータ読み込みを有効にする

主なメソッド

メソッド	説明
MoveToFirstPage()	最初のページに移動します
MoveToLastPage()	最後のページに移動します
MoveToNextPage()	次のページに移動します
MoveToPreviousPage()	前のページに移動します
MoveToPage(int pageIndex)	指定したページに移動します
LoadDynamicItems(int startIndex, IEnumerable items)	オンデマンドのページング用にデータを読み込みます

主なイベント

イベント	説明
PageIndexChanging	ページ変更前（キャンセル可能）
PageIndexChanged	ページ変更後

実装ワークフロー

ユーザーから DataPager の実装を求められた場合：

1. 要件を評価する：データの規模、必要なページサイズ、外観の設定を確認します
2. ページングモードを選択する：
   • 通常のページング（小規模から中規模のデータセット）
   • オンデマンドページング（数百万件のレコードを含む大規模なデータセット）
3. アセンブリを追加する：Syncfusion.SfGrid.WPF、Syncfusion.Data.WPF（DataGrid と併用する場合）
4. データバインディングを設定する：Source → PagedSource → ItemsControl.ItemsSource
5. 外観を設定する：PageSize、NumericButtonCount、AccentColors、DisplayMode
6. イベントハンドラーを追加する（必要な場合）：検証用の PageIndexChanging
7. ナビゲーションをテストする：すべてのナビゲーションボタンが正しく動作することを確認します

一般的なユースケース

• ページ分割されたデータグリッド：DataGrid に大規模なデータセットを表示し、ページナビゲーションを提供します
• ドキュメントビューアー：ドキュメントのページを移動します
• 製品カタログ：複数のページにわたって項目を閲覧します
• 検索結果：ページネーション付きで検索結果を表示します
• レポートビューアー：複数ページのレポートを移動します
• 大規模なリストの表示：ページネーションが必要な100件以上の項目を扱うあらゆるシナリオ
• 遅延読み込みのシナリオ：ユーザーがページを移動するたびにデータを読み込みます