WPF控件自定义之DataGrid

一、DataGrid控件介绍DataGrid是 WPF 里最复杂、功能最强的列表控件用于展示行列数据、支持编辑、排序、筛选、分组、样式美化、模板自定义等。下面用最实用、开发最常用的方式讲透它二、核心属性1、数据源ItemsSource绑定集合ObservableCollectionT最佳CanUserAddRows是否显示底部空行默认 true2、行列显示控制AutoGenerateColumns是否自动生成列开发常用 falseCanUserResizeColumns是否允许拖动列宽CanUserSortColumns是否允许点击表头排序CanUserReorderColumns是否允许拖动列顺序HeadersVisibility显示 / 隐藏行头、列头RowHeight行高ColumnWidth列宽3、选择与编辑SelectionModeSingle / ExtendedSelectionUnitFullRow / Cell / CellOrRowHeaderIsReadOnly是否只读CanUserEditRows是否允许编辑行4、网格线与样式GridLinesVisibility显示 / 隐藏网格线HorizontalGridLinesBrushVerticalGridLinesBrushRowBackground/AlternatingRowBackground斑马线5、列类型1DataGridTextColumn 文本DataGridTextColumn Header姓名 Binding{Binding Name} Width100/2DataGridCheckBoxColumn 勾选列DataGridCheckBoxColumn Header启用 Binding{Binding IsEnable}/3DataGridComboBoxColumn 下拉列DataGridComboBoxColumn Header性别 SelectedItemBinding{Binding Gender} ItemsSource{Binding GenderList}/4DataGridHyperlinkColumn 链接列DataGridHyperlinkColumn Header详情 Binding{Binding Url}/5DataGridTemplateColumn 模板列万能DataGridTemplateColumn Header操作 DataGridTemplateColumn.CellTemplate DataTemplate Button Content删除 ClickBtnDelete_Click/ /DataTemplate /DataGridTemplateColumn.CellTemplate /DataGridTemplateColumn三、自定义控件1、自定义Style1表头自定义Style TargetTypeDataGridColumnHeader Setter PropertySnapsToDevicePixels ValueTrue / Setter PropertyMinWidth Value0 / Setter PropertyMinHeight Value28 / Setter PropertyHeight Value{Binding RelativeSource{RelativeSource AncestorTypeDataGrid}, Path(AdcUIHelper:SpecialControlAssist.RowHeight)}/ Setter PropertyFontSize Value14 / Setter PropertyForeground Value{StaticResource DataGridForegroundBrush} / Setter PropertyCursor ValueHand / Setter PropertyTemplate Setter.Value ControlTemplate TargetTypeDataGridColumnHeader Border x:NameColumnHeaderBorder Background{StaticResource DataGridHeaderBackgroundBrush} WidthAuto Grid Grid.ColumnDefinitions ColumnDefinition Width* / ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions ContentPresenter Margin0,0,0,0 VerticalAlignmentCenter HorizontalAlignmentCenter/ Rectangle x:NamespiltRectange Grid.Column1 HorizontalAlignmentRight Width1 FillWhite/ /Grid /Border /ControlTemplate /Setter.Value /Setter /Style2行自定义Style TargetTypeDataGridRow Setter PropertyBackground Value{StaticResource DataGridBackgroundBrush} / Setter PropertyHeight Value{Binding RelativeSource{RelativeSource AncestorTypeDataGrid}, Path(AdcUIHelper:SpecialControlAssist.RowHeight)}/ Setter PropertyForeground Value{StaticResource DataGridForegroundBrush} / Style.Triggers !--隔行换色-- Trigger PropertyAlternationIndex Value0 Setter PropertyBackground Value{StaticResource DataGridBackgroundBrush} / /Trigger Trigger PropertyAlternationIndex Value1 Setter PropertyBackground Value{StaticResource DataGridRowSplitBackgroundBrush} / /Trigger Trigger PropertyIsSelected ValueTrue Setter PropertyBackground Value{StaticResource DataGridRowSelectedBackgroundBrush}/ Setter PropertyForeground Value{StaticResource DataGridRowSelectedForegroundBrush}/ /Trigger /Style.Triggers /Style3单元格自定义!--单元格样式触发-- Style x:KeyDataGridBaseCellStyle TargetTypeDataGridCell Setter PropertyBorderThickness Value0/ Setter PropertyBackground ValueTransparent/ Setter PropertyTemplate Setter.Value ControlTemplate TargetTypeDataGridCell Border x:NameCellBorder Background{TemplateBinding Background} BorderThickness0 SnapsToDevicePixelsTrue ContentPresenter VerticalAlignmentCenter HorizontalAlignmentCenter/ /Border ControlTemplate.Triggers Trigger PropertyIsSelected ValueTrue Setter TargetNameCellBorder PropertyBackground Value{StaticResource DataGridRowSelectedBackgroundBrush}/ Setter PropertyForeground Value{StaticResource DataGridRowSelectedForegroundBrush}/ /Trigger /ControlTemplate.Triggers /ControlTemplate /Setter.Value /Setter /Style4DataGrid自定义Style x:KeyNormalDataGridStyle TargetTypeDataGrid Setter PropertyBorderBrush ValueTransparent / Setter PropertyIsReadOnly ValueTrue/ Setter PropertyAutoGenerateColumns Valuefalse/ Setter PropertyCanUserResizeColumns Valuefalse/ Setter PropertyCanUserSortColumns ValueFalse/ Setter PropertyCanUserResizeColumns ValueFalse/ Setter PropertyCanUserResizeRows ValueFalse/ Setter PropertyCanUserReorderColumns ValueFalse/ Setter PropertyCanUserAddRows ValueFalse/ Setter PropertySelectionMode ValueSingle/ Setter PropertyAlternationCount Value2/ Setter PropertyRowHeaderWidth Value0/ Setter PropertyBorderThickness Value0/ Setter PropertyHorizontalScrollBarVisibility ValueAuto/ Setter PropertyVerticalScrollBarVisibility ValueAuto/ Setter PropertySnapsToDevicePixels ValueTrue/ Setter PropertyHorizontalGridLinesBrush ValueWhite/ Setter PropertyVerticalGridLinesBrush ValueWhite/ Setter PropertyCellStyle Value{StaticResource DataGridBaseCellStyle}/ Setter PropertyTemplate Setter.Value ControlTemplate TargetTypeDataGrid ScrollViewer x:NameDG_ScrollViewer Focusablefalse ScrollViewer.Template ControlTemplate TargetTypeScrollViewer Grid Grid.ColumnDefinitions ColumnDefinition WidthAuto/ ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions Grid.RowDefinitions RowDefinition HeightAuto/ RowDefinition Height*/ RowDefinition HeightAuto/ /Grid.RowDefinitions !-- 这里把右边缘设为 0彻底消除重叠 -- Border Grid.Column1 Grid.Row0 DataGridColumnHeadersPresenter/ /Border ScrollContentPresenter x:NamePART_ScrollContentPresenter Grid.ColumnSpan2 Grid.Row1/ !-- 垂直滚动条 -- ScrollBar x:NamePART_VerticalScrollBar Grid.Column2 Grid.Row1 OrientationVertical ViewportSize{TemplateBinding ViewportHeight} Maximum{TemplateBinding ScrollableHeight} Value{Binding VerticalOffset, ModeOneWay, RelativeSource{RelativeSource TemplatedParent}} Visibility{TemplateBinding ComputedVerticalScrollBarVisibility}/ !-- 水平滚动条 -- ScrollBar x:NamePART_HorizontalScrollBar Grid.Column1 Grid.Row2 OrientationHorizontal ViewportSize{TemplateBinding ViewportWidth} Maximum{TemplateBinding ScrollableWidth} Value{Binding HorizontalOffset, ModeOneWay, RelativeSource{RelativeSource TemplatedParent}} Visibility{TemplateBinding ComputedHorizontalScrollBarVisibility}/ /Grid /ControlTemplate /ScrollViewer.Template ItemsPresenter SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels}/ /ScrollViewer /ControlTemplate /Setter.Value /Setter /Style2、资源字典!-- 正常状态颜色标识 -- SolidColorBrush x:KeyNormalStateBrush Color#4CAF50/ !-- 注意级别状态颜色标识 -- SolidColorBrush x:KeyAttentionStateBrush Color#F7AB00/ !-- 错误级别状态颜色标识 -- SolidColorBrush x:KeyErrorStateBrush Color#D32F2F/ !-- DataGrid -- SolidColorBrush x:KeyDataGridBackgroundBrush Color#F7F7F7/ SolidColorBrush x:KeyDataGridForegroundBrush Color#1F2937/ SolidColorBrush x:KeyDataGridHeaderBackgroundBrush Color#D9D9D9/ !-- 各行换色 -- SolidColorBrush x:KeyDataGridRowSplitBackgroundBrush Color#EDEDED/ SolidColorBrush x:KeyDataGridRowSelectedBackgroundBrush Color#1CA5DC/ SolidColorBrush x:KeyDataGridRowSelectedForegroundBrush Color#FFFFFF/3、行、列状态显示自定义!--试剂-剩余可测数列样式触发-- Style x:KeyReagent_RemainVolCellStyle TargetTypeDataGridCell BasedOn{StaticResource DataGridBaseCellStyle} Style.Triggers DataTrigger Binding{Binding RemainCount, Converter{StaticResource ReagentRemainCountToStatusConverter}} Value充足 Setter PropertyBackground Value{StaticResource NormalStateBrush}/ Setter PropertyForeground Value{StaticResource DataGridRowSelectedForegroundBrush}/ /DataTrigger DataTrigger Binding{Binding RemainCount, Converter{StaticResource ReagentRemainCountToStatusConverter}} Value已空 Setter PropertyBackground Value{StaticResource ErrorStateBrush}/ Setter PropertyForeground Value{StaticResource DataGridRowSelectedForegroundBrush}/ /DataTrigger DataTrigger Binding{Binding RemainCount, Converter{StaticResource ReagentRemainCountToStatusConverter}} Value不足 Setter PropertyBackground Value{StaticResource AttentionStateBrush}/ Setter PropertyForeground Value{StaticResource DataGridRowSelectedForegroundBrush}/ /DataTrigger /Style.Triggers /Style4、Converterpublic class ReagentRemainCountToStatusConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value null) return string.Empty; if (value is int remainCount) { if (remainCount 0) return 已空; var systemSetupValue ServiceManager.GetServiceISystemSetupAppService().GetSystemSetupValue(SystemSetupType.ReagentAndComsumablesSetup.ToString()); if (string.IsNullOrEmpty(systemSetupValue)) return string.Empty; var sampleSetup JsonConvert.DeserializeObjectReagentAndConsumablesSetupModel(systemSetupValue); if (sampleSetup null) return string.Empty; if (remainCount sampleSetup.ReagentAlarmThresholdValue) return 充足; return 不足; } return string.Empty; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }5、效果图