WPF （DataGridColumnHeader）实现自义定列头样式并绑定数据

Posted 2021-03-21 lonelyxmas

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WPF （DataGridColumnHeader）实现自义定列头样式并绑定数据相关的知识，希望对你有一定的参考价值。

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

技术图片

实现功能是这样的

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

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

思路

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

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

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


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

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控件


public class LableColumn : Label
    {
        public LableColumn()
            : base() 
        {
        }
 
        //获得值
        public string Ms    
        {
            get { return (string)GetValue(MsProperty); }
            set { SetValue(MsProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for ms.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MsProperty =
            DependencyProperty.Register("Ms", typeof(string), typeof(LableColumn), new FrameworkPropertyMetadata("", Onshow));
 
 
 
        //用于绑定的值
        public string MyProperty
        {
            get { return (string)GetValue(MyPropertyProperty); }
            set { SetValue(MyPropertyProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MyPropertyProperty =
            DependencyProperty.Register("MyProperty", typeof(string), typeof(LableColumn), new PropertyMetadata(""));
 
        
 
        
 
        private static void Onshow(DependencyObject d, DependencyPropertyChangedEventArgs e) 
        {
            LableColumn l = d as LableColumn;
 
            if (l.Ms != null && l.Ms != "")
            {
                String[] strarr = l.Ms.ToString().Split(new string[] { "_" }, StringSplitOptions.None);
           
                if (l.Tag.Equals("1"))
                {
                 l.MyProperty=   strarr[3];
                }
                else if (l.Tag.Equals("2"))
                {
                    l.MyProperty = strarr[0];
                 
                }
                else if (l.Tag.Equals("3"))
                {  l.MyProperty= strarr[2] ;  
                }
                else if (l.Tag.Equals("4"))
                {
                     l.MyProperty= strarr[1];
                }
            }
        }
 
 
    }

前台的DataGridColumnHeader 样式


  <Style TargetType="{x:Type DataGridColumnHeader}">
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
 
                        <Grid HorizontalAlignment= "Left " Height= "Auto " VerticalAlignment= "Stretch " Width= "Auto " Background= "White " Margin= "0 ">
                            <Grid.RowDefinitions>
                                <RowDefinition Height= "* "/>
                            </Grid.RowDefinitions>
                            <Border BorderBrush= "Black " BorderThickness= "1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Grid.RowSpan= "1 ">
                                <Grid HorizontalAlignment= "Stretch " Height= "Auto " Margin= "-1,0,0,0 " VerticalAlignment= "Stretch ">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height= "20* "/>
                                        <RowDefinition Height= "20* "/>
                                        <RowDefinition Height= "20* "/>
                                        <RowDefinition Height= "20* "/>
                                    </Grid.RowDefinitions>
                                    <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Width= "Auto " Grid.Row= "1 ">
                                        <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 "/>
                                    </Border>
                                    <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Width= "Auto ">
                                        <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 "/>
                                    </Border>
                                    <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"/>
 
                                    <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0,0,0,0 " VerticalAlignment= "Stretch " Width= "Auto " Grid.Row= "2 ">
                                        <TextBlock  TextWrapping =  "Wrap "   Background= "#FFF9F9F9 " Text="{Binding Path=Content,ElementName=lText}"  HorizontalAlignment= "Stretch " Height= "35 " Margin= "0 " VerticalAlignment= "Stretch " Width= "82 "/>
                                  
                                    </Border>
                                                                      <Border BorderBrush= "Black " BorderThickness= "1,1,0,1 " HorizontalAlignment= "Stretch " Height= "Auto " Margin= "0 " VerticalAlignment= "Stretch " Width= "Auto " Grid.Row= "3 ">
                                        <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 "/>
                                    </Border>
                                </Grid>
                            </Border>
                        </Grid> 
 
                    </ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

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

一个是绑定自身属性

{Binding MyProperty, RelativeSource={RelativeSource self}}

第二是绑定其他控件属性

{Binding Path=Content,ElementName=lText}

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

技术图片

以上是关于WPF （DataGridColumnHeader）实现自义定列头样式并绑定数据的主要内容，如果未能解决你的问题，请参考以下文章

WPF DataGrid表头合并且动态添加列

在 WPF 中需要自定义样式的帮助

如何自定义和重用DataGridColumnHeader样式？

WPF，DataGrid怎么设置列标题分割线的颜色

DataGrid列头标题居中及列中文本居中

在 DataGrid 中使用验证器 - Flex

WPF （DataGridColumnHeader）实现自义定列头样式 并绑定数据

思路

解决方法 自义定控件

WPF （DataGridColumnHeader）实现自义定列头样式并绑定数据

解决方法自义定控件