Paging Control In C#

The SetDefaultValues method will initialize local variable properties to the appropriate default values.

private void SetDefaultValues()
{
    ItemsSource = new ObservableCollection<object>();
    cmbPageSizes.IsEditable = false;
    cmbPageSizes.SelectedIndex = 0;
}

BindProperties will do the binding of properties. Here, we have bound a Page property to a textbox supplied to PageControl by the control template. The same for the PageSizes property - Combobox control.

private void BindProperties()
{
    Binding propBinding;
    propBinding = new Binding("Page");
    propBinding.RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent);
    propBinding.Mode = BindingMode.TwoWay;
    propBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
    txtPage.SetBinding(TextBox.TextProperty, propBinding);
    propBinding = new Binding("PageSizes");
    propBinding.RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent);
    propBinding.Mode = BindingMode.TwoWay;
    propBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
    cmbPageSizes.SetBinding(ComboBox.ItemsSourceProperty, propBinding);
}

Now, we're done with setting up the control. As we have kept SelectedIndex=0 in Combobox, on finishing loading, Combobox selection is changed. So, the item change event will; be fired. So the control will start loading data.

void cmbPageSizes_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Navigate(PageChanges.Current);
}

The preceding event will call a private method with a navigation type. It's an enum. It is defined as below.

internal enum PageChanges
{
    First,     // FOR FIRST BUTTON
    Previous,  // FOR PREVIOUS BUTTON
    Current,   // FOR COMBOBOX ITEM CHANGE EVENT AND PAGE TEXT LOST FOCUS
    Next,      // FOR NEXT BUTTON
    Last       // FOR LAST BUTTON
}

This navigate method is called from all the 6 registered events with an appropriate enum value. This method contains the core logic of the paging control.

private void Navigate(PageChanges change)
{
    uint totalRecords;
    uint newPageSize;
    if (PageContract == null)
    {
        return; // If no contract, return.
    }
    totalRecords = PageContract.GetTotalCount(); // Get new total records count.
    newPageSize = (uint)cmbPageSizes.SelectedItem; // Get new page size.
    if (totalRecords == 0)
    {
        ItemsSource.Clear(); // If no records found, clear ItemsSource.
        TotalPages = 1;
        Page = 1;
    }
    else
    {
        // Calculate TotalPages.
        TotalPages = (totalRecords / newPageSize) + (uint)((totalRecords % newPageSize == 0) ? 0 : 1);
    }
    uint newPage = 1;
    // Set new page variable based on change enum.
    // Switch code below is self-explanatory.
    switch (change)
    {
        case PageChanges.First:
            if (Page == 1)
            {
                return;
            }
            break;
        case PageChanges.Previous:
            newPage = (Page - 1 > TotalPages) ? TotalPages : (Page - 1 < 1) ? 1 : Page - 1;
            break;
        case PageChanges.Current:
            newPage = (Page > TotalPages) ? TotalPages : (Page < 1) ? 1 : Page;
            break;
        case PageChanges.Next:
            newPage = (Page + 1 > TotalPages) ? TotalPages : Page + 1;
            break;
        case PageChanges.Last:
            if (Page == TotalPages)
            {
                return;
            }
            newPage = TotalPages;
            break;
        default:
            break;
    }
    // Based on new page size, calculate starting index.
    uint StartingIndex = (newPage - 1) * newPageSize;
    uint oldPage = Page;
    // Here, we're raising PreviewPageChange routed event.
    RaisePreviewPageChange(Page, newPage);
    Page = newPage;
    ItemsSource.Clear();
    ICollection<object> fetchData = PageContract.GetRecordsBy(StartingIndex, newPageSize, );

    // Fetching data from datasource using provided contract.
    // Right now FilterTag is not used.
    foreach (object row in fetchData)
    {
        ItemsSource.Add(row);
    }
    RaisePageChanged(oldPage, Page); // Raising PageChanged event.
}

Using control in XAML

You have to put a DataGrid/ListBox and a PaggingControl in the window. Bind its ItemsSource property to PageControl's ItemsSource property. Provide PaggingContract to the PageControl. And yes, don't forget to apply a control template to the PageControl When you are done with these things, the PageControl is ready.

<DataGrid ItemsSource="{Binding ItemsSource, ElementName=pageControl, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
          AutoGenerateColumns="False"
          CanUserAddRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="First name" Binding="{Binding FirstName}" IsReadOnly="True"/>
        <DataGridTextColumn Header="Middle name" Binding="{Binding MiddleName}" IsReadOnly="True"/>
        <DataGridTextColumn Header="Last name" Binding="{Binding LastName}" IsReadOnly="True"/>
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" IsReadOnly="True"/>
    </DataGrid.Columns>
</DataGrid>
<local:PaggingControl x:Name="pageControl" Grid.Row="1" Height="25"
                      PageContract="{StaticResource database}"
                      PreviewPageChange="pageControl_PreviewPageChange"
                      PageChanged="pageControl_PageChanged">
    <local:PaggingControl.PageSizes>
        <sys:UInt32>10</sys:UInt32>
        <sys:UInt32>20</sys:UInt32>
        <sys:UInt32>50</sys:UInt32>
        <sys:UInt32>100</sys:UInt32>
    </local:PaggingControl.PageSizes>
</local:PaggingControl>

I have applied the control template using the style as below.

<Style TargetType="{x:Type local:PaggingControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:PaggingControl}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button Name="PART_FirstPageButton" Content="<<" Grid.Column="0"/>
                    <Button Name="PART_PreviousPageButton" Content="<" Grid.Column="1"/>
                    <TextBox Name="PART_PageTextBox" Grid.Column="2"/>
                    <TextBlock Text="{Binding TotalPages, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="3"/>
                    <Button Name="PART_NextPageButton" Content=">" Grid.Column="4"/>
                    <Button Name="PART_LastPageButton" Content=">>" Grid.Column="5"/>
                    <ComboBox Name="PART_PageSizesCombobox" Grid.Column="6"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Pretty simple, isn't it.

I'm attaching project files. Do let me know if you have any queries or suggestions. I'll cover filter functionality later on.