In this article we will learn how to use DataPager control in Silverlight 4.
DataPager control
The DataPager control Provides a user interface for paging through a collection of data.
Properties - These are the following properties of DataPager control.
Figure 1.
DisplayMode - Gets or sets a value that indicates how the DataPager user interface is displayed.
Figure 2.
Source - Source Gets or sets the data collection that the DataPager controls paging for.
Width - Gets or sets the width of a DataPager control.
Height - Gets or sets the height of a DataPager control.
PageSize - Gets or sets a value that indicates the number of items displayed on a page.
NumericButtonCount - indicates the number of page buttons shown on the DataPager user interface.
Creating a DataPager in XAML
<sdk:DataPager Grid.RowSpan="2" Height="26" HorizontalAlignment="Left" Margin="10,10,0,0"Name="DataPager2"
PageSize="10" VerticalAlignment="Top" Width="200" />
The Width and Height attributes of the DataPager element represent the width and the height of a DataPager.
The default view of the DataPager control looks like this.
Figure 3.
For example
Drag a ListBox control and DataPager control on the form. The form looks like this.
Figure 4.
Select DataPager control and set the property Displaymode= FirstLastnumeric.
Now double click on the form and add the following code.
Public Sub New()
InitializeComponent()
Dim itemList As New List(Of [String])()
'Generate some items to add to the list.
Dim i As Integer
For i = 1 To 33
Dim sb As New System.Text.StringBuilder("Item ")
sb.Append(i.ToString())
itemList.Add(sb.ToString())
Next
' Wrap the itemList in a PagedCollectionView for paging functionality
Dim ilv As New PagedCollectionView(itemList)
' Set the DataPager and ListBox to the same data source.
DataPager1.Source = ilv
ListBox1.ItemsSource = ilv
End Sub
XAML code
<UserControl x:Class="SilverlightApplication30.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="361*" />
<ColumnDefinition Width="39*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="29" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<sdk:DataPager Height="150" HorizontalAlignment="Left" Margin="56,10,0,0"Name="DataPager1" PageSize=
"9" VerticalAlignment="Top" Width="200"DisplayMode="FirstLastPreviousNext" Grid.Row="1" BorderThickness=
"4" NumericButtonCount="4"Source="{Binding ElementName=ListBox1, Path=Background.Color.A}" Grid.ColumnSpan="2" />
<ListBox Grid.Row="1" Height="119" HorizontalAlignment="Left" Margin="56,10,0,0"Name=
"ListBox1" VerticalAlignment="Top" Width="200" ItemsSource="{BindingElementName=DataPager1}" Grid.ColumnSpan="2"></ListBox>
</Grid>
</UserControl>
Now save and run the application.
Figure 5.
Now set the property Displaymode= FirstLastPriviousNext and also set background property of DataPager control.
Figure 6.
Now set the property Displaymode= FirstLastPriviousNextNumeric.
Figure 7.
Now set the property Displaymode= Numeric.
Figure 8.
Now set the property Displaymode= PreviousNext.
Figure 9.
Now set the property Displaymode= PreviousNextNumeric and also set background property of DataPager control.
Figure 10.