DataGrid for WPF/Silverlight
手順 3：Web サービスの接続とステルスページングの追加
製品の概要 > チュートリアル (Silverlight のみ) > ステルスページングの実装 > 手順 3：Web サービスの接続とステルスページングの追加

前の手順では、Web サービスを作成し、プロジェクトにデータソースを追加しました。この手順では、引き続き、Web サービスをアプリケーションにリンクします。

プロジェクトを設定するには、次の手順に従います。

  1. MainPage.xaml ファイルに戻ります。
  2. ソリューションエクスプローラで、プロジェクト名を右クリックし、コンテキストメニューから［サービス参照の追加］を選択します。
  3. ［サービス参照の追加］ダイアログボックスで、［検出］ボタンをクリックします。サービスのリストに DataWebService.asmx ファイルが表示されます。
  4. ［名前空間］テキストボックスで、デフォルト値を "DataService" に変更します。［OK］ボタンをクリックして設定を保存し、ダイアログボックスを閉じます。
  5. LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter" を<c1:C1DataGrid>タグに追加して、グリッドをカスタマイズします。次のようになります。
    コードのコピー 
    <c1:C1DataGrid x:Name="peopleDataGrid" AutoGenerateColumns="True" CanUserAddRows="False" LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter">
    このマークアップは、イベントハンドラを追加します。次の手順では、このイベントハンドラのコードを追加します。
  6. ソリューションエクスプローラで、MainPage.xaml ノードを展開し、MainPage.xaml.cs または MainPage.xaml.vb ファイルをダブルクリックしてコードエディタで開きます。
  7. ファイルの先頭に次の import 文を追加します。
    コードのコピー 
    Imports System.Runtime.Serialization
Imports System.Collections.ObjectModel
Imports System.ServiceModel
Imports C1.Silverlight
Imports C1.Silverlight.DataGrid
Imports StealthPaging.DataService ' プロジェクトの名前が異なる場合は、ここを変更します。
    コードのコピー 
    using System.Runtime.Serialization;
using System.Collections.ObjectModel;
using System.ServiceModel;
using C1.Silverlight;
using C1.Silverlight.DataGrid;
using StealthPaging.DataService; // プロジェクトの名前が異なる場合は、ここを変更します。
  8. MainPage クラスに次の変数を追加します。
    コードのコピー 
    Dim _startRow As Integer = 0
Dim _pageSize As Integer = 20
Dim _people As New ObservableCollection(Of ServerPerson)()
Dim _loading As Boolean
    コードのコピー 
    int _startRow = 0;
int _pageSize = 20;
ObservableCollection<ServerPerson> _people = new ObservableCollection<ServerPerson>();
bool _loading;
  9. MainPage コンストラクタにコードを追加します。次のようになります。
    コードのコピー 
    Public Sub New()
   InitializeComponent()
   AddHandler peopleDataGrid.LoadedRowPresenter, AddressOf peopleDataGrid_LoadedRowPresenter
   peopleDataGrid.ItemsSource = _people
   GetData(_startRow, _pageSize)
End Sub
    コードのコピー 
    public MainPage()
{
    InitializeComponent();
    peopleDataGrid.LoadedRowPresenter += new EventHandler<DataGridRowEventArgs>(peopleDataGrid_LoadedRowPresenter);
    peopleDataGrid.ItemsSource = _people;
    GetData(_startRow, _pageSize);
}
  10. LoadedRowPresenter イベントハンドラを MainPage コンストラクタ内のコードに追加します。
    コードのコピー 
    Private Sub peopleDataGrid_LoadedRowPresenter(ByVal sender As System.Object, ByVal e As C1.Silverlight.DataGrid.DataGridRowEventArgs)
   If _loading OrElse _people.Count < _pageSize Then
         Return
   End If
   If _people.Count - 5 < e.Row.Index Then
         GetData(_startRow, _startRow + _pageSize)
   End If
End Sub
    コードのコピー 
    private void peopleDataGrid_LoadedRowPresenter(object sender, C1.Silverlight.DataGrid.DataGridRowEventArgs e)
{
    if (_loading || _people.Count < _pageSize)
    {
        return;
    }
    if (_people.Count - 5 < e.Row.Index)
    {
        GetData(_startRow, _startRow + _pageSize);
    }
}
  11. サーバーからデータを取得するために、次のコードを追加します。
    コードのコピー 
    #Region "retrieve data from the server"
Private Sub GetData(startRow As Integer, endRow As Integer)
   UpdateState(True, startRow, endRow)
   ' Web サービスを呼び出します
   Dim proxy = New DataWebServiceSoapClient(New BasicHttpBinding(), New EndpointAddress(Extensions.GetAbsoluteUri("DataWebService.asmx")))
   AddHandler proxy.GetDataCompleted, AddressOf proxy_GetDataCompleted
   proxy.GetDataAsync(startRow, endRow)
End Sub
Private Sub proxy_GetDataCompleted(sender As Object, e As GetDataCompletedEventArgs)
   If e.[Error] IsNot Nothing Then
         MessageBox.Show(e.[Error].Message, "データ取得にエラーが発生しました。", MessageBoxButton.OK)
         Return
   End If
   ' データが正しく取得されたら、Observable コレクションに追加します
   _startRow += _pageSize
   For Each person As ServerPerson In e.Result
         _people.Add(person)
   Next
   UpdateState(False, 0, 0)
End Sub
' 読み込みステータスを設定します
' ここで VisualState を使用することもできます
Private Sub UpdateState(loading As Boolean, startRow As Integer, endRow As Integer)
   If loading Then
         txtStatus.Text = String.Format("{0}行〜{1}行を取得しています...", startRow, endRow)
         Cursor = Cursors.Wait
         _loading = True
   Else
         _loading = False
         txtStatus.Text = "準備完了"
         Cursor = Cursors.Arrow
   End If
End Sub
#End Region
    コードのコピー 
    #region retrieve data from the server
private void GetData(int startRow, int endRow)
{
    UpdateState(true, startRow, endRow);
    // Web サービスを呼び出します
    var proxy = new DataWebServiceSoapClient(new BasicHttpBinding(), new EndpointAddress(Extensions.GetAbsoluteUri("DataWebService.asmx")));
    proxy.GetDataCompleted += new EventHandler<GetDataCompletedEventArgs>(proxy_GetDataCompleted);
    proxy.GetDataAsync(startRow, endRow);
}
void proxy_GetDataCompleted(object sender, GetDataCompletedEventArgs e)
{
    if (null != e.Error)
    {
        MessageBox.Show(e.Error.Message, "データ取得にエラーが発生しました。", MessageBoxButton.OK);
        return;
    }
    // データが正しく取得されたら、Observable コレクションに追加します
    _startRow += _pageSize;
    foreach (ServerPerson person in e.Result)
    {
        _people.Add(person);
    }
    UpdateState(false, 0, 0);
}
// 読み込みステータスを設定します
// ここで VisualState を使用することもできます
private void UpdateState(bool loading, int startRow, int endRow)
{
    if (loading)
    {
        txtStatus.Text = string.Format("{0}行〜{1}行を取得しています...", startRow, endRow);
        Cursor = Cursors.Wait;
        _loading = true;
    }
    else
    {
        _loading = false;
        txtStatus.Text = "準備完了";
        Cursor = Cursors.Arrow;
    }
}
#endregion
  12. アプリケーションを実行し、グリッドがデータソースに連結されていることを確認します。
  13. アプリケーションを実行し、グリッドをスクロールするとグリッドに行が追加されて表示されることを確認します。

    また、スクロールするたびに、グリッドの下のテキストに、追加される行の番号が示されることも確認してください。

ここまでの成果

おめでとうございます。このチュートリアルは終了です。このチュートリアルでは、新しい Silverlight プロジェクトを作成し、データソースを追加してから、Web サービスを作成して C1DataGrid コントロールを連結しました。さらに、ステルスページングを実装しました。これにより、実行時にグリッドをスクロールするとグリッドがページスルーされるため、パフォーマンスが向上します。

 

 

Copyright © GrapeCity, Inc. All rights reserved.