WPF开发中实现DataGrid中的数据分页显示，自定义分页样式

邓老五 發表於 2025-7-18 19:57:00

WPF开发中实现DataGrid中的数据分页显示，自定义分页样式

<h1 id="实际开发中我们可能需要自己写一些自定义的分页设计所以我们需要学会自己封装一个可以直接套用的分页控件以下就是一个完整的用例话不多说我们直接上代码实现">实际开发中，我们可能需要自己写一些自定义的分页设计，所以我们需要学会自己封装一个可以直接套用的分页控件，以下就是一个完整的用例，话不多说，我们直接上代码实现。</h1>
<h2 id="1新建一个分页控件viewpaginationcontrol">1.新建一个分页控件View：PaginationControl</h2>
<h3 id="11-ui展示如下">1.1 UI展示如下</h3>
<pre><code><UserControl x:Class="WPFDemoMVVM.Controls.PaginationControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WPFDemoMVVM.Controls"
xmlns:cov="clr-namespace:WPFDemoMVVM.Converters"
xmlns:lang="clr-namespace:WPFDemoMVVM.Resources"
xmlns:lex="http://wpflocalizeextension.codeplex.com"
lex:ResxLocalizationProvider.DefaultAssembly="WPFDemoMVVM"
lex:ResxLocalizationProvider.DefaultDictionary="Lang"
lex:LocalizeDictionary.DesignCulture="zh-CN"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="600" Height="30" Width="780" x:Name="Pagination" >
<UserControl.Resources>
<Style x:Key="PgBaseButtonStyle" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="6"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<ContentPresenter HorizontalAlignment="Center"
   VerticalAlignment="Center"
   Content="{TemplateBinding Content}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#282B3B"/>
<Setter Property="BorderBrush" Value="#367AFF"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="70"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Margin" Value="5 0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Opacity" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>

<Style x:Key="PgComBoxStyle" TargetType="ComboBox">
<Setter Property="Background" Value="#0D0D19"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Margin" Value="20,0,0,0"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="80"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="#367AFF"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontFamily" Value="Arial"/>
</Style>

<Style TargetType="TextBlock" x:Key="BaseTextBlockStyle">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>
</Style>

<Style x:Key="BaseComboBoxStyle" TargetType="ComboBox">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#0D0D19"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Width" Value="80"/>
<Setter Property="Height" Value="32"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="5,0,5,0"/>
<Setter Property="IsEditable" Value="False"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Style="{StaticResource BaseTextBlockStyle}" HorizontalAlignment="Center"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}">
<Grid>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
VerticalAlignment="Center"
HorizontalAlignment="Left" Width="60"
Margin="5,0,0,0"
RecognizesAccessKey="True"/>
<Path
HorizontalAlignment="Right"
Margin="0,0,6,0"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="White"/>
</Grid>
</ToggleButton>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="200"
Background="#0D0D19">
<Border x:Name="DropDownBorder" BorderThickness="0" Background="#0D0D19"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#1A1A2A"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="TextBox" x:Key="BaseTextBoxStyle">
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="98"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Opacity" Value="0.8"/>
<Setter Property="Background" Value="#0C0E1A"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>

<Setter Property="CaretBrush" Value="White"/>


</Style>

<cov:FormatStringMultiConverter x:Key="FormatStringMultiConverter"/>
</UserControl.Resources>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="{lex:Loc HomePage}" Command="{Binding FirstPageCommand}"Style="{DynamicResource ResourceKey=PgBaseButtonStyle}"/>
<Button Content="{lex:Loc PrevPage}" Command="{Binding PrevPageCommand}" Style="{DynamicResource ResourceKey=PgBaseButtonStyle}" />
<TextBlock Margin="10,0" Text="{Binding PageStatus}" Style="{DynamicResource ResourceKey=BaseTextBlockStyle}" Width="auto" FontSize="14"/>
<Button Content="{lex:Loc NextPage}" Command="{Binding NextPageCommand}" Style="{DynamicResource ResourceKey=PgBaseButtonStyle}"/>
<Button Content="{lex:Loc LastPage}" Command="{Binding LastPageCommand}" Style="{DynamicResource ResourceKey=PgBaseButtonStyle}"/>
<TextBlock Text="{lex:Loc PageSize}" VerticalAlignment="Center" Style="{DynamicResource ResourceKey=BaseTextBlockStyle}" FontSize="14"/>
<ComboBox ItemsSource="{Binding PageSizeOptions, Mode=OneWay}" SelectedItem="{Binding PageSize,Mode=TwoWay}" Style="{DynamicResource BaseComboBoxStyle}"/>
<TextBlock Text="{lex:Loc Total}" VerticalAlignment="Center" Style="{DynamicResource ResourceKey=BaseTextBlockStyle}" Margin="5" FontSize="14"/>
<TextBox Text="{Binding TotalItems}" Style="{DynamicResource ResourceKey=BaseTextBoxStyle}" IsEnabled="False"></TextBox>
</StackPanel>
</UserControl>
</code></pre>
<h3 id="12-分页控件的viewmodel">1.2 分页控件的ViewModel：</h3>
<pre><code>public partial class PagingViewModel : ObservableObject
{
public PagingViewModel()
{
PageSizeOptions = new ObservableCollection<int> { 10, 20, 50 };
PageSize = 10;
CurrentPage = 1;
Language = "zh-CN";
}

private int currentPage;

private int pageSize;

private int totalItems;

private string language;

private ObservableCollection<int> pageSizeOptions;

public int TotalPages => PageSize == 0 ? 1 : (int)Math.Ceiling((double)TotalItems / PageSize);
public string PageStatus => Language == "zh-CN" ? $"第 {CurrentPage} / {TotalPages} 页" : $"page {CurrentPage} of {TotalPages}";

// 每当这些属性改变时，通知依赖属性的更新
partial void OnCurrentPageChanged(int value)
{
OnPropertyChanged(nameof(PageStatus));
}

partial void OnPageSizeChanged(int value)
{
CurrentPage = 1;
OnPropertyChanged(nameof(TotalPages));
OnPropertyChanged(nameof(PageStatus));
GoToPage(CurrentPage);
}

partial void OnTotalItemsChanged(int value)
{
OnPropertyChanged(nameof(TotalPages));
OnPropertyChanged(nameof(PageStatus));
}

partial void OnLanguageChanged(string value)
{
OnPropertyChanged(nameof(PageStatus));
}

private void FirstPage() => GoToPage(1);

private void PrevPage() => GoToPage(Math.Max(1, CurrentPage - 1));

private void NextPage() => GoToPage(Math.Min(TotalPages, CurrentPage + 1));

private void LastPage() => GoToPage(TotalPages);

private void GoToPage(int page)
{
CurrentPage = page;
PageChanged?.Invoke(CurrentPage, PageSize);
}

public event Action<int, int> PageChanged;
}
</code></pre>
<h2 id="2datagrid-界面展示如下">2.DataGrid 界面展示如下：</h2>
<h3 id="21-ui展示效果如下">2.1 UI展示效果如下：</h3>
<pre><code><Window x:Class="WPFDemoMVVM.View.DataGridView"
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"
xmlns:local="clr-namespace:WPFDemoMVVM.View"
xmlns:hr="clr-namespace:WPFDemoMVVM.Helpers"
xmlns:be="clr-namespace:WPFDemoMVVM.Behaviors"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:pg="clr-namespace:WPFDemoMVVM.Controls"
xmlns:lang="clr-namespace:WPFDemoMVVM.Resources"
xmlns:lex="http://wpflocalizeextension.codeplex.com"
lex:ResxLocalizationProvider.DefaultAssembly="WPFDemoMVVM"
lex:ResxLocalizationProvider.DefaultDictionary="Lang"
lex:LocalizeDictionary.DesignCulture="zh-CN"
mc:Ignorable="d"
Title="DataGridView" Height="600" Width="800">
<Window.Resources>
<CollectionViewSource x:Key="view" Filter="CollectionViewSource_Filter"/>


<Style x:Key="DataGridStyleCommon" TargetType="DataGrid">
<Setter Property="RowHeight" Value="40"/>
<Setter Property="Background"Value="#191D2A" />
<Setter Property="BorderBrush"Value="{x:Null}" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Opacity" Value="1"/>

<Setter Property="CanUserResizeColumns" Value="false" />

<Setter Property="VerticalGridLinesBrush" Value="{x:Null}"/>
<Setter Property="IsReadOnly" Value="True"></Setter>
<Setter Property="HorizontalGridLinesBrush">
<Setter.Value>
<SolidColorBrush Color="#10FFFFFF" />

</Setter.Value>
</Setter>


<Setter Property="AutoGenerateColumns" Value="False"></Setter>

<Setter Property="AlternationCount" Value="3"></Setter>

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" x:Name="border"
Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="col_rowheader" Width="1" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Button Command="ApplicationCommands.SelectAll" Focusable="False" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type DataGrid}}}">
<Button.Visibility>
<Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type DataGrid}}">
<Binding.ConverterParameter>
<DataGridHeadersVisibility>All</DataGridHeadersVisibility>
</Binding.ConverterParameter>
</Binding>
</Button.Visibility>
</Button>

<DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Grid.ColumnSpan="2"
Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" >
</DataGridColumnHeadersPresenter>

<Grid Grid.Row="1" Grid.ColumnSpan="2">
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" />
</Grid>


<ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical" Grid.Row="0" Grid.RowSpan="3" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}" />



</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="1" TargetName="border" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</Style.Triggers>

</Style>


<Style x:Key="DataGridRowHeaderStyleCommon" TargetType="DataGridRowHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRowHeader}">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
Margin="{TemplateBinding Margin}"
SnapsToDevicePixels="True">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


<Style x:Key="DataGridColumnHeaderStyleCommon" TargetType="DataGridColumnHeader">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="15" />
<Setter Property="MinHeight" Value="28" />

<Setter Property="Foreground" Value="{DynamicResource textBoxWhiteColor}" />
<Setter Property="FontSize" Value="14" />

<Setter Property="Height" Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">

<Border x:Name="BackgroundBorder"Background="{DynamicResource backgroundGrayColor}" BorderThickness="0" BorderBrush="{DynamicResource borderBrushCommonColor}"Width="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<ContentPresenterMargin="0,0,0,0"VerticalAlignment="Center"HorizontalAlignment="Center" />

<Path x:Name="SortArrow"Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z"Stretch="Fill" Grid.Column="2"
   Width="8"Height="6"Fill="{DynamicResource textBoxWhiteColor}" Margin="0,0,50,0"VerticalAlignment="Center"RenderTransformOrigin="1,1" />

<Rectangle Visibility="Collapsed"Width="1" Fill="#d6c79b" HorizontalAlignment="Right"Grid.ColumnSpan="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>



<Style x:Key="DataGridRowStyleCommon"TargetType="DataGridRow">
<Setter Property="Background"Value="#0D0D19"/>
<Setter Property="Height"Value="40" />
<Setter Property="Foreground" Value="White" />
<Style.Triggers>



<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background"Value="#191D2A" />
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Opacity" Value="0.6"></Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True">

<Setter Property="Opacity" Value="1"></Setter>
<Setter Property="Background" Value="#1D1D2A"/>
</Trigger>
</Style.Triggers>
</Style>


<Style x:Key="DataGridCellStyleCommon" TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<TextBlock TextAlignment="Center"VerticalAlignment="Center">
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>

</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="40"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="500" Width="auto">
<DataGrid Name="userInfoGrid"AutoGenerateColumns="False" Height="440" HorizontalAlignment="Left" HorizontalContentAlignment="Center" VerticalAlignment="Top" IsReadOnly="True" CanUserAddRows="False" VerticalScrollBarVisibility="Auto" EnableRowVirtualization="False"
Style="{DynamicResource ResourceKey=DataGridStyleCommon}"
   RowHeaderStyle="{DynamicResource ResourceKey=DataGridRowHeaderStyleCommon}"
   ColumnHeaderStyle="{DynamicResource ResourceKey=DataGridColumnHeaderStyleCommon}"
   RowStyle="{DynamicResource ResourceKey=DataGridRowStyleCommon}"
   CellStyle="{DynamicResource ResourceKey=DataGridCellStyleCommon}" Margin="2 0 5 0" BorderThickness="1" ItemsSource="{Binding CollectionView,Mode=OneWay}"
   hr:MultiSelectorHelper.MonitorSelectionChanged="True"
hr:MultiSelectorHelper.BindableSelectedItems="{Binding SelectedItems,Mode=OneWayToSource}"
   >

<i:Interaction.Behaviors>
<be:SelectedItemsBehavior BindableSelectedItems="{Binding SelectedItems,Mode=OneWayToSource}"/>
</i:Interaction.Behaviors>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Index}" CanUserSort="False" IsReadOnly="True" Width="50">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{lex:Loc Number}"/>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Binding="{Binding Name}" CanUserSort="False" IsReadOnly="True" Width="*">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{lex:Loc AccountName}"/>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Binding="{Binding Salary}" CanUserSort="False" IsReadOnly="True" Width="*">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{lex:Loc Salary}"/>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>

<pg:PaginationControl x:Name="pageControl" Grid.Row="1" DataContext="{Binding Pagination}" VerticalAlignment="Bottom" Background="#191D2A" Height="40">
</pg:PaginationControl>
<StackPanel Grid.Row="2" Orientation="Horizontal">


<TextBlock Text="{lex:Loc AccountName}" Style="{DynamicResource TextBlockBaseStyle}" Margin="5"/>
<TextBox x:Name="queryKeyword" Text="{Binding QueryKeyword,UpdateSourceTrigger=PropertyChanged}" Width="200" Height="32" Margin="5"/>
<Button Margin="5" Content="{lex:Loc Add}" Command="{Binding AddCommand}"/>
<Button Margin="5" Content="{lex:Loc Delete}" Command="{Binding DeleteCommand}"/>
<Button Margin="5" Content="{lex:Loc Calculate}" Command="{Binding CalculateSumSalaryCommand}" CommandParameter="{Binding ElementName=userInfoGrid,Path=SelectedItems}"/>
<TextBox Text="{Binding TotalSalary}" Width="200" Height="32" Margin="5"/>
</StackPanel>

</Grid>
</Window>
</code></pre>
<h3 id="22-实现viewmodel业务逻辑如下">2.2 实现Viewmodel业务逻辑如下：</h3>
<pre><code>public partial class DataGridViewModel :ObservableObject
{

public List<EmployeeModel> employees;

ICollectionView collectionView;

string queryKeyword;

IList selectedItems;

private double totalSalary;

public PagingViewModel pagination;

public DataGridViewModel()
{
Pagination = new PagingViewModel();
Pagination.PageChanged += OnPageChanged;
ChangeLanguage("zh-CN");
IEnumerable<EmployeeModel> employees =EmployeeModel.FakeMany(10);
this.employees = new List<EmployeeModel>(employees);

var pageData = this.employees
.Skip((Pagination.CurrentPage - 1) * Pagination.PageSize)
.Take(Pagination.PageSize)
.Select((e, i) =>
{
e.Index = (Pagination.CurrentPage - 1) * Pagination.PageSize + i + 1;
return e;
}).ToList();

CollectionView = CollectionViewSource.GetDefaultView(pageData);
Pagination.TotalItems = this.employees.Count;
}

partial void OnQueryKeywordChanged(string value)
{
Pagination.CurrentPage = 1; // 筛选后回到第一页
OnPageChanged(Pagination.CurrentPage, Pagination.PageSize);
}

private void OnPageChanged(int currentPage, int pageSize)
{
var filtered = employees.Where(e => string.IsNullOrEmpty(QueryKeyword) || e.Name.Contains(QueryKeyword, StringComparison.OrdinalIgnoreCase)).ToList();
Pagination.TotalItems = filtered.Count;

//重新生成索引 number从1开始
var pageData = filtered
.Skip((currentPage - 1) * pageSize)
.Take(pageSize)
.Select((e, i) =>
{
e.Index = (currentPage - 1) * pageSize + i + 1;
return e;
}).ToList();

CollectionView = CollectionViewSource.GetDefaultView(pageData);
}

private void ChangeLanguage(string languageCode)
{
SelectedLanguage=languageCode;
Pagination.Language = languageCode;
var culture = new CultureInfo(languageCode);
Thread.CurrentThread.CurrentCulture = culture;
Thread.CurrentThread.CurrentUICulture = culture;
LocalizeDictionary.Instance.Culture = culture;
}

public void Add()
{
employees.Add(EmployeeModel.FakeOne());
OnPageChanged(Pagination.CurrentPage, Pagination.PageSize);
}

public void Delete()
{
if (SelectedItems != null)
{
employees.RemoveAll(e => SelectedItems.Contains(e));
OnPageChanged(Pagination.CurrentPage, Pagination.PageSize);
}
}

public void CalculateSumSalary()
{
if (SelectedItems != null)
{
var sum = SelectedItems.Cast<EmployeeModel>().Sum(x => ((EmployeeModel)x).Salary);
TotalSalary = sum;
}

foreach (var item in employees)
{
item.IsSelected = item.Salary > 15000;
}
collectionView.Refresh();
}

}
</code></pre>
<h2 id="3运行效果如下">3.运行效果如下</h2>
<p><img src="https://img2024.cnblogs.com/blog/2212230/202507/2212230-20250718195651522-1212191421.png"></p>
<p>源代码地址：https://gitee.com/chenshibao/wpfdemo.git</p>
<p><strong>如果本文介绍对你有帮助，可以一键四连：点赞+评论+收藏+推荐，谢谢！</strong></p><br><br>
来源：https://www.cnblogs.com/chenshibao/p/18992068

頁: [1]

琼殿技术论坛's Archiver

WPF开发中实现DataGrid中的数据分页显示，自定义分页样式