Silverlight 自定义数据分页器带 pageSize 下拉菜单

• 下载源代码 - 1.89 MB
• 下载最新版本的源代码
• 在线演示

引言

在实际应用中，巨大的数据展示需要分页，这需要使用 DataPager，它为数据源提供导航和分页功能。可以使用 PagedCollectionView 实现分页。如果您是 DataPager 控件的新手，我建议您阅读 此 MSDN 文章 和 Kunal 的 博客文章。

在本文中，我们将自定义 DataPager 控件，使其拥有一个页面大小组合框（或下拉菜单），该组合框将具有根据数据源动态更改页面大小的选项。让我们看看 Telerik 的一个 ASP 示例，看看 这里 的演示。

方法

为了实现 PageSize 下拉菜单，我们将为 DataPager 应用一个样式，该样式将包含一个额外的下拉控件。此下拉项目的源将与父祖先控件（即 DataPager）绑定。与下拉绑定关联的转换器将包含一个小逻辑，以根据 DataPager 的 ItemCount 获取页面大小值的列表。

有点迷糊…… 看看文章的其余部分。

逐步实施

请允许我将我们的任务分解为几个步骤，基本上是

• 创建一个带有附加下拉/组合框的样式
• 将数据绑定分配给下拉菜单和转换器
• 处理下拉选择更改事件
• 在 DataPager 中实现样式

创建一个带有附加下拉/组合框的样式

分析控件和修改样式的最佳方法是在 Blend 中剖析该控件。因此，让我们在 Expression Blend 中打开 DataPager 控件并开始修改模板。

Blend 显示用于形成 DataPager 的控件，尽管我们不会更改现有的控件。使用控件模板的 XAML 视图，让我们添加一个下拉菜单和一个 TextBlock 到样式中作为我们的第一个更改。

将数据绑定分配给下拉菜单和转换器

样式中提到的下拉/组合框直接依赖于 DataPager。因此，我们将使用与 DataPager 相同的数据源。但是，组合框中的 ItemSource 必须是一个整数，具体取决于用户定义的默认页面大小。这里的逻辑是使用附加到控件的转换器填充下拉菜单。让我们看看下拉菜单的绑定语法

组合框的 ItemSource 被分配给父控件，而 PageCovertor 用于根据 ItemSource 计数返回数值集合。填充下拉菜单的转换器代码可以是

public class PageComboConvertor : IValueConverter
{
    // This converts the DateTime object to the string to display.
    public object Convert(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        //Set Default PageSize , The Page size
        //will be based on the default value
        int PageSizeVal=5;
 
        List<Int32> lstVal = new List<Int32>();
        //Get the DataPager as it is assigned in Binding
        DataPager dp = (DataPager)value;
 
        //Get Datapager ItemCount and Add to the List
        for (int count = 1; count <= (dp.ItemCount / PageSizeVal); count++)
        {
            lstVal.Add((PageSizeVal * count));
        }
        return lstVal;
    }
 
    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

处理下拉选择更改事件

由于 DataPager 的 PageSize 应该在选择更改时更改，我们可以在样式中直接将事件处理程序附加到组合框，或者如果我们需要它作为用户控件，则可以在加载控件时检索它并附加事件处理程序（请参考我之前的文章以获取检索控件的说明）。在这里，我遵循通过 XAML 样式添加事件的简单方法。

private void cmbPageSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    dpPager.PageSize = (int)((ComboBox)sender).SelectedValue;
}

在 DataPager 中实现样式

如果您遵循了上述步骤，那么接下来我们可以将样式应用于 DataPager 控件，如下所示

<sdk:DataPager Height="26"
                 Margin="12,393,12,0"
                 Name="dpPager"
                 PageSize="5"
                 VerticalAlignment="Top"
                 Style="{StaticResource DataPagerWithPageSize}"/>

样式的结果将是 DataPager 的修改版本

这里附带的示例项目包含一个 DataPager 的示例，其中包含一个 DataGrid 和一个默认页面大小 5。

在线演示和下载

• 在线演示链接：here。
• 下载示例项目：here。

结论

希望这篇文章能帮助您理解样式概念。请继续关注未来关于 DataGrid 的更多精彩文章。请告诉我您的想法并提出您的问题。