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

6 posts, 0 answers
  1. Milan
    Milan avatar
    12 posts
    Member since:
    Mar 2016

    Posted 05 Apr Link to this post

    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

  2. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    691 posts

    Posted 09 Apr Link to this post

    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
  3. Milan
    Milan avatar
    12 posts
    Member since:
    Mar 2016

    Posted 10 Apr Link to this post

    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

  4. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    691 posts

    Posted 13 Apr Link to this post

    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
  5. Milan
    Milan avatar
    12 posts
    Member since:
    Mar 2016

    Posted 25 Apr Link to this post

    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

  6. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    691 posts

    Posted 28 Apr Link to this post

    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
Back to Top