[C#][UWP] How to customize the resize handle of columns of RadDataGrid

[Milan]

Hi Team,

I want to customize the resize handle of all columns of RadDataGrid. Actually, I need to display only on pipe symbol instead of two. Also, there should be no margin for the handle and the cursor should be changed while hovering onto it.

Could you please help out to achieve the above requirements.

Regards

[Ivaylo Gergov]

Hi,

The only way to change the appearance of the resize handle is to override the default style of the DataGridColumnHeader(you can get it from our source code).

<Style TargetType="localPrimitives:DataGridColumnHeader">
    <Setter Property="Foreground" Value="{ThemeResource TelerikGridHeaderForegroundBrush}"/>
    <Setter Property="Background" Value="{ThemeResource TelerikGridHeaderBackgroundBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="MinWidth" Value="6"/>
    <Setter Property="MinHeight" Value="6"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="localPrimitives:DataGridColumnHeader">
                <Grid x:Name="rootPanel" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Filtered">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FilteredHighlight" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectedStates">
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerContent" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{ThemeResource TelerikGridServiceColumnActiveForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rootPanel" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{ThemeResource TelerikGridServiceColumnActiveBackgroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ResizeHandle" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{ThemeResource TelerikGridServiceColumnActiveForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Padding="{TemplateBinding Padding}"  HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <ContentPresenter x:Name="headerContent" Content="{TemplateBinding Content}" Margin="8"/>
                            <TextBlock Text="{Binding SortDirection, Converter={StaticResource SortDirectionConverter}}"
                                   FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="10"  Margin="2,0,4,2" VerticalAlignment="Center"/>
                        </StackPanel>
                        <primitivesCommon:InlineButton Style="{StaticResource GridServiceButtonStyle}"  x:Name="PART_FilterButton" HorizontalAlignment="Right" VerticalAlignment="Stretch"
                                                           Grid.Column="1" Padding="8,0,8,4" VerticalContentAlignment="Center"
                                                           Background="Transparent" PointerOverBackgroundBrush="Transparent" PressedBackgroundBrush="Transparent"
                                                           PointerOverForegroundBrush="{ThemeResource TelerikGridHeaderPointerOverForegroundBrush}"
                                                           Foreground="{TemplateBinding Foreground}" PressedForegroundBrush="{TemplateBinding Foreground}"
                                                           Visibility="{TemplateBinding FilterGlyphVisibility}">
                            <primitivesCommon:InlineButton.Content>
                                <TextBlock Text="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12"
                                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </primitivesCommon:InlineButton.Content>
                        </primitivesCommon:InlineButton>
                        <Thumb x:Name="PART_ResizeHandle" Style="{StaticResource ColumnHeaderResizeThumb}" Background="Transparent" Grid.Column="2" Visibility="{TemplateBinding ResizeHandleVisiblity}">
                        </Thumb>
                    </Grid>
                    <Rectangle x:Name="FilteredHighlight" Height="2" Fill="{ThemeResource TelerikGridServiceButtonBackgroundBrush}"
                               VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Margin="0,0,0,4" Visibility="Collapsed" Grid.ColumnSpan="3"/>
                    <Rectangle Fill="{ThemeResource TelerikGridInnerShadowBrush}" Height="1" VerticalAlignment="Bottom" Margin="0,1,0,3" Grid.ColumnSpan="3"/>
                    <Rectangle Fill="{ThemeResource TelerikGridShadowBrush}" Height="3" VerticalAlignment="Bottom" Margin="0,3,0,0" Grid.ColumnSpan="3"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Here, you can modify the ColumnHeaderResizeThumb style:

<Style x:Key="ColumnHeaderResizeThumb" TargetType="Thumb">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="BorderBrush" Value="{ThemeResource ThumbBorderThemeBrush}"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                    <TextBlock FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center" Text="" IsHitTestVisible="False" FontFamily="Segoe MDL2 Assets"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I hope this helps.

Regards,
Ivaylo Gergov
Telerik by Progress

[Milan]

Hi,

Thanks for your suggestion. But the provided style raised "Error HRESULT E_FAIL has been returned from a call to a COM component." exception while applying.

Regards

[Ivaylo Gergov]

Hello,

Sorry for the late response.

Here you can find how to resolve our resources when customizing template/style of our controls.

I hope this helps.

Regards,
Ivaylo Gergov
Telerik by Progress

[Milan]

Hello,

 

The link that you have provided does not contains any reference for RadDataGrid. Could you please provide me a full proof solution for my issue?

Regards

[Ivaylo Gergov]

Hello,

I have attached a project which demonstrates how to change the style of the resize handle. I hope this helps.

Regards,
Ivaylo Gergov
Telerik by Progress