Strange behaviour with horizontal scrolling and GridViewHeaderCell style

[sven]

Hello,
I'm trying to modify the GridViewHeaderCell style with a trigger on the Tag property  :

<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" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
                                    <Border BorderBrush="#FF4B4B4B" BorderThickness="0" Background="{TemplateBinding Background}"/>
                                </Border>
                                <Border x:Name="GridViewHeaderCell_Over" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                                    <Border BorderBrush="White" BorderThickness="0">
                                        <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" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                                    <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="0">
                                        <Border.BorderBrush>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFB69A78"/>
                                                <GradientStop Color="#FFFFE17A" Offset="0.126"/>
                                            </LinearGradientBrush>
                                        </Border.BorderBrush>
                                        <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>
                                </Border>
                                <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="0,0,10,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <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" 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" Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Top" Width="5">
                                    <Path.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleY="-1" ScaleX="1"/>
                                            <SkewTransform AngleY="0" AngleX="0"/>
                                            <RotateTransform Angle="0"/>
                                            <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                    </Path.RenderTransform>
                                </Path>
                                <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" IsTabStop="False" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </telerik:FilteringDropDown>

                                <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,3,0,4"/>
                                            <Setter Property="Margin" Value="15,0,0,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}">
                                                            <DockPanel HorizontalAlignment="Center">
                                                                <Rectangle Fill="#FFC7C5B2" Width="1"/>
                                                                <Rectangle Fill="White" Width="1"/>
                                                            </DockPanel>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsMouseOver" Value="True"/>
                                        <Condition Property="SortingState" Value="None"/>
                                    </MultiTrigger.Conditions>
                                    <MultiTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </MultiTrigger.EnterActions>
                                    <MultiTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                                    <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </MultiTrigger.ExitActions>
                                    <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 ScaleY="1" ScaleX="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 ScaleY="-1" ScaleX="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>

                                <Trigger Property="Tag">
                                    <Trigger.Value>
                                        <sys:Boolean>True</sys:Boolean>
                                    </Trigger.Value>
                                    <Setter Property="Background" Value="Red"/>
                                </Trigger>

                                <Trigger Property="Tag">
                                    <Trigger.Value>
                                        <sys:Boolean>False</sys:Boolean>
                                    </Trigger.Value>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Background" >
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFE2E2E2" Offset="1"/>
                            <GradientStop Color="#FFE8E8E8"/>
                            <GradientStop Color="#FFCECBCB" Offset="0.42"/>
                            <GradientStop Color="#FFC4C4C4" Offset="0.43"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Padding" Value="5,0,3,0"/>
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="FilteringUIVisibility" Value="Collapsed"/>
            </Style>

When I'm setting "true" on the first column :

this.gvObjGECO.ChildrenOfType<GridViewHeaderCell>().FirstOrDefault().Tag = true;

It's working well but when I'm moving the horizontal scrollbar, other column headers are changing their style too.
How can I stop this behaviour?

Here is a Sample I made with the latest telerik version

[Dimitrina]

Hello,

 When the virtualization of RadGridView is turned on (it is turned on by default), it is not recommended to work with the visual elements (i.e. GridViewHeaderCell) and their properties.

Would it be possible for you to set the 'Tag' in XAML and avoid using such a code?

this.gvObjGECO.ChildrenOfType<GridViewHeaderCell>().FirstOrDefault().Tag = true;

Greetings,
Didie
the Telerik team

[sven]

In my work case, I think it's not possible to make it in xaml.
Is it possible to turn off the virtualization?

[Dimitrina]

Hello,

 You can turn off the column virtualization when you set the EnableColumnVirtualization property to "False" (the same is for EnableRowVirtualization).

Kind regards,
Didie
the Telerik team

[sven]

Thanks it works!