UXDataPager是一款灵活的基于MVVM下的数据分页控件，包含在WebUI Studio for Silverlight界面套包控件里，开发人员可以利用该控件为众多数据处理类控件设置分页功能，如表格、列表等，该控件同时支持客户端和服务器端操作，并且支持自定义分页效果。下面的代码讲述了如何利用该控件对 UXListBox控件进行数据分页处理：

public class PagingUXListBoxViewModel : ViewModelBase

    {

        public PagingUXListBoxViewModel()

        {

            this.Manager = new NorthwindDomainContext();

            this.LoadCustomers();

        }

        private IEnumerable _customers;

        private NorthwindDomainContext Manager { get; set; }

        public IEnumerable Customers

        {

            get { return this._customers; }

            set

            {

                if (this._customers != value)

                {

                    this._customers = value;

                    this.OnPropertyChanged("Customers");

                }

            }

        }

 

        public virtual void LoadCustomers()

        {

            if (Intersoft.Client.Framework.ISControl.IsInDesignModeStatic)

                return;

            var query = this.Manager.GetCustomersQuery().OrderBy(c => c.CustomerID);

            this.Manager.Load(

               query,

               op =>

               {

                   if (op.IsComplete)

                   {

                       this.Customers = new PagedCollectionView(op.Entities);                      

                   }

                   else

                   {

                       MessageBox.Show(op.Error.ToString());

                   }

               },

 

               true);

        }

    }

<Grid x:Name="LayoutRoot">

        <Grid.DataContext>

            <ViewModels:PagingUXListBoxViewModel/>

        </Grid.DataContext>

 

        <Intersoft:DockPanel FillChildMode="Custom" MaxWidth="700" Margin="12">

 

            <Intersoft:UXListBox ItemsSource="{Binding Customers}" Margin="8,0"

                                 Intersoft:DockPanel.IsFillElement="True">

                <Intersoft:UXListBox.ItemContainerStyle>

                    <Style TargetType="Intersoft:UXListBoxItem">

                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

                    </Style>

                </Intersoft:UXListBox.ItemContainerStyle>

                <Intersoft:UXListBox.ItemTemplate>

                    <DataTemplate>

                        <Grid Height="128">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="Auto"/>

                                <ColumnDefinition/>

                            </Grid.ColumnDefinitions>

                            <Image HorizontalAlignment="Left" VerticalAlignment="Center" Source="{Binding Path=PhotoPath}" 

 

Margin="8,8,8,8"/>

                            <Grid Grid.Column="1" Margin="16,8,16,8">

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="Auto"/>

                                    <RowDefinition Height="Auto"/>

                                    <RowDefinition Height="24"/>

                                    <RowDefinition Height="Auto"/>

                                    <RowDefinition Height="Auto"/>

                                </Grid.RowDefinitions>

                                <TextBlock HorizontalAlignment="Left" FontSize="16" FontWeight="Normal" Text="{Binding 

 

Path=ContactName}" TextWrapping="NoWrap"/>

                                <StackPanel Grid.Row="1" Orientation="Horizontal">

                                    <TextBlock Foreground="#FF7D7D7D" Text="{Binding Path=ContactTitle}" TextWrapping="NoWrap"/>

                                    <TextBlock Foreground="#FF7D7D7D" Text=", "/>

                                    <TextBlock Foreground="#FF7D7D7D" Text="{Binding Path=CompanyName}" TextWrapping="NoWrap"/>

                                </StackPanel>

                                <Border Grid.Row="3" Grid.RowSpan="2" Background="#7FF0F0F0" CornerRadius="4"

                                        HorizontalAlignment="Right" VerticalAlignment="Bottom">

                                    <StackPanel Margin="4">

                                        <StackPanel Orientation="Horizontal">

                                            <TextBlock Text="Phone : " TextWrapping="NoWrap"/>

                                            <TextBlock Text="{Binding Path=Phone}" TextWrapping="NoWrap"/>

                                        </StackPanel>

                                        <StackPanel Orientation="Horizontal">

                                            <TextBlock Text="Fax : " TextWrapping="NoWrap"/>

                                            <TextBlock Text="{Binding Path=Fax}" TextWrapping="NoWrap"/>

                                        </StackPanel>

                                    </StackPanel>

                                </Border>

                            </Grid>

                            <Intersoft:UXSeparator VerticalAlignment="Bottom" Grid.ColumnSpan="2" Margin="0,0,0,-4" 

 

Opacity="0.4"/>

                        </Grid>

                    </DataTemplate>

                </Intersoft:UXListBox.ItemTemplate>

            </Intersoft:UXListBox>

 

            <Intersoft:UXDataPager Grid.Row="1" PageSize="20" QueryOperation="Client" Source="{Binding Customers}"

                                   Margin="8,0" Intersoft:DockPanel.Dock="Bottom"/>

        </Intersoft:DockPanel>

    </Grid>