Restyling WPF ListView Header

Welcome, Guest

(1 viewing) (1) Guest

Page:
1

TOPIC: Restyling WPF ListView Header

Restyling WPF ListView Header 24 Mar 2010 11:27 #321

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 www.designerwpf.com/2008/01/16/styling-t...tview-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:

 
        <LinearGradientBrush  x:Key="BlueRinseBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Aqua" Offset="1"/>
            <GradientStop Color="#FF57A0F4" Offset="0.5"/>
            <GradientStop Color="#FF4B94EC" Offset="0.5"/>
        </LinearGradientBrush>
 
 
        <Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
            <Setter Property="Width" Value="18"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Padding="{TemplateBinding Padding}" Background="Transparent">
                            <Rectangle HorizontalAlignment="Center" Width="3"
                                Fill="{TemplateBinding Background}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style x:Key="GridViewColumnHeaderStyle"  TargetType="GridViewColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Background" Value="{StaticResource BlueRinseBrush}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Grid>
                            <Border Name="HeaderBorder"
                                    BorderThickness="0"
                                    BorderBrush="{StaticResource BlueRinseBrush}"
                                    Background="{StaticResource BlueRinseBrush}"
                                    Padding="2,0,2,0">
                                <ContentPresenter Name="HeaderContent"
                                      TextElement.Foreground="White"
                                      Margin="0,0,0,1"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      RecognizesAccessKey="True"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <Thumb x:Name="PART_HeaderGripper"
                                    HorizontalAlignment="Right"
                                    Margin="0,0,-9,0"
                                    Style="{StaticResource GridViewColumnHeaderGripper}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="HeaderBorder" Property="Background" Value="Yellow"/>
                                <Setter TargetName="HeaderContent" Property="TextElement.Foreground" Value="Black"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

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 msdn.microsoft.com/en-us/library/aa970773(VS.85).aspx and only style the parts you need to change.
,
This attachment is hidden for guests. Please log in or register to see it.
This attachment is hidden for guests. Please log in or register to see it.

Attachments:

This attachment is hidden for guests. Please log in or register to see it.
This attachment is hidden for guests. Please log in or register to see it.

mnjon
OFFLINE
CE Staff
Posts: 78
Karma: 40

Reply Quote

The following user(s) said Thank You: Ghasem

CodersEngine

Reply Topic

New Topic

Page:
1

Tutorials Forum

.NET Programing Tutorial

WPF

Moderators: mnjon

Time to create page: 0.29 seconds