In the previous step you created a Web Service and added a data source to your project. In this step you'll continue by linking the Web Service to your application.
To set up your project, complete the following steps:
1. Return to the MainPage.xaml file.
2. In the Solution Explorer, right-click the project name and select Add Service Reference from the context menu.
3. In the Add Service Reference dialog box click the Discover button. The DataWebService.asmx file will appear in the list of Services.
4. In the Namespace text box, change the default value to "DataService" and click the OK button to save your settings and close the dialog box.
5. Customize your grid by adding LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter" to the <c1:C1DataGrid> tag so that it appears similar to the following:
<c1:C1DataGrid x:Name="peopleDataGrid" AutoGenerateColumns="True" CanUserAddRows="False" LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter">
This markup adds an event handler – you'll add code for the event handler in the next steps.
6. In the Solution Explorer, expand the MainPage.xaml node and double-click the MainPage.xaml.cs or MainPage.xaml.vb file to open it in the Code Editor.
7. Add the following import statements at the top of the file:
Imports System.Runtime.Serialization
Imports System.Collections.ObjectModel
Imports System.ServiceModel
Imports C1.Silverlight
Imports C1.Silverlight.DataGrid
Imports StealthPaging.DataService ' Change this if the name of your project is different.
•C#
using System.Runtime.Serialization;
using System.Collections.ObjectModel;
using System.ServiceModel;
using C1.Silverlight;
using C1.Silverlight.DataGrid;
using StealthPaging.DataService; // Change this if the name of your project is different.
8. Add the following variables to the MainPage class:
Dim _startRow As Integer = 0
Dim _pageSize As Integer = 20
Dim _people As New ObservableCollection(Of ServerPerson)()
Dim _loading As Boolean
•C#
int _startRow = 0;
int _pageSize = 20;
ObservableCollection<ServerPerson> _people = new ObservableCollection<ServerPerson>();
bool _loading;
9. Add code to the MainPage constructor so it appears like the following:
Public Sub New()
InitializeComponent()
AddHandler peopleDataGrid.LoadedRowPresenter, AddressOf peopleDataGrid_LoadedRowPresenter
peopleDataGrid.ItemsSource = _people
GetData(_startRow, _pageSize)
End Sub
•C#
public MainPage()
{
InitializeComponent();
peopleDataGrid.LoadedRowPresenter += new EventHandler<DataGridRowEventArgs>(peopleDataGrid_LoadedRowPresenter);
peopleDataGrid.ItemsSource = _people;
GetData(_startRow, _pageSize);
}
10. Add the LoadedRowPresenter event handler to your code under the MainPage constructor:
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
•C#
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. Add the following code to retrieve data from the server:
#Region "retrieve data from the server"
Private Sub GetData(startRow As Integer, endRow As Integer)
UpdateState(True, startRow, endRow)
' Call web service
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, "Error Getting Data", MessageBoxButton.OK)
Return
End If
' Data retrieved OK, add to observable collection
_startRow += _pageSize
For Each person As ServerPerson In e.Result
_people.Add(person)
Next
UpdateState(False, 0, 0)
End Sub
' Sets loading status
' You could use a VisualState here too
Private Sub UpdateState(loading As Boolean, startRow As Integer, endRow As Integer)
If loading Then
txtStatus.Text = String.Format("Retrieving rows {0} to {1}...", startRow, endRow)
Cursor = Cursors.Wait
_loading = True
Else
_loading = False
txtStatus.Text = "Ready"
Cursor = Cursors.Arrow
End If
End Sub
#End Region
•C#
#region retrieve data from the server
private void GetData(int startRow, int endRow)
{
UpdateState(true, startRow, endRow);
// Call Web service
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, "Error Getting Data", MessageBoxButton.OK);
return;
}
// Data retrieved OK, add to observable collection
_startRow += _pageSize;
foreach (ServerPerson person in e.Result)
{
_people.Add(person);
}
UpdateState(false, 0, 0);
}
// Sets loading status
// You could use a VisualState here too
private void UpdateState(bool loading, int startRow, int endRow)
{
if (loading)
{
txtStatus.Text = string.Format("Retrieving rows {0} to {1}...", startRow, endRow);
Cursor = Cursors.Wait;
_loading = true;
}
else
{
_loading = false;
txtStatus.Text = "Ready";
Cursor = Cursors.Arrow;
}
}
#endregion
12. Run your application and observe that the grid appears bound to a data source:
13. Run your application and observe that as you scroll through the grid more rows appear in the grid:
Also note that the text below the grid indicates the rows being added as you scroll.
What You've Accomplished
Congratulations, you've completed this tutorial! In this tutorial you created a new Silverlight project, added a data source, and created a Web Service to bind the C1DataGrid control. You implemented stealth paging, so that when the grid is scrolled at run time, the grid pages through the grid instead, improving performance.