¿Cómo diseñas un encabezado GridView de WPF?

styles

Question

Pasé por esto: preguntas de estilo de WPF GridViewHeader

a esto:

Ahora solo necesito deshacerme del espacio en blanco a la derecha del encabezado "Tamaño". Básicamente tengo una plantilla para GridViewColumnHeader que lo convierte en un TextBlock. ¿Hay alguna forma en que pueda establecer el fondo para esa área de encabezado de modo que abarque todo el ancho del GridView?

CÓDIGO AÑADIDO:

Esta es mi columna más a la derecha. La cuadrícula no abarca el 100% del área de la ventana disponible. En el encabezado necesito que todo a la derecha de esta columna tenga el mismo fondo que los encabezados de columna.

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

ACTUALIZAR

Estoy un paso más cerca (creo) para resolver esto.

Agregué el siguiente código dentro de la etiqueta 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>

El borde está ahí solo para que pueda ver el límite de lo que cubre este estilo. Esta es una imagen ampliada de lo que esto hace. Parece ser lo que quiero si puedo deshacerme del pequeño borde blanco en la parte inferior.

Así que supongo que eliminar ese pequeño borde inferior blanco también sería una respuesta aceptada para este.

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

Answer 1

Eche un vistazo a la propiedad GridViewColumnHeader.Role . El ejemplo en la documentación para la enumeración GridViewColumnHeaderRole puede darle algunas ideas ...

EDITAR: ¿Ha considerado usar la propiedad GridView.HeaderStyle ?

Answer 2

Este es un estilo simple que logrará lo que buscas. Simplemente cambie el fondo transparente en el borde para que sea su gradiente deseado.

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

Answer 3

No estoy seguro de haber entendido tu pregunta (los enlaces de imágenes están muertos), pero a veces la mejor es la mejor.

Define algo como esto en Recursos:

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

Answer 4

Resolví este problema pero creo que debería haber una mejor manera de hacerlo. El problema era que tenía TextBlocks en el encabezado de cada columna. El área no utilizada no tenía nada en la fila del encabezado. Acabo de agregar un TextBlock con el mismo fondo en GridView.ColumnHeaderContainerStyle y resultó que abarcaba el resto del ancho no utilizado de la cuadrícula.

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