Databases
StackOverflow2013
Postsdbo
POHow do you style a WPF GridView Header?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do you style a WPF GridView Header?
    text
    copied!<p>I went from this: <a href="https://stackoverflow.com/questions/1172534/wpf-gridviewheader-styling-questions">WPF GridViewHeader styling questions</a></p> <p>to this:</p> <p><img src="https://i.stack.imgur.com/IYvoJ.png" alt="WPF GridView Headers"></p> <p>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?</p> <p>ADDED CODE:</p> <p>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.</p> <pre><code>&lt;Style x:Key="GridHeaderRight" TargetType="{x:Type GridViewColumnHeader}"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type GridViewColumnHeader}"&gt; &lt;TextBlock Text="{TemplateBinding Content}" Padding="5" Width="{TemplateBinding Width}" TextAlignment="Right"&gt; &lt;TextBlock.Background&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt; &lt;GradientStop Offset="0.0" Color="#373638" /&gt; &lt;GradientStop Offset="1.0" Color="#77797B" /&gt; &lt;/LinearGradientBrush&gt; &lt;/TextBlock.Background&gt; &lt;/TextBlock&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="OverridesDefaultStyle" Value="True" /&gt; &lt;Setter Property="Background" Value="Green" /&gt; &lt;Setter Property="Foreground" Value="White" /&gt; &lt;Setter Property="FontSize" Value="12" /&gt; &lt;Setter Property="Background"&gt; &lt;Setter.Value&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt; &lt;GradientStop Offset="0.0" Color="#373638" /&gt; &lt;GradientStop Offset="1.0" Color="#77797B" /&gt; &lt;/LinearGradientBrush&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;GridViewColumn Width="200" HeaderContainerStyle="{ StaticResource GridHeaderRight}" Header="Size"&gt; &lt;GridViewColumn.CellTemplate&gt; &lt;DataTemplate&gt; &lt;TextBlock Text="{Binding Path=EmployeeNumber}" HorizontalAlignment="Right"&gt;&lt;/TextBlock&gt; &lt;/DataTemplate&gt; &lt;/GridViewColumn.CellTemplate&gt; &lt;/GridViewColumn&gt; </code></pre> <p><strong>UPDATE</strong></p> <p>I am one step closer (I think) to solving this.</p> <p>I added the following code inside the GridView tag:</p> <pre><code>&lt;GridView.ColumnHeaderContainerStyle&gt; &lt;Style TargetType="GridViewColumnHeader"&gt; &lt;Setter Property="BorderThickness" Value="1"&gt;&lt;/Setter&gt; &lt;Setter Property="BorderBrush" Value="Green"&gt;&lt;/Setter&gt; &lt;Setter Property="Height" Value="Auto"&gt;&lt;/Setter&gt; &lt;Setter Property="Background"&gt; &lt;Setter.Value&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt; &lt;GradientStop Offset="0.0" Color="#373638" /&gt; &lt;GradientStop Offset="1.0" Color="#77797B" /&gt; &lt;/LinearGradientBrush&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/GridView.ColumnHeaderContainerStyle&gt; </code></pre> <p>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.</p> <p>So I guess removing that tiny white bottom border would also be an accepted answer for this one.</p> <p><a href="http://img170.imageshack.us/img170/3851/columnheadercontainerst.png" rel="nofollow noreferrer">ColumnHeaderContainerStyle http://img170.imageshack.us/img170/3851/columnheadercontainerst.png</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload