[Solved] Selected column header's image is changing during dragdrop to group

[bborie0107]

Hi

I changed gridviewHeaderCell template to decrease header's height. When i am trying to drag column header to group panel
draging image's height is changing if column's header's width is shorter than specfic width. How can i fix this?
I attached screen shot 

Regards 
Park  

[Pavel Pavlov]

Hi bborie0107,

Can you please paste me your related XAML ( i need to see how the column header is defined) . I will try  to reproduce it here and I am pretty sure we can find a workaround/ fix for the problem.

Regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[bborie0107]

Hi

I modified Telerik's Office Blue Theme project and made use of office blue dll. Below is my modifide template code for
GridViewHeaderCell and GridViewHeaderRow. And i applied Office Blue Theme in Appication startup

I changed MinHeight property on GridViewHeaderRow's Style And I set Height Property to 20 on Border and Grid Elements on
GridViewHeaderCellTemplate.


GridViewHeaderRow: 

  <Style

        TargetType="grid:GridViewHeaderRow">
        <Setter Property="Template" Value="{StaticResource GridViewHeaderRowTemplate}" />

        <Setter Property="Background" Value="{StaticResource GridViewHeaderBackground}" />
        <Setter Property="MinHeight" Value="20" />
        <Setter Property="BorderThickness" Value="0,0,0,1" />
        <Setter Property="BorderBrush" Value="{StaticResource GridViewHeaderCellBorderBrush}" />

    </Style>

GridViewHeaderCell : 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"



                    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
                    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
                    xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
                    xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"


                    >

    <SolidColorBrush x:Key="GridViewHeaderCellBorderBrush" Color="#FF688CAF"/>
<SolidColorBrush x:Key="GridViewHeaderCellMouseOverBorderBrush" Color="#FFFFFDE6" />
<LinearGradientBrush x:Key="GridViewHeaderCellMouseOverBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFE391" Offset="1"/>
        <GradientStop Color="#FFFFFDEB" Offset="0"/>
        <GradientStop Color="#FFFFD563" Offset="0.43"/>
        <GradientStop Color="#FFFFEDB3" Offset="0.42"/>
    </LinearGradientBrush>
<LinearGradientBrush x:Key="GridViewHeaderCellSortedBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFCE79F" Offset="1"/>
        <GradientStop Color="#FFFDD3A8" Offset="0.07"/>
        <GradientStop Color="#FFF9932E" Offset="0.43"/>
        <GradientStop Color="#FFFAAD5F" Offset="0.42"/>
        <GradientStop Color="#FFB0987C" Offset="0"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="GridViewHeaderCellSortingAndFilteringContentBackground" Color="Transparent" />
<LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF6A7EC5" Offset="0"/>
        <GradientStop Color="#FF40465A" Offset="1"/>
    </LinearGradientBrush>
<telerik:Office_BlueTheme x:Key="Theme" />
<LinearGradientBrush x:Key="GridViewHeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFDEE8F5" Offset="0"/>
        <GradientStop Color="#FFC2D8F1" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="GridViewHeaderCellInnerBorderBrush" Color="#FFEEEEEE"/>
<SolidColorBrush x:Key="GridViewHeaderCellForeground" Color="#FF00156E" />





    <Style x:Key="ColumnHeaderGripperStyle" TargetType="Thumb">
        <Setter Property="Width" Value="8"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Cursor" Value="SizeWE"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="grid:GridViewHeaderCell">
        <Border  Height="20" BorderBrush="{StaticResource GridViewHeaderCellBorderBrush}" BorderThickness="0,0,1,0">


            <vsm:VisualStateManager.VisualStateGroups>

                <vsm:VisualStateGroup x:Name="CommonStates">
                    <vsm:VisualState x:Name="Normal" />
                    <vsm:VisualState x:Name="MouseOver" >
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="GridViewHeaderCell_Over"
                                            Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>

                <vsm:VisualStateGroup x:Name="SortingStates">
                    <vsm:VisualState x:Name="Ascending">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="PART_SortIndicator"
                                        Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="PART_SortIndicator"
                                        Storyboard.TargetProperty="RenderTransform">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <ScaleTransform ScaleX="1" ScaleY="-1" />
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="GridViewHeaderCell_Selected"
                                            Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="Descending">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="PART_SortIndicator"
                                        Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="PART_SortIndicator"
                                        Storyboard.TargetProperty="RenderTransform">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <ScaleTransform ScaleX="1" ScaleY="1" />
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="GridViewHeaderCell_Selected"
                                        Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="None">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="PART_SortIndicator"
                                        Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>

            </vsm:VisualStateManager.VisualStateGroups>


            <Grid  Height="20">
                <Border x:Name="GridViewHeaderCell"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}" />
                <Border x:Name="GridViewHeaderCell_Over"
                    BorderBrush="{StaticResource GridViewHeaderCellMouseOverBorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{StaticResource GridViewHeaderCellMouseOverBackground}"
                    Opacity="0" />
                <Border x:Name="GridViewHeaderCell_Selected"
                    BorderBrush="{StaticResource GridViewHeaderCellMouseOverBorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{StaticResource GridViewHeaderCellSortedBackground}"
                    Opacity="0" />

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

                    <grid:AlignmentContentPresenter Grid.Column="0"
                                                    Margin="3,0,3,0"
                                                    VerticalAlignment="Bottom"
                                                    TextAlignment="{TemplateBinding TextAlignment}" />

                        <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>

                            <grid:FilteringDropDown Name="PART_DistinctFilterControl" Grid.Column="1"
                                                    Visibility="{TemplateBinding FilteringUIVisibility}"
                                                    telerik:StyleManager.Theme="{StaticResource Theme}" Margin="2,0,2,0"/>
                        </Grid>
                </Grid>
                <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
                <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />


            </Grid>
        </Border>

    </ControlTemplate>

    <Style

        TargetType="grid: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,1,1" />
        <Setter Property="Foreground" Value="{StaticResource GridViewHeaderCellForeground}" />
        <Setter Property="FontWeight" Value="Bold" />
    </Style>


</ResourceDictionary>

Regards
Park

[Pavel Pavlov]

Hi bborie0107,

 
I believe I have found what is causing the problem . When the content of the header cell ( the header property) is set to a visual element ,RadgridView has to convert it to an image as the same visual element cannot be simultaneously a child to the header cell and the dragged cell.
So it converts it into image , places it into a "DraggedElement" so you can see the preview while dragging.

I found that the dragged element has a MinHeight  = "26" set in template  as you can see bellow:

<ControlTemplate x:Key="DraggedElementTemplate" TargetType="controls:DraggedElement">
       <Border MinWidth="100" MinHeight="26" Background="Transparent">
           <Grid>
               <ContentPresenter />
               <Grid x:Name="PART_NoCursor" Width="18" Height="18" Visibility="Collapsed" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-9, -9">
                   <Ellipse Fill="#FFFFFFFF" Stroke="#FF535353"/>
                   <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF000000" Margin="4.565,4.462,3.517,3.418" Data="M6.5000155,0.5 L0.5,6.5000704" StrokeThickness="3"/>
                   <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFCE3527" Margin="3.002,2.876,2.832,2.708" Data="M6.5000155,0.5 L0.5,6.5000704" StrokeThickness="3"/>
                   <Ellipse Fill="{x:Null}" Stroke="#FFCE3527" Margin="1.831,1.832,1.833,1.832" StrokeThickness="2"/>
                   <Path Stretch="Fill" Stroke="{x:Null}" Margin="0.999,1,1.001,8.134" Data="M16,8 C8.127,4.9999293 6.627,10.999763 0,8 0,3.581722 3.581722,0 8,0 12.418278,0 16,3.581722 16,8 z">
                       <Path.Fill>
                           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                               <GradientStop Color="#99FFFFFF" Offset="0"/>
                               <GradientStop Color="#33FFFFFF" Offset="1"/>
                           </LinearGradientBrush>
                       </Path.Fill>
                   </Path>
               </Grid>
           </Grid>
       </Border>
   </ControlTemplate>

I believe that if you adjust the MinHeight and MinWidth properties , the problem may be solved.

Kind regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.