WPF DataGrid 分页
WPF DataGrid 分页
DataGrid
DataGrid 数据列表 看一下DataGrid的独特属性:
AlternationCount:设置ItemControl中交替项的数据,可以理解为隔几行换色设置
AutoGenerateColumns:是否自动生成列 CanUserAddRows:是否允许添加新行
CanUserDeleteRows:是否允许删除行
CanUserReorderColumns:是否允许用户通过使用鼠标拖拽列标题,更改列的显示顺序
CanUserResizeColumns:是否允许用户通过鼠标更改列的宽度
CanUserResizeRows:是否允许用户通过鼠标更改行的高度 ColumnHeaderHeight:列表头的高度
GridLinesVisibility:指示显示哪些网格线,包括:None,Horizontal,Vertical,All
HeadersVisibility:指示行和列标题的可见性,包括:None,Column,Row,All
Binding:绑定数据源字段
<Grid Grid.Row="1">
<DataGrid Name="grid_saffer" Grid.Row="1" IsReadOnly="True" AlternationCount="2" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Width="1*" Binding="{Binding ID}"/>
<DataGridTextColumn Header="名字" Width="1*" Binding="{Binding Name}"/>
<DataGridTextColumn Header="地点" Width="1*" Binding="{Binding location}" />
<DataGridTextColumn Header="开始时间" Width="1*" Binding="{Binding start}" />
<DataGridTextColumn Header="结束时间" Width="1*" Binding="{Binding end}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
DataGrid 美化
DataGrid 数据列表样式
<!-- 表格外边框线粗细,一般不修改 -->
<Thickness x:Key="DataGrid.BorderThickness" Bottom="1" Left="1" Right="1" Top="1" />
<!-- 列头边框粗细,一般不修改 -->
<Thickness x:Key="ColumnHeader.BorderThickness" Bottom="0" Left="0" Right="1" Top="0" />
<!-- 行边框粗细,一般不修改 -->
<Thickness x:Key="DataGridRow.BorderThickness" Bottom="0" Left="0" Right="0" Top="1" />
<!-- 表格外边框颜色 -->
<SolidColorBrush x:Key="DataGrid.BorderBrush" Color="#E9ECF1" />
<!-- 列头背景色 -->
<SolidColorBrush x:Key="ColumnHeader.Background" Color="#F6F7FB" />
<!-- 列头边框颜色 -->
<SolidColorBrush x:Key="ColumnHeader.BorderBrush" Color="#E9ECF1" />
<!-- 行边框颜色 -->
<SolidColorBrush x:Key="DataGridRow.BorderBrush" Color="#E9ECF1" />
<!-- 行默认背景颜色 -->
<SolidColorBrush x:Key="DataGridRow.Normal.Background" Color="#FFFFFF" />
<!-- 行默认文字颜色 -->
<SolidColorBrush x:Key="DataGridRow.Normal.Foreground" Color="#000000" />
<!-- 行悬浮背景颜色 -->
<SolidColorBrush x:Key="DataGridRow.MouseOver.Background" Color="#F6F7FB" />
<!-- 行悬浮文字颜色 -->
<SolidColorBrush x:Key="DataGridRow.MouseOver.Foreground" Color="#000000" />
<!-- 行选中背景颜色 -->
<SolidColorBrush x:Key="DataGridRow.Selected.Background" Color="#F6F7FB" />
<!-- 行选中文字颜色 -->
<SolidColorBrush x:Key="DataGridRow.Selected.Foreground" Color="#000000" />
<Style TargetType="DataGrid">
<!-- 网格线颜色 -->
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="BorderThickness" Value="{StaticResource DataGrid.BorderThickness}" />
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="Background" Value="{StaticResource ColumnHeader.Background}" />
<Setter Property="BorderBrush" Value="{StaticResource DataGrid.BorderBrush}" />
<Setter Property="HorizontalGridLinesBrush" Value="#00E9ECF1" />
<Setter Property="VerticalGridLinesBrush" Value="#00E9ECF1" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="AutoGenerateColumns" Value="False" />
<Setter Property="CanUserAddRows" Value="False" />
<Setter Property="CanUserReorderColumns" Value="False" />
<Setter Property="CanUserResizeColumns" Value="False" />
<Setter Property="CanUserResizeRows" Value="False" />
<Setter Property="CanUserSortColumns" Value="False" />
<Setter Property="GridLinesVisibility" Value="None" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="RowHeight" Value="33" />
<Setter Property="SelectionMode" Value="Single" />
</Style>
<!--列头样式-->
<Style TargetType="DataGridColumnHeader">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#000000" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Height" Value="28" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Border x:Name="BackgroundBorder" Width="Auto" Margin="-1,0"
BorderBrush="{StaticResource ColumnHeader.BorderBrush}"
BorderThickness="{StaticResource ColumnHeader.BorderThickness}"
SnapsToDevicePixels="True" UseLayoutRounding="True">
<ContentPresenter Margin="5,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 行样式触发 背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式 -->
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="{StaticResource DataGridRow.Normal.Background}" />
<Setter Property="Foreground" Value="{StaticResource DataGridRow.MouseOver.Foreground}" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="{StaticResource DataGridRow.BorderThickness}" />
<Setter Property="BorderBrush" Value="{StaticResource DataGridRow.BorderBrush}" />
<Setter Property="ValidationErrorTemplate">
<Setter.Value>
<ControlTemplate>
<TextBlock Margin="0,0,0,0" VerticalAlignment="Center" Foreground="Red" Text="!" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border" Margin="0,0,0,-1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True" UseLayoutRounding="True">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*" MinHeight="33" />
<RowDefinition Height="Auto" />
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<DataGridDetailsPresenter Grid.Row="1" Grid.Column="1"
SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen,
ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
Converter={x:Static DataGrid.RowDetailsScrollingConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
Visibility="{TemplateBinding DetailsVisibility}" />
<DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{Binding HeadersVisibility,
ConverterParameter={x:Static DataGridHeadersVisibility.Row},
Converter={x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
</SelectiveScrollingGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource DataGridRow.MouseOver.Foreground}" />
<Setter Property="Background" Value="{StaticResource DataGridRow.MouseOver.Background}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="{StaticResource DataGridRow.Selected.Foreground}" />
<Setter Property="Background" Value="{StaticResource DataGridRow.Selected.Background}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 单元格样式触发 -->
<Style TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border x:Name="Bg" Background="Transparent" UseLayoutRounding="True">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</Style.Triggers>
</Style>
DataGrid 数据源绑定
DataGrid 名称.DataContext =DataTable.DefaultView
grid_saffer.DataContext = dt.DefaultView;
或者
grid_saffer.ItemsSource= dt.DefaultView;
/// <summary>
/// IndexUserControl.xaml 的交互逻辑
/// </summary>
public partial class IndexUserControl : UserControl
{
public IndexUserControl()
{
InitializeComponent();
grid_Date();
}
//获取数据源 如从数据库查询的数据 DataTable 、 List 等
public void grid_Date()
{
//start end location
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("start", typeof(string));
dt.Columns.Add("end", typeof(string));
dt.Columns.Add("location", typeof(string));
DataRow row = dt.NewRow();
for (int i = 0; i < 1000000; i++)
{
row["ID"] = i+1;
row["Name"] = "张三"+i;
row["start"] = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
row["end"] = DateTime.Now.ToString("yyyy-MM-dd");
row["location"] = "北京";
dt.Rows.Add(row);
row = dt.NewRow();
}
grid_saffer.DataContext = dt.DefaultView;
//this.grid_saffer.ItemsSource = dt.DefaultView;
//设置网格线
grid_saffer.GridLinesVisibility = DataGridGridLinesVisibility.All;
}
}
DataGrid 分页
创建 DataGrid 自定义控件 ,用用户控件封装一个分页控件 创建用户空件,UserControl.Resources 分页样式
<UserControl x:Class="WpfApp.Views.DataGridPage"
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:WpfApp.Views"
mc:Ignorable="d"
Background="Transparent">
<UserControl.Resources>
<!--每页{0}/共{0}条-->
<Style x:Key="PageTextBlock1" TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="13" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
<!--首页上一页等-->
<Style x:Key="PageTextBlock2" TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF000000" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Border CornerRadius="3" Background="Transparent" VerticalAlignment="Center" >
<Grid HorizontalAlignment="Stretch" Margin="5 0 1 0" VerticalAlignment="Top" Width="Auto" Height="30">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"></ColumnDefinition>
<ColumnDefinition Width="5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="0">
<Grid>
<Grid.RowDefinitions >
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="btnFirst" Text="首页" IsEnabled="False" Style="{StaticResource PageTextBlock2}" MouseDown="btnFirst_MouseDown"/>
<TextBlock Grid.Column="1" Name="btnPrev" Text="上一页" IsEnabled="False" Style="{StaticResource PageTextBlock2}" MouseDown="btnPrev_MouseDown" />
<TextBox Grid.Column="2" Name="page" FontSize="13" Background="Transparent" BorderBrush="#8F8F8F" BorderThickness="0,0,0,1" HorizontalAlignment="Center" VerticalAlignment="Center" Cursor="IBeam" IsEnabled="True" KeyUp="btnGO_Click" KeyDown="btnGO_Click"/>
<TextBlock Grid.Column="3" Name="btnNext" Text="下一页" IsEnabled="False" Style="{StaticResource PageTextBlock2}" MouseDown="btnNext_MouseDown" />
<TextBlock Grid.Column="4" Name="btnLast" Text="未页" IsEnabled="False" Style="{StaticResource PageTextBlock2}" MouseDown="btnLast_MouseDown"/>
</Grid>
</StackPanel>
<Grid Grid.Column="1" Name="grid" Visibility="Visible" HorizontalAlignment="Right">
<TextBlock Name="tbkRecords" Style="{StaticResource PageTextBlock2}" Padding="0,0,10,0" Foreground="#01544A" Visibility="Visible" />
</Grid>
</Grid>
</Border>
</Grid>
</UserControl>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApp.Views
{
/// <summary>
/// DataGridPage.xaml 的交互逻辑
/// </summary>
public partial class DataGridPage : UserControl
{
public DataGridPage()
{
InitializeComponent();
}
private DataTable _dt = new DataTable();
//每页显示多少条
private int pageNum = 10;
//当前是第几页
private int pIndex = 1;
//对象
private DataGrid grdList;
//最大页数
private int MaxIndex = 1;
//一共多少条
private int allNum = 0;
#region 初始化数据
/// <summary>
/// 初始化数据
/// </summary>
/// <param name="grd"></param>
/// <param name="dtt"></param>
/// <param name="Num"></param>
public void ShowPages(DataGrid grd, DataTable dt, int Num)
{
if (dt == null || dt.Rows.Count == 0)
{
this.Visibility = Visibility.Hidden;
return;
}
this._dt = dt.Clone();
this.grdList = grd;
this.pageNum = Num;
this.pIndex = 1;
foreach (DataRow r in dt.Rows)
this._dt.ImportRow(r);
SetMaxIndex();
ReadDataTable();
}
#endregion
#region 画数据
/// <summary>
/// 画数据
/// </summary>
private void ReadDataTable()
{
try
{
page.Text = this.pIndex.ToString();
DataTable tmpTable = new DataTable();
tmpTable = this._dt.Clone();
int first = this.pageNum * (this.pIndex - 1);
first = (first > 0) ? first : 0;
//如何总数量大于每页显示数量
if (this._dt.Rows.Count >= this.pageNum * this.pIndex)
{
for (int i = first; i < pageNum * this.pIndex; i++)
tmpTable.ImportRow(this._dt.Rows[i]);
}
else
{
for (int i = first; i < this._dt.Rows.Count; i++)
tmpTable.ImportRow(this._dt.Rows[i]);
}
this.grdList.ItemsSource = tmpTable.DefaultView;
tmpTable.Dispose();
}
catch
{
MessageBox.Show("错误");
}
finally
{
DisplayPagingInfo();
}
}
#endregion
#region 画每页显示等数据
/// <summary>
/// 画每页显示等数据
/// </summary>
private void DisplayPagingInfo()
{
SolidColorBrush brush = new SolidColorBrush(Colors.Gray);
SolidColorBrush brush2 = new SolidColorBrush(Color.FromArgb(255, 1, 84, 74));
if (this.pIndex == 1)
{
this.btnPrev.IsEnabled = false;
this.btnFirst.IsEnabled = false;
this.btnPrev.Foreground = brush;
this.btnFirst.Foreground = brush;
}
else
{
this.btnPrev.IsEnabled = true;
this.btnFirst.IsEnabled = true;
this.btnPrev.Foreground = brush2;
this.btnFirst.Foreground = brush2;
}
if (this.pIndex == this.MaxIndex)
{
this.btnNext.IsEnabled = false;
this.btnLast.IsEnabled = false;
this.btnNext.Foreground = brush;
this.btnLast.Foreground = brush;
}
else
{
this.btnNext.IsEnabled = true;
this.btnLast.IsEnabled = true;
this.btnNext.Foreground = brush2;
this.btnLast.Foreground = brush2;
}
this.tbkRecords.Text = $@"{this.pIndex}/{MaxIndex}页({this.pageNum}) Line:{this.allNum}";
int first = (this.pIndex - 4) > 0 ? (this.pIndex - 4) : 1;
int last = (first + 9) > this.MaxIndex ? this.MaxIndex : (first + 9);
// this.grid.Children.Clear();
//for (int i = first; i <= last; i++)
//{
// ColumnDefinition cdf = new ColumnDefinition();
// this.grid.ColumnDefinitions.Add(cdf);
// TextBlock tbl = new TextBlock();
// tbl.Text = i.ToString();
// tbl.MouseLeftButtonUp += new MouseButtonEventHandler(tbl_MouseLeftButtonUp);
// if (i == this.pIndex)
// tbl.IsEnabled = false;
// Grid.SetColumn(tbl, this.grid.ColumnDefinitions.Count - 1);
// Grid.SetRow(tbl, 0);
// this.grid.Children.Add(tbl);
//}
}
#endregion
#region 设置最多大页面
/// <summary>
/// 设置最多大页面
/// </summary>
private void SetMaxIndex()
{
//多少页
int Pages = this._dt.Rows.Count / pageNum;
if (this._dt.Rows.Count != (Pages * pageNum))
{
if (_dt.Rows.Count < (Pages * pageNum))
Pages--;
else
Pages++;
}
this.MaxIndex = Pages;
this.allNum = this._dt.Rows.Count;
}
#endregion
private void tbl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
TextBlock tbl = sender as TextBlock;
if (tbl == null)
return;
int index = int.Parse(tbl.Text.ToString());
this.pIndex = index;
if (index > this.MaxIndex)
this.pIndex = this.MaxIndex;
if (index < 1)
this.pIndex = 1;
ReadDataTable();
}
private void btnFirst_MouseDown(object sender, MouseButtonEventArgs e)
{
this.pIndex = 1;
ReadDataTable();
}
private void btnPrev_MouseDown(object sender, MouseButtonEventArgs e)
{
if (this.pIndex <= 1)
return;
this.pIndex--;
ReadDataTable();
}
private void btnNext_MouseDown(object sender, MouseButtonEventArgs e)
{
if (this.pIndex >= this.MaxIndex)
return;
this.pIndex++;
ReadDataTable();
}
private void btnLast_MouseDown(object sender, MouseButtonEventArgs e)
{
this.pIndex = this.MaxIndex;
ReadDataTable();
}
private void btnGO_Click(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(page.Text) && (Convert.ToInt32(page.Text) > 0 && Convert.ToInt32(page.Text) <= MaxIndex))
{
this.pIndex = Convert.ToInt32(page.Text);
ReadDataTable();
}
}
}
}
页面调用分页
添加分页路径
xmlns:local="clr-namespace:WpfApp.Views"
调用
<Grid Grid.Row="2">
<local:DataGridPage x:Name="gridpage" VerticalAlignment="Bottom"></local:DataGridPage>
</Grid>
后台绑定分页数据 分页控件名.ShowPages(DataGrid名称,数据源DT或者List ,每页行数)
gridpage.ShowPages(grid_saffer, dt, 20);
后台代码
public partial class IndexUserControl : UserControl
{
public IndexUserControl()
{
InitializeComponent();
GetLineSeriesData();
SeriesCollection1();
MygridWindow();
grid_Date();
}
public void grid_Date()
{
//start end location
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("start", typeof(string));
dt.Columns.Add("end", typeof(string));
dt.Columns.Add("location", typeof(string));
DataRow row = dt.NewRow();
for (int i = 0; i < 1000000; i++)
{
row["ID"] = i+1;
row["Name"] = "张三"+i;
row["start"] = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
row["end"] = DateTime.Now.ToString("yyyy-MM-dd");
row["location"] = "北京";
dt.Rows.Add(row);
row = dt.NewRow();
}
//grid_saffer.DataContext = dt.DefaultView;
//this.grid_saffer.ItemsSource = dt.DefaultView;
//设置网格线
grid_saffer.GridLinesVisibility = DataGridGridLinesVisibility.All;
gridpage.ShowPages(grid_saffer, dt, 20);
}
}