WPF自定义datagrid样式单元格样式行列表头Style

已于 2023-07-07 13:28:56 修改
阅读量1.7k 收藏 2
点赞数 1
分类专栏： WPF 文章标签： wpf
于 2023-07-04 21:07:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sir_aligaduo/article/details/131539355
版权

前言:随着wpf的发展，越来越多的开源控件库出来，像比较优秀免费好用的HandyControl，MaterialDesign，收费的代表DevExpress，虽然这些控件库用起来非常的方便，尤其收费的devexpress基本包含了所有你想要的样子，专门为企业大项目服务，但是与此同时也同样产生一个问题,你有没有想过，加入没有这些控件库怎么办，你会用但是你知道底层的样式结构么?出于这点，我选择之后遇到各种控件，有比较复杂一点的样式，我都尝试自己手写一份，这篇作为开章，以此记录下！

今天我要记录的是一个仿excel单元格样式的datagrid样式，说到excel，用devexpress的Gridcontrol直接就可以实现，但是Datagrid也不是不可以，毕竟是原生的控件。

要实现这个给自己的需求，首先妖之道要改那些，针对datagrid，需要改的主要是以下几个Style，Datagrid本身的Style

<Style x:Key="DatagridCommon" TargetType="{x:Type DataGrid}">
   <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="BorderBrush" Value="Gray"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
   <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
   <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
   <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
   <Setter Property="AutoGenerateColumns" Value="False"/>
   <Setter Property="ColumnHeaderHeight" Value="50"/>
   <Setter Property="FontSize" Value="16"/>
   <Setter Property="RowHeight" Value="40"/>
   <Setter Property="HorizontalGridLinesBrush" Value="LightGray"></Setter>
   <Setter Property="VerticalGridLinesBrush" Value="LightGray"></Setter>
   <!--<Setter Property="AlternationCount" Value="2"/>-->
   <Setter Property="Template">
       <Setter.Value>
           <ControlTemplate TargetType="{x:Type DataGrid}">
               <Grid>
                   <Border Background="White" CornerRadius="6">
                       <Border.Effect>
                           <DropShadowEffect ShadowDepth="0" Direction="0" Color="#FFDADADA"/>
                       </Border.Effect>
                   </Border>
                   <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 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 Width="Auto"/>
                                           <ColumnDefinition Width="*"/>
                                           <ColumnDefinition Width="Auto"/>
                                       </Grid.ColumnDefinitions>
                                       <Grid.RowDefinitions>
                                           <RowDefinition Height="Auto"/>
                                           <RowDefinition Height="*"/>
                                           <RowDefinition Height="Auto"/>
                                       </Grid.RowDefinitions>
                                       <Grid Background="White" Grid.Column="1">
                                           <Grid.Effect>
                                               <DropShadowEffect Direction="270" Color="#FFF3F3F3"/>
                                           </Grid.Effect>
                                       </Grid>
                                       <Button Command="{x:Static DataGrid.SelectAllCommand}" Focusable="false" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.All}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" 
Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                       <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                       <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Grid.Row="1"/>
                                       <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Grid.Row="1" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                                       <Grid Grid.Column="1" Grid.Row="2">
                                           <Grid.ColumnDefinitions>
                                               <ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                               <ColumnDefinition Width="*"/>
                                           </Grid.ColumnDefinitions>
                                          <ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                                       </Grid>
                                   </Grid>
                               </ControlTemplate>
                           </ScrollViewer.Template>
                           <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                       </ScrollViewer>
                   </Border>
               </Grid>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
   <Style.Triggers>
       <MultiTrigger>
           <MultiTrigger.Conditions>
               <Condition Property="IsGrouping" Value="true"/>
               <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
           </MultiTrigger.Conditions>
           <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
       </MultiTrigger>
   </Style.Triggers>
</Style>

然后是DataGridColumnHeader的estyle主要是设置datagrid的列头属性，下面是代码。

<Style x:Key="DataGridColumnHeaderCommon" TargetType="DataGridColumnHeader">
  <Setter Property="Background" Value="LightGray"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
      <Setter Property="HorizontalContentAlignment" Value="Center"/>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="DataGridColumnHeader">
                  <Grid Background="{TemplateBinding Background}">
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition/>
                          <ColumnDefinition Width="0"/>
                      </Grid.ColumnDefinitions>
                      <ContentPresenter Margin="0 0 0 0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                  </Grid>
                  <!--sortDirection-->
                  <!--<ControlTemplate.Triggers>
                  <Trigger Property="SortDirection" Value="Ascending">
                      <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                      <Setter TargetName="SortArrow" Property="Text" Value="&#xf160;" />
                  </Trigger>
                  <Trigger Property="SortDirection" Value="Descending">
                      <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                      <Setter TargetName="SortArrow" Property="Text" Value="&#xf161;" />
                  </Trigger>
              </ControlTemplate.Triggers>-->
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

接着是设置每行格式的DataGridRow的style

 <Style x:Key="DataGridRowCommon" TargetType="DataGridRow">
   <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="DataGridRow">
                <Grid >
                    <Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="Transparent"/>
                    <DataGridCellsPresenter />
                </Grid>
                <!--<ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="border"  Value="gray"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="BorderBrush" TargetName="border"  Value="gray"/>
                    </Trigger>
                </ControlTemplate.Triggers>-->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后是设置每个单元格属性的DataGridCell的style

<Style x:Key="DataGridCellCommon" TargetType="DataGridCell">
   <Setter Property="Background" Value="Transparent"/>
   <Setter Property="VerticalContentAlignment" Value="Center"/>
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
   <Setter Property="Template">
       <Setter.Value>
           <ControlTemplate TargetType="DataGridCell">
               <Border Name="cellborder" BorderThickness="1" Background="{TemplateBinding Background}">
                   <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
               </Border>
               <ControlTemplate.Triggers>
                   <Trigger Property="IsMouseOver" Value="True">
                       <Setter Property="BorderBrush" TargetName="cellborder"  Value="gray"/>
                   </Trigger>
                   <Trigger Property="IsSelected" Value="true">
                       <Setter Property="Foreground" Value="Black" />
                   </Trigger>
               </ControlTemplate.Triggers>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
</Style>

综上大概可以实现的界面长这样
请添加图片描述

这四个基本样式基本上可以实现所有的基本外观，当然对于控件本身现实的具体的内容则是要通过控件的datatemplate去实现

MasterRyan
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
wpf DataGrid 实现单击单元格进入编辑状态
03-06
该代码示例实现了在wpf中，单击DataGrid单元格进入编辑状态（DataGridCheckBoxColumn 单击切换选中状态）的功能。
WPFDataGrid样式
02-20
WPFDataGrid样式
WPF 之 DataGrid 入门实践三：样式美化
外来物种
01-08 2635
▪ 前言 .Net 对 UI 控件提供了丰富的样式设置属性，但是当你不是很熟练或者长时间没有使用后很容易忘记其样式的属性，这里对常用的 DataGrid 样式设置做个笔记，以便日后查阅。 ▪ 基本样式 DataGrid 的视图代码： # xaml <DataGrid Style="{StaticResource styleDataGridView}" Height="600"> <DataGrid.Columns> <DataGridTextColumn
WPF的DataGrid设置标题头
ultramand的博客
03-01 1401
上述示例中，BorderThickness属性设置为"0,0,0,2"表示只显示底部的分割线，厚度为2个像素；在给定的代码中，列头的内容将水平居中对齐，背景和前景颜色分别为白色和黑色，边框厚度为 1 像素，边框颜色为浅灰色。要设置DataGrid标题头的分割线、背景色和前景色等属性，您可以使用DataGrid的样式和模板来自定义标题头的外观。上述示例中，Foreground属性设置为"#FFFFFF"表示标题头的前景色（文字颜色）为白色。：设置列头的前景颜色（文字颜色）为黑色 (#000000)。
WPF DataGrid合并单元格（模板列嵌套DataGrid)
09-22
WPF中的DataGrid合并单元格，模板列内嵌套DataGrid，非真正合并
WPF 自定义DataGrid控件样式模板5个
03-09 8128
要实现表头拖动，使用上面的样式代码是不行的，上面的样式代码去掉了拖动的控件。上面的代码实现了隔行换色的效果，但是没有鼠标选中效果。CanUserReorderColumns：获取或设置一个值用来判断是否允许用户重新排列表列的位置。AreRowGroupHeadersFrozen：获取或设置一个值用来判断是否冻结分组行的头部。AreRowDetailsFrozen：获取或设置一个值用来判断是否冻结每行内容的详细信息。RowDetailsTemplate：获取或设置被用于显示行详细部分的内容的模板。
wpf中DataGrid的样式
故里2130
08-07 6968
在wpf中DataGrid是要经常遇到的，也是一个非常复杂的控件。本节使用DataGrid建立一个表格，并且带有上下左右的滚动条，以及表格中有按钮的功能。6.上下左右滚动条ScrollViewer样式。2.MainWindow.xaml文件代码。1.首先建立一个wpf程序，文件总览。7.最后在App文件中进行配置。5.DataGrid样式。4.Button样式。......
WPF中DataGrid动态生成列及自定义表头结构
羽木落凡的博客
08-11 8808
DataGrid动态生成列并实现数据绑定，以及如何实现复杂的表头和列内容
WPF 自定义DataGrid控件样式
韬光养晦
12-02 3820
WPF 自定义DataGrid控件样式 样式代码： <!--DataGrid样式--> <Style TargetType="DataGrid"> <!--网格线颜色--> <Setter Property="CanUserResizeColumns" Value="false"/> <Setter Property="Background" Value="#FFF
WPF DataGrid Style
金石软件
11-20 8452
Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">        Setter Property="Width" Value="5" />        Setter Property="Background" Value="Transparent" />        Setter Property="Curso
wpf中datagrid动态设置单元格背景
02-12
wpf中datagrid动态设置单元格背景颜色。
wpf 动态合并datagrid表头单元格
12-11
wpf 动态合并datagrid表头单元格
wpf DataGridStyle
11-04
自定义DataGrid的列标题样式，行样式，鼠标悬浮及选择样式。 自定义滚动条样式，包括箭头及滚动区。
wpf datagrid排序列表头文字右边的升降箭头
07-05
wpf datagrid排序列表头文字右边的升降箭头Demo，下载下来用VS2019编辑即可执行！！
WPF Datagrid 合并单元格
01-16
WPF Datagrid 合并单元格 复杂表头 支持位置拖动、 列宽度拖动，组内列会按比例自动调整 ；
WPF2022终结版系列课程笔记 1 WPF 基本布局
weixin_43847546的博客
04-22 788
本笔记为B站微软系列技术教程 WPF项目实战合集(2022终结版) 项目记录。
WPF之Label
最新发布
qq_3517289697的博客
04-25 258
Label在wpf中表示控件的文本标签，并提供访问密钥支持。
WPF Dispatcher使用invoke造成死锁
大黄鸭在发光的专栏
04-20 683
而工作线程在任务中需要更新UI元素，因此它尝试使用Dispatcher.Invoke()来确保UI更新操作在UI线程上执行。在WPF中，使用Dispatcher.Invoke()方法同步调用可以导致死锁，尤其是在不正确处理UI线程和其他线程间的同步时。，那么工作线程将等待UI线程处理其Invoke请求，而UI线程又在等待工作线程结束。：这是一个非阻塞调用，它允许工作线程继续执行，而不需要等待UI操作完成。等，这些都可以避免阻塞主UI线程，同时确保工作线程的操作在继续。如果UI线程在工作线程调用。
wpf datagrid 样式
08-12
回答: 在 WPF 的 DataGrid 中，可以使用样式来自定义列标题的外观。你可以在 XAML 文件中设置 DataGrid.ColumnHeaderStyle 属性来指定样式。例如，使用 `<DataGrid.ColumnHeaderStyle>` 标签来定义样式，并在其中设置背景和前景颜色的属性值。可以通过设置 DataGridCheckBoxColumn.HeaderTemplate 来定义标题的模板，并在模板中添加一个 CheckBox 控件。通过点击这个 CheckBox 进行全选操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [WPF 关于DataGrid的样式设置+数据操作](https://blog.csdn.net/u010839204/article/details/105425799)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MasterRyan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值