WPF 實現 DataGrid/ListView 分頁控制項

標籤：ane   rstp   eve   href   ack   transform   code   ref   http   

在WPF中，通常會選用DataGrid/ListView進行資料展示，如果資料量不多，可以直接一個頁面顯示出來。如果資料量很大，2000條資料，一次性顯示在一個頁面中，不僅消耗資源，而且使用者體驗也很糟糕。這篇部落格將介紹如何建立一個分頁控制項。

為了簡單起見，這個分頁控制項目前只有 首頁/上一頁/下一頁/末頁/總頁數/第幾頁 等功能。實現思路，首頁/上一頁/下一頁/末頁 這四個通過路由事件來實現，在使用時可以使用命令進行綁定，或者直接使用均可。總頁數和第幾頁通過相依性屬性來實現，使用時將頁數進行綁定顯示即可。範例程式碼如下：

Pager控制項：

    <UserControl.Resources>        <Style TargetType="{x:Type Button}">            <Setter Property="Width" Value="22"/>            <Setter Property="Height" Value="22"/>        </Style>    </UserControl.Resources>    <Grid>        <StackPanel Orientation="Horizontal">            <Button x:Name="FirstPageButton" Margin="5,0" Click="FirstPageButton_Click">                <Path Width="7" Height="10" Data="M0,0L0,10 M0,5L6,2 6,8 0,5" Stroke="Black" StrokeThickness="1" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />            </Button>            <Button x:Name="PreviousPageButton" Margin="0,0,5,0" Click="PreviousPageButton_Click">                <Path Width="8" Height="8" Data="M0,4L8,0 8,8z" Stroke="Black" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />            </Button>            <TextBlock VerticalAlignment="Center">                <Run Text="第"/>                <Run x:Name="rCurrent" Text="0"/>                <Run Text="頁"/>            </TextBlock>            <Button Margin="5,0" x:Name="NextPageButton" Click="NextPageButton_Click">                <Path Width="8" Height="8" Data="M0,4L8,0 8,8z" Stroke="Black" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center">                    <Path.RenderTransform>                        <RotateTransform Angle="180" CenterX="4" CenterY="4" />                    </Path.RenderTransform>                </Path>            </Button>            <Button Margin="0,0,5,0" x:Name="LastPageButton" Click="LastPageButton_Click">                <Path x:Name="MainPath" Width="7" Height="10" Data="M0,0L0,10 M0,5 L6,2 6,8 0,5" Stroke="Black" StrokeThickness="1" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center">                    <Path.RenderTransform>                        <RotateTransform Angle="180" CenterX="3" CenterY="5" />                    </Path.RenderTransform>                </Path>            </Button>            <TextBlock VerticalAlignment="Center">                <Run Text="共"/>                <Run x:Name="rTotal" Text="0"/>                <Run Text="頁"/>            </TextBlock>        </StackPanel>         </Grid>

C#:

 View Code

在MainWindow中,
XAML:

    <Grid>        <Grid.RowDefinitions>            <RowDefinition Height="*"/>            <RowDefinition Height="Auto"/>        </Grid.RowDefinitions>        <DataGrid Grid.Row="0" ItemsSource="{Binding FakeSource}" AutoGenerateColumns="False" CanUserAddRows="False">            <DataGrid.Columns>                <DataGridTextColumn Header="Item Id" Binding="{Binding Id}" Width="80"/>                <DataGridTextColumn Header="Item Name" Binding="{Binding ItemName}" Width="180"/>            </DataGrid.Columns>        </DataGrid>        <local:Pager TotalPage="{Binding TotalPage}"                     CurrentPage="{Binding CurrentPage, Mode=TwoWay}"                      HorizontalAlignment="Center"                     Grid.Row="1">            <i:Interaction.Triggers>                <i:EventTrigger EventName="FirstPage">                    <i:InvokeCommandAction Command="{Binding FirstPageCommand}" />                </i:EventTrigger>                <i:EventTrigger EventName="PreviousPage">                    <i:InvokeCommandAction Command="{Binding PreviousPageCommand}"/>                </i:EventTrigger>                <i:EventTrigger EventName="NextPage">                    <i:InvokeCommandAction Command="{Binding NextPageCommand}" />                </i:EventTrigger>                <i:EventTrigger EventName="LastPage">                    <i:InvokeCommandAction Command="{Binding LastPageCommand}"/>                </i:EventTrigger>            </i:Interaction.Triggers>        </local:Pager>    </Grid>

MainViewModel類：

 View Code

綁定到UI的資料來源只是需要顯示的資料，不會把所有資料都取出來。當選擇顯示頁數時，只需要將新的資料來源附上即可。

總結：如果需要對該分頁控制項進行擴充，例如，增加每頁顯示條數功能，只需要在Pager控制項中增加相應的相依性屬性即可。

感謝您的閱讀，代碼點擊這裡下載。

WPF 實現 DataGrid/ListView 分頁控制項