web-dev-qa-db-ja.com

WPF GridViewヘッダーのスタイルをどのように設定しますか？

私はこれから行きました： WPF GridViewHeaderスタイリングの質問

これに：

WPF GridView Headers

ここで、「サイズ」ヘッダーの右側の空白を取り除く必要があります。基本的には、それをTextBlockにするGridViewColumnHeaderのテンプレートがあります。 GridViewの幅全体に広がるようにヘッダー領域の背景を設定する方法はありますか？

追加されたコード：

これは私の一番右のコラムです。グリッドは、使用可能なウィンドウ領域の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>

[〜＃〜]更新[〜＃〜]

私はこれを解決するのに一歩近づきました（私は思う）。

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>

境界線があるので、このスタイルがカバーする境界を確認できます。これは、これが行うことの拡大画像です。底にある小さな白いボーダーを取り除くことができればいいのですが。

したがって、その小さな白い下の境界線を削除することも、これに対する受け入れられる答えになると思います。

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

wpfgridviewstyles
22
djschwartz

これはあなたが探しているものを実現するシンプルなスタイルです。ボーダーの透明な背景を希望のグラデーションに変更するだけです。

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

あなたの質問を理解したかどうかはわかりませんが（画像リンクは無効です）、最も簡単な方法が最善の場合もあります。

リソースで次のように定義します。

<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

GridViewColumnHeader.Roleプロパティをご覧ください。 GridViewColumnHeaderRole 列挙のドキュメントのサンプルは、いくつかのアイデアを与えるかもしれません...

編集：GridView.HeaderStyleプロパティの使用を検討しましたか？

1
Thomas Levesque

私はこの問題を解決しましたが、もっと良い方法があるはずだと思います。問題は、各列のヘッダーにTextBlockがあったことです。未使用領域のヘッダー行には何もありませんでした。 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>
0
djschwartz