WPF DataGrid自定义样式模板 列表头分隔线 滚动条滑块大小设定 动态数据绑定和更新

[ 效果图回去放,代码在后面 ]


[ 用到的一些定义如果没有附代码可以随便写个看下效果,因为直接从项目中copy出来的,难免漏掉点点... ]


首先,有几点需要注意:

1.表头样式 [ DataGridColumnHeader ]  

默认带分割线,但每列表头左右分割线都占1px,也就是说假如有三列:

a.  表格最左、右边应该不需要分割线,但默认的有1px

b.  中间需要1px分割线,但默认有2px(相邻两表头分别都有1px)

==>自定义样式使用margin控制,保证表格左右边无分割线,相邻分隔线1px

2.滚动条 [ ScrollBar ]

①结构构成参看:  https://www.cnblogs.com/cody1988/p/wpf_ScrollBar.html

②这里由于项目中表格数据会很多,所以设置垂直方向滚动条的滑块固定尺寸(长30px),避免数据刷出太多导致滚动条太窄点不中,

通过<Track ... ViewportSize="NaN">这个属性设定,这样滑块尺寸就不会通过数据数目来计算确定滑块长度。

③同时,由于固定了滑块大小,界面上表格垂直滚动条可见的情况(VerticalScrollBarVisibility="Visible"),滚动条滚动不可用的时候,滑块会固定在滚动条下方,这个通过设定触发器,保证不可滚动的时候滑块隐藏不可见。

<Setter Property="Visibility" TargetName="PART_Track" Value="Collapsed"/>


代码区域


ps:这里用到Themes主题,可以不管这个,其实真正设定到分割线的,也就只有DataGridHeaderBorder控件,
但自带的属性SeparatorVisibility没有作用,因为默认就是左右都1px宽度的线,不符合我想要的效果,

[ BorderThickness="1,0,1,1" Margin="-1,0" ] 这两个设定的显示效果1px分割,表格左右两边不需显示分割线了。

因此这个可以自己画样式,不用Themes主体。

另外的两个Thumb是用来用户手动调整列宽用的。

<!-- DataGrid表格列表头样式 带分割线 -->
    <Style x:Key="DataGridColumnHeaderStyle2" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="FZLTZHUNHK"/>
        <Setter Property="Foreground" Value="{DynamicResource Common.Static.Foreground}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource Common.Static.BorderBrush2}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid>
                        <Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,1,1" Margin="-1,0" Background="{DynamicResource Common.Static.Background2}" IsClickable="{TemplateBinding CanUserSort}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" Padding="{TemplateBinding Padding}" SortDirection="{TemplateBinding SortDirection}" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Themes:DataGridHeaderBorder>
                        <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                        <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


设定了多项属性,不明白的可以上msdn上查解释意思

CellStyle设置单元格样式,像文本居左还是居右显示,都该设置在这里,设置RowStyle没有作用!

DataGridColumnHeadersPresenter  表头

ScrollContentPresenter  内容显示区域

ScrollBar x:Name="PART_VerticalScrollBar"  垂直方向滚动条

ScrollBar x:Name="PART_HorizontalScrollBar"   水平方向滚动条


                
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值