原文:WPF (DataGridColumnHeader)实现自义定列头样式 并绑定数据

实现功能是这样的

自定义列头 样式 样式里的 数据来源于后台绑定

这篇就说头样式 和头样式数据绑定

思路

1)实现功能的时候 首先想的是编辑列头样式 选择使用DataGridTextColumn 编辑 DataGridColumnHeader 样式

样式很简单 就布局好了 这段结束

2)动态列 没有要求换肤 所以就没有完全使用MVVM 直接写后台循环   到这里数据有了


  1. List<string> LS = new List<string>();
  2. public void addColumn()
  3. {
  4. LS.Add("表下カップ綿天竺仮縫い_37s_C_1");
  5. LS.Add("上カップマーキしつけ_28s_C_2");
  6. LS.Add("上下カップ接ぎ_33s_C_3");
  7. LS.Add("上下カップ押え_62s_B_4");
  8. LS.Add("カップ脇しつけ_14s_B_5");
  9. LS.Add("表上カップレース端押さえ_41s_B_6");
  10. for (int i = 0; i < LS.Count; i++)
  11. {
  12. DataGridTextColumn dl = new DataGridTextColumn();
  13. dl.Header=LS[i];
  14. dataGrid.Columns.Add(dl);
  15. }
  16. }

3)最难的数据绑定 数据来源 header 如果有只有俩个 就不用那么麻烦 直接在样式里ControlTemplate   中用TemplateBinding 绑定 Content 和tag  就可以

{TemplateBinding Content}

content = Header 里的值  当然 要使用tag 就要在上面的for 里加上tag的值 样式里 需要 绑定{TemplateBinding tag}

但是 我的项目需要4个 这就需要夸越TemplateBinding 这个绑定 我查了一下 想扩展template 但是资料太少

解决方法  自义定控件

首先我显示的控件是lable 所以 我自定义了一个lable 写 依赖属性 虽然有点繁琐 也算是一个比较笨的解决方案

1)定义 Ms  来获得header的数据  并处理数据

2)定义MyProperty 来获得Ms处理后的数据 绑定到 lable 的 Content 属性

3)使用控件本身的tag 来区分那个lable

贴码:

自定义的lable控件


  1. public class LableColumn : Label
  2. {
  3. public LableColumn()
  4. : base()
  5. {
  6. }
  7. //获得值
  8. public string Ms
  9. {
  10. get { return (string)GetValue(MsProperty); }
  11. set { SetValue(MsProperty, value); }
  12. }
  13. // Using a DependencyProperty as the backing store for ms. This enables animation, styling, binding, etc...
  14. public static readonly DependencyProperty MsProperty =
  15. DependencyProperty.Register("Ms", typeof(string), typeof(LableColumn), new FrameworkPropertyMetadata("", Onshow));
  16. //用于绑定的值
  17. public string MyProperty
  18. {
  19. get { return (string)GetValue(MyPropertyProperty); }
  20. set { SetValue(MyPropertyProperty, value); }
  21. }
  22. // Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
  23. public static readonly DependencyProperty MyPropertyProperty =
  24. DependencyProperty.Register("MyProperty", typeof(string), typeof(LableColumn), new PropertyMetadata(""));
  25. private static void Onshow(DependencyObject d, DependencyPropertyChangedEventArgs e)
  26. {
  27. LableColumn l = d as LableColumn;
  28. if (l.Ms != null && l.Ms != "")
  29. {
  30. String[] strarr = l.Ms.ToString().Split(new string[] { "_" }, StringSplitOptions.None);
  31. if (l.Tag.Equals("1"))
  32. {
  33. l.MyProperty= strarr[3];
  34. }
  35. else if (l.Tag.Equals("2"))
  36. {
  37. l.MyProperty = strarr[0];
  38. }
  39. else if (l.Tag.Equals("3"))
  40. { l.MyProperty= strarr[2] ;
  41. }
  42. else if (l.Tag.Equals("4"))
  43. {
  44. l.MyProperty= strarr[1];
  45. }
  46. }
  47. }
  48. }

前台的DataGridColumnHeader 样式


  1. <Style TargetType="{x:Type DataGridColumnHeader}">
  2. <Setter Property="VerticalContentAlignment" Value="Center"/>
  3. <Setter Property="Template">
  4. <Setter.Value>
  5. <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
  6. <Grid HorizontalAlignment= "Left " Height= "Auto " VerticalAlignment= "Stretch " Width= "Auto " Background= "White " Margin= "0 ">
  7. <Grid.RowDefinitions>
  8. <RowDefinition Height= "* "/>
  9. </Grid.RowDefinitions>
  10. <Border BorderBrush= "Black " BorderThickness= "1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Grid.RowSpan= "1 ">
  11. <Grid HorizontalAlignment= "Stretch " Height= "Auto " Margin= "-1,0,0,0 " VerticalAlignment= "Stretch ">
  12. <Grid.RowDefinitions>
  13. <RowDefinition Height= "20* "/>
  14. <RowDefinition Height= "20* "/>
  15. <RowDefinition Height= "20* "/>
  16. <RowDefinition Height= "20* "/>
  17. </Grid.RowDefinitions>
  18. <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Width= "Auto " Grid.Row= "1 ">
  19. <local:LableColumn Tag="3" Content="{Binding RelativeSource={RelativeSource self},Path=MyProperty}" Ms="{TemplateBinding Content}" Background= "#FFF9F9F9 " HorizontalAlignment= "Stretch " Height= "25 " Margin= "0 " VerticalAlignment= "Stretch " Width= "82 "/>
  20. </Border>
  21. <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Width= "Auto ">
  22. <local:LableColumn Tag="1" Content="{Binding MyProperty, RelativeSource={RelativeSource self}}" Ms="{TemplateBinding Content}" Background= "#FFF9F9F9 " HorizontalAlignment= "Stretch " Height= "25 " Margin= "0 " VerticalAlignment= "Stretch " Width= "82 "/>
  23. </Border>
  24. <local:LableColumn x:Name="lText" Tag="2" Content="{Binding MyProperty, RelativeSource={RelativeSource self}}" Ms="{TemplateBinding Content}" Background= "#FFF9F9F9 " HorizontalAlignment= "Stretch " Height= "35 " Margin= "0 " VerticalAlignment= "Stretch " Width= "82 " Visibility="Collapsed"/>
  25. <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0,0,0,0 " VerticalAlignment= "Stretch " Width= "Auto " Grid.Row= "2 ">
  26. <TextBlock TextWrapping = "Wrap " Background= "#FFF9F9F9 " Text="{Binding Path=Content,ElementName=lText}" HorizontalAlignment= "Stretch " Height= "35 " Margin= "0 " VerticalAlignment= "Stretch " Width= "82 "/>
  27. </Border>
  28. <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Width= "Auto " Grid.Row= "3 ">
  29. <local:LableColumn Tag="4" Content="{Binding MyProperty, RelativeSource={RelativeSource self}}" Ms="{TemplateBinding Content}" Background= "#FFF9F9F9 " HorizontalAlignment= "Stretch " Height= "35 " Margin= "0 " VerticalAlignment= "Stretch " Width= "82 "/>
  30. </Border>
  31. </Grid>
  32. </Border>
  33. </Grid>
  34. </ControlTemplate>
  35. </Setter.Value>
  36. </Setter>
  37. </Style>

数据绑定的技能 这边涉及到俩种

一个是绑定自身属性

{Binding MyProperty, RelativeSource={RelativeSource self}}

第二是绑定其他控件属性

{Binding Path=Content,ElementName=lText}

肯定有更好的方法来实现 这个功能  希望有人留言 得以分享学习

WPF (DataGridColumnHeader)实现自义定列头样式 并绑定数据的更多相关文章

  1. WPF (DataGridRowHeaderStyle)实现自义定行样式 并绑定数据

    原文:WPF (DataGridRowHeaderStyle)实现自义定行样式 并绑定数据 功能阐述 就上面那图片 刚开始 考虑使用 RowHeaderTemplate 来实现  发现总绑定不上数据  ...

  2. WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件)对象绑定

    原文:WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件)对象绑定 WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件) 上面的 ...

  3. WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件)

    原文:WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件) 因为项目需要 要实现这个~ 怎么实现画红框内容部分 田字格和上面Textbox 属于一个自定义控件  大 ...

  4. WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习

    WPF中 DataGrid 列头合并,类似于报表设计.效果图如下↓ 1.新建一个WPF项目WpfApplication1,新建一个窗体DataGridTest,前台代码如下: <Window x ...

  5. Extjs 动态修改gridPanel列头信息以及store数据的方法

    1 /*******************************checkbox按钮 历史报警信息**************************************/ var check ...

  6. dataTable 加了竖向滚动条导致列头样式错位的问题 / 亲测可用,不好用你打我,用好了记得点推荐

    tab在没有显示之前,容器是没有高度宽度的,而dt在自动计算高度和宽度时是获取的外部容器的高度和宽度,当切换tab时,dt获取不到这个高度宽度,导致列头都挤在一起,是用下面代码解决此问题 $('a[d ...

  7. WPF报表自定义通用可筛选列头-WPF特工队内部资料

    由于项目需要制作一个可通用的报表多行标题,且可实现各种类型的内容显示,包括文本.输入框.下拉框.多选框等(自定的显示内容可自行扩展),并支持参数绑定转换,效果如下: 源码结构 ColumnItem类: ...

  8. 设置DatagridView的列头样式

    设置DataGridView.ColumnHeaderDefaultCellStyle的BackColor属性会发现没有效果.这是因为在启动了可视样式的时候,BackColor和ForeColor的值 ...

  9. WPF Datagrid 动态生成列 并绑定数据

    原文:WPF Datagrid 动态生成列 并绑定数据 说的是这里 因为列头是动态加载的 (后台for循环 一会能看到代码) 数据来源于左侧列 左侧列数据源 当然num1 属于临时的dome使用  可 ...

随机推荐

  1. layui 滚动加载

    直接上核心代码,其实官网介绍的很详细: var pageSize = 5;//每次请求新闻的条数 flow.load({ elem: '#newsList' //指定列表容器 ,scrollElem: ...

  2. ES6-map数据结构,增加、删除、查找 方法(set get has delete clear ) 属性:size

    map数据结构: 本质上是键值对的集合,类似集合: 可以遍历,方法很多,可以跟各种数据格式转换. let json = { name:'ananiah', age:'18' } //效率低 需要遍历j ...

  3. web前端面试知识点整理

    一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...

  4. Python内置装饰器@property

    在<Python装饰器(Decorators )>一文中介绍了python装饰器的概念,日常写代码时有一个装饰器很常见,他就是内置的@property. 我们一步步的来接近这个概念. 一个 ...

  5. 获取redis中所有的key,清空整个 Redis 服务器的数据

    获取 redis 中所有的 key 可用使用 *. redis 127.0.0.1:6379> KEYS * Redis Flushall 命令用于清空整个 Redis 服务器的数据(删除所有数 ...

  6. "(error during evaluation)" computed

    在vue-cli搭建的去哪网app项目中使用了  computed  计算属性 computed计算属性在chrome插件中的 vue devtools 插件中报错 应该显示出来 computed 属 ...

  7. 基于 Unity 的一种透明通道压缩处理

    由于 Android 平台各种硬件标准的不统一,为了开发的软件项目能够在大部分 Android 机上完美运行,我们需要以较差的硬件支持为基础做准备. Android 平台基本上都支持对不带 Alpha ...

  8. December 07th, Week 49th Saturday, 2019

    Snowflakes are pretty patterns etched in water's dreams. 雪花,是水在梦中镌刻的美丽图案. From Anthony T.Hincks. Tod ...

  9. 通过BGP实现流量劫持

    BGP BGP全称是Border Gateway Protocol,翻译成中文是边界网关协议,用于全球各个AS之间的路由.它的地位是毋庸置疑的,如果没有它就没有全球的因特网.因为全球各个AS都等价的维 ...

  10. 安装oracle11g服务端

    1.将oracle11g压缩包 解压到D盘根目录下 2.打开解压出来的文件夹,以管理员身份运行setup 3.警告弹框点击“是(Y)” 4.在此步骤中,可以提供您的电子邮件,以获取有关Oracle安全 ...