Restyling WPF ListView Header

Of late I have been working with Net Advantage for WPF by Infragistics, but today we didn’t really need the fully functionality of a DataGrid and needed a rather lighter weight component (basically simply sorting list, no paging, no grouping…just a list), so I turned my attention back to the inbuilt WPF controls (there is a WPF Datagrid that was released out of bands within the WPF Toolkit should you want a free WPF grid), where I needed a ListView.

Now I like the ListView but I have always stuggled a little bit with getting it to look how I wanted visually, one area where I seem to always have issues is changed the header (where the column names are shown).

I had initially looked into doing this with Blend following the instructions here http://www.designerwpf.com/2008/01/16/styling-the-listview-column-header/ which although very accurate, result in about 300 lines of code, most of which I didn’t want to change. Basically all I was after was a new Colour in the header section.

Now if you use Blend and are happy with what it produces that’s all cool, I am not against that, It’s just I feel that the hand written approach is a little nicer on the XAML content. You see what happens when you work with Expression Blend in design mode, and start editing control templates, you will get the entire set of XAML to make the control from scratch, but you may only actually need to style/template 1 particular control.

In order to restyle the ListView header, I had to do the following:

 

   1:  <LinearGradientBrush  x:Key="BlueRinseBrush" 
   2:                        EndPoint="0.5,1" StartPoint="0.5,0">
   3:      <GradientStop Color="#FF223B84" Offset="1"/>
   4:      <GradientStop Color="#FF57A0F4" Offset="0.5"/>
   5:      <GradientStop Color="#FF4B94EC" Offset="0.5"/>
   6:  </LinearGradientBrush>
   7:   
   8:   
   9:  <Style x:Key="GridViewColumnHeaderGripper" 
  10:         TargetType="Thumb">
  11:      <Setter Property="Width" Value="18"/>
  12:      <Setter Property="Background" Value="White"/>
  13:      <Setter Property="Template">
  14:          <Setter.Value>
  15:              <ControlTemplate TargetType="{x:Type Thumb}">
  16:                  <Border Padding="{TemplateBinding Padding}" 
  17:                          Background="Transparent">
  18:                      <Rectangle HorizontalAlignment="Center" 
  19:                                 Width="3"
  20:                          Fill="{TemplateBinding Background}"/>
  21:                  </Border>
  22:              </ControlTemplate>
  23:          </Setter.Value>
  24:      </Setter>
  25:  </Style>
  26:   
  27:  <Style x:Key="GridViewColumnHeaderStyle"  
  28:         TargetType="GridViewColumnHeader">
  29:      <Setter Property="HorizontalContentAlignment" 
  30:              Value="Center"/>
  31:      <Setter Property="VerticalContentAlignment" 
  32:              Value="Center"/>
  33:      <Setter Property="Background" 
  34:              Value="{StaticResource BlueRinseBrush}"/>
  35:      <Setter Property="Foreground" 
  36:              Value="{DynamicResource 
  37:                  {x:Static SystemColors.ControlTextBrushKey}}"/>
  38:      <Setter Property="Template">
  39:          <Setter.Value>
  40:           <ControlTemplate 
  41:              TargetType="GridViewColumnHeader">
  42:                  <Grid>
  43:                      <Border Name="HeaderBorder"
  44:                              BorderThickness="0"
  45:                              BorderBrush="{StaticResource BlueRinseBrush}"
  46:                              Background="{StaticResource BlueRinseBrush}"
  47:                              Padding="2,0,2,0">
  48:                          <ContentPresenter Name="HeaderContent"
  49:                          TextElement.Foreground="White"
  50:                          Margin="0,0,0,1"
  51:                          VerticalAlignment="{TemplateBinding 
  52:                          VerticalContentAlignment}"
  53:                          HorizontalAlignment="{TemplateBinding 
  54:                          HorizontalContentAlignment}"
  55:                          RecognizesAccessKey="True"
  56:                          SnapsToDevicePixels=
  57:                          "{TemplateBinding SnapsToDevicePixels}"/>
  58:                      </Border>
  59:                      <Thumb x:Name="PART_HeaderGripper"
  60:                          HorizontalAlignment="Right"
  61:                          Margin="0,0,-9,0"
  62:                          Style="{StaticResource 
  63:                          GridViewColumnHeaderGripper}"/>
  64:                  </Grid>
  65:                  <ControlTemplate.Triggers>
  66:                      <Trigger Property="IsMouseOver" Value="true">
  67:                          <Setter TargetName="HeaderBorder" 
  68:                            Property="Background" Value="Yellow"/>
  69:                          <Setter TargetName="HeaderContent" 
  70:                            Property="TextElement.Foreground" 
  71:                            Value="Black"/>
  72:                      </Trigger>
  73:                  </ControlTemplate.Triggers>
  74:              </ControlTemplate>
  75:          </Setter.Value>
  76:      </Setter>
  77:  </Style>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Now the important part here is the approach that I took….which I believe is the key to working successfully with WPF. Basically I would recommend you should always consult the existing control templates (the default look and feel, basically) which you can find at http://msdn.microsoft.com/en-us/library/aa970773(VS.85).aspx and only style the parts you need to change.

 

Anyway the results of the code above give me what I was after, a custom header area:

LV

And here is a small demo project : listview.zip

About these ads

6 thoughts on “Restyling WPF ListView Header

  1. Sacha,

    I recently had time to have a look at Microsoft’s WPF grid on CodePlex (took me a while, I guess) and found it a perfect lightweight alternative to commercial grids. It’s flexible, easy to style, and it comes with a very intuitive API.

    BTW: Congrats to your MVPs. Well deserverd, mate! :)

    Cheers,
    Philipp

  2. sacha says:

    Thanks Philipp, we are actually using WCF and Infragistics grid. Which I am not that keen on, its quite a bitch to use.

  3. Himanshu Agarwal says:

    “query regarding generation of soap request and secured web services”

    Hi Sacha

    I have seen your post on codeproject.com.

    Sacha I have to test a secured web service for its functionality. The wsdl file of that web service does not define anything regarding the security of that web service i.e what type of authentication or authorization that webservice implements.

    Can u please guide me how to get the information about what type of security a particular web service implements.

    And then how to make the soap request in vb.net to invoke its methods.

    How to apply the algorithms and various encryption levels to secure the SOAP request.

    How to use the SSL & certificates.

    Waiting for your reply.


    Regards,

    Himanshu Agarwal

    Mobile No +91-9968499516

  4. Sacha,

    How is the performance of the WPF Toolkit grid? We are using the Express Infragistics grid (free) and like the speed but it is buggy. I ran some tests and thought the toolkit grid was slow when loading a few thousand rows but the Infragistics was fast.

    Thanks,
    Nigel

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s