Silverlight DataPager control in VB.NET

In this article we will learn how to use DataPager control in Silverlight 4.
  • 2139

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.

dp12.gif
 

Figure 1.

DisplayMode - Gets or sets a value that indicates how the DataPager user interface is displayed.

dp2.gif
 

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.

dp4.gif
 

Figure 3.

For example 

Drag a ListBox control and DataPager control on the form. The form looks like this.

dp5.gif
 

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. 
 

dp6.gif
 

Figure 5.

Now set the property Displaymode= FirstLastPriviousNext and also set background property of DataPager control.

dp14.gif
 

Figure 6.

Now set the property Displaymode= FirstLastPriviousNextNumeric.

dp8.gif
 

Figure 7.

Now set the property Displaymode= Numeric.

dp9.gif
 

Figure 8.

Now set the property Displaymode= PreviousNext.

dp10.gif
 

Figure 9.

Now set the property Displaymode= PreviousNextNumeric and also set background property of DataPager control.

dp13.gif
 

Figure 10.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.