This is a migrated thread and some comments may be shown as answers.

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

5 Answers 124 Views
DataGrid
This is a migrated thread and some comments may be shown as answers.
Milan
Top achievements
Rank 1
Milan asked on 05 Apr 2017, 06:07 AM

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

5 Answers, 1 is accepted

Sort by
0
Ivaylo Gergov
Telerik team
answered on 10 Apr 2017, 04:04 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
Milan
Top achievements
Rank 1
answered on 10 Apr 2017, 06:39 AM

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

0
Ivaylo Gergov
Telerik team
answered on 13 Apr 2017, 11:46 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
Milan
Top achievements
Rank 1
answered on 25 Apr 2017, 09:20 AM

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

0
Ivaylo Gergov
Telerik team
answered on 28 Apr 2017, 07:56 AM
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
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 Feedback Portal and vote to affect the priority of the items
Tags
DataGrid
Asked by
Milan
Top achievements
Rank 1
Answers by
Ivaylo Gergov
Telerik team
Milan
Top achievements
Rank 1
Share this question
or