Reader Level:
Articles

Silverlight- DataPager Control Example

By Vijai Anand on December 07, 2010
In this article we will be seeing how to create Silverlight DataPager control.
  • 0
  • 0
  • 27314


In this article we will be seeing how to create Silverlight DataPager control.

DataPager Control:

It is used to provide a user interface for paging through a collection of data.

Namespace: System.Windows.Controls

Assembly: System.Windows.Controls.Data (in System.Windows.Controls.Data.dll)

Xaml:

        <sdk:DataPager />
DisplayMode= FirstLastNumeric;

image1.gif

DisplayMode= FirstLastPreviousNext;

image2.gif

DisplayMode= FirstLastPreviousNextNumeric;

image3.gif

DisplayMode= PreviousNext;

image4.gif

DisplayMode= Numeric;

image5.gif

DisplayMode= PreviousNextNumeric;

image6.gif

Steps Involved:

Creating a Silverlight Application:

  1. Open Visual Studio 2010.
  2. Go to File => New => Project.
  3. Select Silverlight from the Installed templates and choose the Silverlight Application template.
  4. Enter the Name and choose the location.
  5. Click OK.
  6. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".
  7. Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the following.

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="DataPager.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">

    <Canvas Height="230" Width="230" Background="Gray">
        <ListBox x:Name="listBox" Height="150" Width="180" Canvas.Left="20" Canvas.Top="20" />
        <sdk:DataPager x:Name="dataPager"
                       Background="AntiqueWhite"
                       Canvas.Left="20"
                       Canvas.Top="180"
                       PageSize="4"
                       DisplayMode="PreviousNextNumeric">
        </sdk:DataPager>  
   
</Canvas>
</
UserControl>

Open MainPage.xaml.cs file and replace the code with the following.

public MainPage()
        {
            InitializeComponent();
            List<String> itemList = new List<String>();
            for (int i = 1; i <= 33; i++)
            {
                System.Text.StringBuilder sb = new System.Text.StringBuilder("Item ");
                sb.Append(i.ToString());
                itemList.Add(sb.ToString());
            }

            PagedCollectionView itemListView = new PagedCollectionView(itemList);       
            dataPager.Source = itemListView;
            listBox.ItemsSource = itemListView;
        }


Testing:

  • Build the solution.

  • Hit ctrl+F5.

image7.gif

Vijai Anand

Vijai Anand has been working in IT industry for over 5 years. He holds Bachelor's degree in Electronics and Communication Engineering. Vijai write articles and blogs related to SharePoint 2013, SharePoint 2010, Silv... Read more

COMMENT USING

Trending up