web-dev-qa-db-fra.com

Comment concevez-vous un en-tête WPF GridView?

Je suis passé de ceci: Questions de style WPF GridViewHeader

pour ça:

WPF GridView Headers

Maintenant, j'ai juste besoin de me débarrasser de l'espace blanc à droite de l'en-tête "Taille". J'ai essentiellement un modèle pour le GridViewColumnHeader qui en fait un TextBlock. Est-il possible de définir un arrière-plan pour cette zone d'en-tête afin qu'elle couvre toute la largeur de GridView?

CODE AJOUTÉ:

Ceci est ma colonne la plus à droite. La grille ne couvre pas 100% de la surface de fenêtre disponible. Dans l'en-tête, tout ce qui se trouve à droite de cette colonne doit avoir le même arrière-plan que les en-têtes de colonne eux-mêmes.

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

METTRE &AGRAVE; JOUR

Je suis un peu plus près (je pense) de résoudre ce problème.

J'ai ajouté le code suivant dans la balise 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>

La bordure est là pour que vous puissiez voir la limite de ce que ce style couvre. Ceci est une image agrandie de ce que cela fait. Cela semble être ce que je veux si je peux me débarrasser de la petite bordure blanche en bas.

Donc, je suppose que supprimer cette minuscule bordure blanche serait également une réponse acceptée pour celle-ci.

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

wpfgridviewstyles
20
djschwartz

C'est un style simple qui accomplira ce que vous recherchez. Il suffit de changer l’arrière-plan transparent de la bordure pour qu’il s’agisse du dégradé souhaité.

    <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>
11
Bret Faller

Je ne sais pas si j'ai bien compris votre question (les liens d’image sont morts), mais la méthode la plus simple est parfois la meilleure.

Définissez quelque chose comme ceci dans Ressources:

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

Examinez la propriété GridViewColumnHeader.Role. L'exemple de la documentation de l'énumération GridViewColumnHeaderRole peut vous donner des idées ...

EDIT: Avez-vous envisagé d’utiliser la propriété GridView.HeaderStyle?

1
Thomas Levesque

J'ai résolu ce problème mais je pense qu'il devrait y avoir une meilleure façon de le faire. Le problème était que j'avais TextBlocks sur l'en-tête de chaque colonne. La zone inutilisée n'avait rien sur la ligne d'en-tête. Je viens d'ajouter un TextBlock avec le même arrière-plan dans GridView.ColumnHeaderContainerStyle et il s'est avéré qu'il couvre le reste de la largeur non utilisée de la grille.

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