DataGridColumnHeader 样式的问题 [英] Problems with DataGridColumnHeader Style

问题描述

尝试设置我的数据网格列标题的样式时，我遇到了两个问题.

Trying to style my datagrid column headers, I encounter two problems.

我想要的 :我希望我的标题写在边框中，并绘制边框和边距.看图:

What I want : I'd like my headers to be written in a border with the border drawn and a margin. See the picture :

我得到了什么:我发现边框是在两个标题之间绘制的，而且我无法摆脱手柄的阴影(白色手柄，灰色阴影)，如您所见在图片

What I get : I found that the border are drawn between 2 headers, plus I can't get rid of the shadow of the grip (white grip, grey shadow), as you as see in the picture

这是我的标题风格:

<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Height" Value="30" />
    <Setter Property="SeparatorBrush" Value="{StaticResource ScbWhite}" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Foreground" Value="{StaticResource ScbBlue1}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <Grid Margin="{TemplateBinding Padding}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Border x:Name="columnHeaderBorder"
                            TextBlock.FontWeight="Bold"
                            TextBlock.Foreground="{StaticResource ScbBlue1}"
                            BorderThickness="2"
                            BorderBrush="{StaticResource ScbBlue1}"
                            Background="{StaticResource ScbWhite}"
                            Width="{TemplateBinding Width}"
                            Margin="3,3,3,3"
                            Padding="3,0,3,0">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                    <!--BorderBrush="{Binding VerticalGridLinesBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}"-->
                    <Thumb x:Name="PART_RightHeaderGripper" Grid.Column="1"
                           HorizontalAlignment="Right"
                           Width="6" BorderThickness="0"
                           BorderBrush="{StaticResource ScbWhite}"
                           Background="{StaticResource ScbWhite}"
                           Cursor="SizeWE">
                        <Thumb.BitmapEffect>
                            <DropShadowBitmapEffect Color="Transparent" Opacity="0"/>
                        </Thumb.BitmapEffect>
                    </Thumb>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

请问，我该怎么做才能得到我想要的?

Please, what can I do to get what I want?

推荐答案

DataGrid 添加空列标题以填充其他列未覆盖全宽时的空间.该标头具有 null 内容.我添加了一个 ControlTemplate 触发器，使没有内容的标题的边框透明.

DataGrid adds empty column header to fill space for situations when other columns don't cover full width. That header has null Content. I added a ControlTemplate Trigger to make border transparent for header without content.

为了改变 Thumb 外观，我改变了 Thumb.Template 并使它成为一个扁平的白色矩形

To change Thumb apperance I changed Thumb.Template and made it a flat white rectangle

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
            <Grid Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Border x:Name="columnHeaderBorder"
                        TextBlock.FontWeight="Bold"
                        TextBlock.Foreground="blue"
                        BorderThickness="2"
                        BorderBrush="blue"
                        Background="white"
                        Width="{TemplateBinding Width}"
                        Margin="3,3,3,3"
                        Padding="3,0,3,0">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </Border>
                <!--BorderBrush="{Binding VerticalGridLinesBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}"-->
                <Thumb x:Name="PART_RightHeaderGripper" Grid.Column="1"
                       HorizontalAlignment="Right"
                       Width="6" BorderThickness="0"
                       Margin="0,3"
                       BorderBrush="white"
                       Background="white"
                       Cursor="SizeWE">
                    <Thumb.Template>
                        <ControlTemplate>
                            <Border Background="{TemplateBinding Background}"></Border>
                        </ControlTemplate>
                    </Thumb.Template>
                </Thumb>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="Content" Value="{x:Null}">
                    <!--<Setter Property="BorderBrush" Value="Red" TargetName="columnHeaderBorder"/>-->
                    <Setter Property="BorderBrush" Value="Transparent" TargetName="columnHeaderBorder"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

//我替换了模板中的一些 StaticResources 以使我的项目编译.请恢复它们或仅复制模板的修改部分

// I replaced some StaticResources in a template to make my project compile. please restore them back or copy only modified parts of template

这篇关于DataGridColumnHeader 样式的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！