Styling header cells disables column resize

[Mark]

Hi,

I'm slowly getting to grips with styling the GridView control. So far I've styled the GridViewRow and GridViewHeaderCell. However I have noticed that somethin in my styling for GridViewHeaderCell (or maybe something I've left out) is causing the column resize functionality to stop working. Even if I fully define CanUserResizeColumns="True" on the grid itself, it still doesn't work. By commenting out all my GridViewHeaderCell style XAML the problem disappears, so its in there somewhere! Any help would be much appreciated.

<Pen x:Key="GridViewHeaderCellDropMarkerPen" Brush="{StaticResource GridViewHeaderCellDropMarkerPenBrush}" Thickness="60" />

    <Storyboard x:Key="MouseOver">
        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
            <SplineDoubleKeyFrame KeyTime="0:0:0.12" Value="1" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="MouseOut">
        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
            <SplineDoubleKeyFrame KeyTime="0:0:0.12" Value="0" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>


    <ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="telerik:GridViewHeaderCell">
        <Grid SnapsToDevicePixels="True" >
            <Border x:Name="GridViewHeaderCell"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"

                    SnapsToDevicePixels="True"
                    />
            <Border x:Name="GridViewHeaderCell_Over"
                    BorderBrush="{StaticResource GridViewHeaderCellMouseOverBorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{StaticResource GridViewHeaderCellMouseOverBackground}"
                    Opacity="0"

                    SnapsToDevicePixels="True"
                    />
            <Border x:Name="GridViewHeaderCell_Selected"
                    BorderBrush="{StaticResource GridViewHeaderCellMouseOverBorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{StaticResource GridViewHeaderCellSortedBackground}"
                    Opacity="0"

                    SnapsToDevicePixels="True"
                    />

                <Grid x:Name="PART_HeaderCellGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto"  />
                    </Grid.ColumnDefinitions>

                    <telerik:AlignmentContentPresenter Grid.Column="0"
                                                    Margin="3,4,2,3"
                                                    VerticalAlignment="Center"
                                                    TextAlignment="{TemplateBinding TextAlignment}"
                                                    TextBlock.FontWeight="Bold"/>


                        <Grid Grid.Column="1" HorizontalAlignment="Right"
                              Background="{StaticResource GridViewHeaderCellSortingAndFilteringContentBackground}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Path x:Name="PART_SortIndicator" Fill="{StaticResource GridViewIndicatorsPartsFill}" Stretch="Fill" Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z" HorizontalAlignment="Left" Margin="1,0,4,0" VerticalAlignment="Center" Width="5" Height="3" RenderTransformOrigin="0.5,0.5" >
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                        <SkewTransform AngleX="0" AngleY="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform X="0" Y="0"/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>

                            <telerik:FilteringDropDown Name="PART_DistinctFilterControl" Grid.Column="1"  SnapsToDevicePixels="True"
                                                    Visibility="{TemplateBinding FilteringUIVisibility}"
                                                    telerik:StyleManager.Theme="{StaticResource Theme}" Margin="0,0,8,0"/>

                        </Grid>
                </Grid>

        </Grid>

        <ControlTemplate.Triggers>

            <MultiTrigger>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource MouseOver}" />
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource MouseOut}" />
                </MultiTrigger.ExitActions>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True" />
                    <Condition Property="SortingState" Value="None" />
                </MultiTrigger.Conditions>
            </MultiTrigger>

            <Trigger Property="SortingState" Value="Ascending">
                <Setter TargetName="PART_SortIndicator" Property="Path.Visibility" Value="Visible" />
                <Setter TargetName="PART_SortIndicator" Property="Path.LayoutTransform" >
                    <Setter.Value>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1" />
            </Trigger>
            <Trigger Property="SortingState" Value="Descending">
                <Setter TargetName="PART_SortIndicator" Property="Path.Visibility" Value="Visible" />
                <Setter TargetName="PART_SortIndicator" Property="Path.LayoutTransform" >
                    <Setter.Value>
                        <ScaleTransform ScaleX="1" ScaleY="-1"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1" />
            </Trigger>
            <Trigger Property="SortingState" Value="None">
                <Setter TargetName="PART_SortIndicator" Property="Path.Visibility" Value="Hidden" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}" />
        <Setter Property="Background" Value="{StaticResource GridViewHeaderBackground}" />
        <Setter Property="BorderBrush" Value="{StaticResource GridViewHeaderCellInnerBorderBrush}" />
        <Setter Property="BorderThickness" Value="0,0,2,1" />
        <Setter Property="Foreground" Value="{StaticResource GridViewHeaderCellForeground}" />
        <Setter Property="DropMarkPen" Value="{StaticResource GridViewHeaderCellDropMarkerPen}" />
    </Style>

[Yavor Georgiev]

Hi Mark,

 I noticed that your GridViewHeaderCell template is missing two Thumb objects named "PART_LeftHedaerGripper" and "PART_RightHeaderGripper". These objects are responsible for resizing. Please re-extract the default GridViewHeaderCell template and copy them to your custom template.

Best wishes,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark]

Thanks for the spot Yavor,

How do I go about extracting the template? I've been using the theme files from a zip file provided by Kalin Milanov  on this thread:

http://www.telerik.com/community/forums/wpf/gridview/custom-theme-for-the-gridview.aspx

I've searched through the files in the zip folder and can't find any reference to either "PART_LeftHedaerGripper" or "PART_RightHeaderGripper"

[Yavor Georgiev]

Hi Mark,

 You need to use Expression Blend. I've checked out the XAML on the thread you linked, and it appears that the theme there is no longer applicable to our current version (It was from our 2009 Q2 release, whereas we just released 2010 Q2 Beta - it's almost a year old), so some things have changed. We recommend using Blend to style our controls - it allows you to extract and edit the controls' templates, too.

Regards,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark]

When I edit the GridViewHeaderRowCell template in Blend it only gives me the option to create and empty one. Edit current and edit copy are disabled. I have the rest of the template working how I want so I could just add it in manually into my XAML. Do you have any example code for PART_LeftHedaerGripper and PART_RightHeaderGripper and where it needs to go?

[Yavor Georgiev]

Hi Mark,

 What version of Blend do you use?

I'm sending the ControlTemplate for GridViewHeaderCell:

<Style  TargetType="{x:Type telerik:GridViewHeaderCell}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                <Grid x:Name="PART_HeaderCellGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="GridViewHeaderCell" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="#FF4B4B4B" BorderThickness="1"/>
                    </Border>
                    <Border x:Name="GridViewHeaderCell_Over" Opacity="0" Grid.ColumnSpan="2" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}">
                        <Border BorderBrush="White" BorderThickness="1">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFFFFBA3" Offset="1"/>
                                    <GradientStop Color="#FFFFFBDA" Offset="0"/>
                                    <GradientStop Color="#FFFFD25A" Offset="0.43"/>
                                    <GradientStop Color="#FFFEEBAE" Offset="0.42"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Border>
                    <Border x:Name="GridViewHeaderCell_Selected" Opacity="0" Grid.ColumnSpan="2" BorderThickness="{TemplateBinding BorderThickness}">
                        <Border.BorderBrush>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF616161" Offset="0"/>
                                <GradientStop Color="#FF989898" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.BorderBrush>
                        <Border BorderThickness="1">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFFFD74E" Offset="0.996"/>
                                    <GradientStop Color="#FFFFDCAB" Offset="0.17"/>
                                    <GradientStop Color="#FFFFB062" Offset="0.57"/>
                                    <GradientStop Color="#FFFFD18F" Offset="0.56"/>
                                    <GradientStop Color="#FFFFBA74"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFB69A78"/>
                                    <GradientStop Color="#FFFFE17A" Offset="0.126"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                        </Border>
                    </Border>
                    <ContentControl x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" Grid.Column="0">
                        <ContentControl.Style>
                            <Style TargetType="{x:Type ContentControl}">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                            </Style>
                        </ContentControl.Style>
                    </ContentControl>
                    <Path x:Name="PART_SortIndicator" Fill="Black" Stretch="Fill" HorizontalAlignment="Center" Margin="0,3,0,0" VerticalAlignment="Top" Width="5" Height="3" Opacity="0" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2" Data="M0,0L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0z">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="0"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                    <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Margin="0,0,8,0" IsTabStop="False" Visibility="{TemplateBinding FilteringUIVisibility}" Grid.Column="1">
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlackTheme/>
                        </telerik:StyleManager.Theme>
                    </telerik:FilteringDropDown>
                    <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Grid.ColumnSpan="2">
                        <Thumb.Style>
                            <Style TargetType="{x:Type Thumb}">
                                <Setter Property="Width" Value="8"/>
                                <Setter Property="Background" Value="Transparent"/>
                                <Setter Property="BorderBrush" Value="Transparent"/>
                                <Setter Property="BorderThickness" Value="0"/>
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Cursor" Value="SizeWE"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type Thumb}">
                                            <Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Thumb.Style>
                    </Thumb>
                    <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Grid.ColumnSpan="2">
                        <Thumb.Style>
                            <Style TargetType="{x:Type Thumb}">
                                <Setter Property="Width" Value="8"/>
                                <Setter Property="Background" Value="Transparent"/>
                                <Setter Property="BorderBrush" Value="Transparent"/>
                                <Setter Property="BorderThickness" Value="0"/>
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Cursor" Value="SizeWE"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type Thumb}">
                                            <Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Thumb.Style>
                    </Thumb>
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                            <Condition Property="SortingState" Value="None"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Foreground" Value="Black"/>
                    </MultiTrigger>
                    <Trigger Property="SortingState" Value="Ascending">
                        <Setter Property="Foreground" Value="Black"/>
                        <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
                        <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
                    </Trigger>
                    <Trigger Property="SortingState" Value="Descending">
                        <Setter Property="Foreground" Value="Black"/>
                        <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
                        <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1" ScaleY="-1"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
                    </Trigger>
                    <Trigger Property="SortingState" Value="None">
                        <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="0"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF5B5B5B" Offset="1"/>
                <GradientStop Color="#FF868686"/>
                <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
                <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush" Value="#FF848484"/>
    <Setter Property="BorderThickness" Value="0,0,1,1"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Padding" Value="5,0,3,0"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="DropMarkPen">
        <Setter.Value>
            <Pen Brush="White" Thickness="2"/>
        </Setter.Value>
    </Setter>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>

Best wishes,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark]

That worked perfectly, I just lifted out the thumb section for the code sample and put it in my template and it works fine. Still not sure why I can't edit the template from blend, I'm using version 3.0.1927.0 if that helps.