你如何设计 WPF GridView Header 的样式？

How do you style a WPF GridView Header?

提问by djschwartz

I went from this: WPF GridViewHeader styling questions

我从这个出发：WPF GridViewHeader 样式问题

to this:

对此：

Now I just need to get rid of the white space to the right of the "Size" header. I basically have a template for the GridViewColumnHeader that makes it a TextBlock. Is there any way I can set the background for that header area so that it spans the entire width of the GridView?

现在我只需要去掉“Size”标题右侧的空白区域。我基本上有一个 GridViewColumnHeader 的模板，使它成为一个 TextBlock。有什么方法可以设置该标题区域的背景，使其跨越 GridView 的整个宽度？

ADDED CODE:

添加代码：

This is my right-most column. The grid does not span 100% of available window area. In the header I need everything to the right of this column to have the same background as the column headers themselves.

这是我最右边的专栏。网格不会跨越 100% 的可用窗口区域。在标题中，我需要此列右侧的所有内容与列标题本身具有相同的背景。

<Style x:Key="GridHeaderRight" TargetType="{x:Type GridViewColumnHeader}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                            <TextBlock Text="{TemplateBinding Content}" Padding="5" Width="{TemplateBinding Width}" TextAlignment="Right">
                                <TextBlock.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0.0" Color="#373638" />
                                        <GradientStop Offset="1.0" Color="#77797B" />
                                    </LinearGradientBrush>
                                </TextBlock.Background>
                            </TextBlock>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="Background" Value="Green" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0.0" Color="#373638" />
                            <GradientStop Offset="1.0" Color="#77797B" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>

<GridViewColumn Width="200" HeaderContainerStyle="{ StaticResource GridHeaderRight}" Header="Size">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Path=EmployeeNumber}" HorizontalAlignment="Right"></TextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>

UPDATE

更新

I am one step closer (I think) to solving this.

我离解决这个问题又近了一步（我认为）。

I added the following code inside the GridView tag:

我在 GridView 标签中添加了以下代码：

<GridView.ColumnHeaderContainerStyle>
    <Style TargetType="GridViewColumnHeader">
        <Setter Property="BorderThickness" Value="1"></Setter>
        <Setter Property="BorderBrush" Value="Green"></Setter>
        <Setter Property="Height" Value="Auto"></Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0.0" Color="#373638" />
                    <GradientStop Offset="1.0" Color="#77797B" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</GridView.ColumnHeaderContainerStyle>

The border is there just so you can see the boundary of what this style covers. This is an enlarged image of what this does. It seems to be what I want if I can get rid of the little white border on the bottom.

边界就在那里，这样您就可以看到这种样式所涵盖的边界。这是其作用的放大图。如果我能去掉底部的小白边，这似乎是我想要的。

So I guess removing that tiny white bottom border would also be an accepted answer for this one.

所以我想删除那个微小的白色底部边框也是这个答案的可接受的答案。

ColumnHeaderContainerStyle http://img170.imageshack.us/img170/3851/columnheadercontainerst.png

ColumnHeaderContainerStyle http://img170.imageshack.us/img170/3851/columnheadercontainerst.png

回答by Bret Faller

This is a simple style that will accomplish what you are looking for. Just change the Transparent background on the Border to be your desired gradient.

这是一种简单的风格，可以实现您的需求。只需将边框上的透明背景更改为您想要的渐变。

    <Style TargetType="{x:Type GridViewColumnHeader}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                    <Border BorderThickness="0,0,0,1" BorderBrush="Black" Background="Transparent">
                        <TextBlock x:Name="ContentHeader" Text="{TemplateBinding Content}" Padding="5,5,5,0" Width="{TemplateBinding Width}" TextAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontSize" Value="12" />
    </Style>

回答by Bizhan

sometimes the simplest way is the best. All you need to do it to change the TextBlockattached properties of GridViewColumnHeader

有时最简单的方法就是最好的。您只需更改TextBlock附加属性即可GridViewColumnHeader

Define something like this in Resources:

在资源中定义类似的东西：

<Style TargetType="{x:Type GridViewColumnHeader}" BasedOn="{StaticResource {x:Type GridViewColumnHeader}}">
    <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
    <Setter Property="TextBlock.Foreground" Value="Black"/>
</Style>

回答by Thomas Levesque

Have a look at the GridViewColumnHeader.Roleproperty. The sample in the documentation for the GridViewColumnHeaderRoleenumeration might give you some ideas...

看一看GridViewColumnHeader.Role楼盘。GridViewColumnHeaderRole枚举文档中的示例可能会给您一些想法......

EDIT: Have you considered using the GridView.HeaderStyleproperty ?

编辑：您是否考虑过使用该GridView.HeaderStyle属性？

回答by djschwartz

I solved this issue but I think there should be a better way of doing it. The problem was that I had TextBlocks on the header of each column. The unused area didn't have anything on the header row. I just added a TextBlock with the same background in the GridView.ColumnHeaderContainerStyle and it happened to span the rest of the unused width of the grid.

我解决了这个问题，但我认为应该有更好的方法。问题是我在每列的标题上都有 TextBlocks。未使用的区域在标题行上没有任何内容。我刚刚在 GridView.ColumnHeaderContainerStyle 中添加了一个具有相同背景的 TextBlock，它恰好跨越了网格的其余未使用宽度。

<GridView.ColumnHeaderContainerStyle>
    <Style TargetType="GridViewColumnHeader">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                    <TextBlock Text="" Padding="5">
                        <TextBlock.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0.0" Color="#373638" />
                                <GradientStop Offset="1.0" Color="#77797B" />
                            </LinearGradientBrush>
                        </TextBlock.Background>
                    </TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</GridView.ColumnHeaderContainerStyle>