WPF-Listview Column Header Resize with Custom Style

Question

I am new in WPF ,In the WPF application I used Listview Gridview for display the data. I have customized the style of Listview, Now I want to change the default glossy blue color of mouse hover effect for Listview Gridview Column Header

I googled and change the style of Column header but I cant resize the column of listview(Cant resize the column header using mouse dragging).

Is therer any solution for the same ?

Thanks in advance

Answer 1

If you change the template of a column header (As I assume you did when changing the style), you are essentially rebuilding it. So you must rebuild all the functionalities of the original template.

You can get the full template here.

But to the point of your question, make sure to add the following Style:

<Style x:Key="GridViewColumnHeaderGripper"
   TargetType="Thumb">
    <Setter Property="Width"
      Value="18" />
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0"
                       EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="{DynamicResource BorderLightColor}"
                      Offset="0.0" />
                        <GradientStop Color="{DynamicResource BorderDarkColor}"
                      Offset="1.0" />
                    </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Padding="{TemplateBinding Padding}"
            Background="Transparent">
                    <Rectangle HorizontalAlignment="Center"
                 Width="1"
                 Fill="{TemplateBinding Background}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1"
                       StartPoint="0.5,0">
                <GradientStop Color="Black"
                  Offset="0" />
                <GradientStop Color="White"
                  Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

Then, in your custom style, make sure the ControlTemplate has a Grid in it, with the first item being what ever custom design you want, and the second being the header gripper.

Here's an example:

<Style x:Key="CustomGridViewColumnHeader" TargetType="{x:Type GridViewColumnHeader}" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                <Grid>
                    <!-- My Custom Template -->
                    <Border Background="#FF3B4A51" Height="35">
                        <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="15" Margin="4,0,0,0" Padding="0,5" />
                    </Border>

                    <!-- The gripper / header resizer -->
                    <Thumb x:Name="PART_HeaderGripper"
             HorizontalAlignment="Right"
             Margin="0,0,-9,0"
             Style="{StaticResource GridViewColumnHeaderGripper}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <!-- Other properties you want to change ... -->
    <Setter Property="IsHitTestVisible" Value="True"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
</Style>