We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Color of sort and expand icons

Thread ID:

Created:

Updated:

Platform:

Replies:

142574 Feb 11,2019 05:08 AM UTC Feb 12,2019 12:41 PM UTC UWP 1
loading
Tags: SfDataGrid
Hung
Asked On February 11, 2019 05:08 AM UTC

Hi I was wondering if you could tell me how to change the color of the sort and expand icons on the datagrid. I have attached an example highlighting the parts I would like to change

Attachment: DataGridQuestion_bac62be.zip

Jayaleshwari N [Syncfusion]
Replied On February 12, 2019 12:41 PM UTC

Hi Hung, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query and you can able to change the color of sort Icon and expander icon by overriding the style of GridHeaderCellControl and GridExpanderCellControl.  
 
You can change the color of sort icon by change the Path ,Fill property of PART_SortButtonPreseneter in GridHeaderControlStyle. 
<Style TargetType="{x:Type syncfusion:GridHeaderCellControl}"> 
        <Grid x:Name="PART_SortButtonPresenter" 
Grid.Column="1" 
SnapsToDevicePixels="True"> 
    <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="0" MinWidth="{Binding Path=SortDirection, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource sortDirectionToWidthConverter}}" /> 
        <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
 
    <Path Width="8.938" 
    Height="8.138" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" 
    Data="F1M753.644,-13.0589L753.736,-12.9639 753.557,-12.7816 732.137,8.63641 732.137,29.7119 756.445,5.40851 764.094,-2.24384 764.275,-2.42352 771.834,5.1286 796.137,29.4372 796.137,8.36163 774.722,-13.0589 764.181,-23.5967 753.644,-13.0589z" 
    Fill="Red" 
    SnapsToDevicePixels="True" 
    Stretch="Fill" 
    Visibility="{Binding Path=SortDirection, 
                        RelativeSource={RelativeSource TemplatedParent}, 
                        ConverterParameter=Ascending, 
                       Converter={StaticResource sortDirectionToVisibilityConverter}}"> 
        <Path.RenderTransform> 
            <TransformGroup> 
                <TransformGroup.Children> 
                    <RotateTransform Angle="0" /> 
                    <ScaleTransform ScaleX="1" ScaleY="1" /> 
                </TransformGroup.Children> 
            </TransformGroup> 
        </Path.RenderTransform> 
    </Path> 
 
    <Path Width="8.938" 
    Height="8.138" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" 
    Data="F1M181.297,177.841L181.205,177.746 181.385,177.563 202.804,156.146 202.804,135.07 178.497,159.373 170.847,167.026 170.666,167.205 163.107,159.653 138.804,135.345 138.804,156.42 160.219,177.841 170.76,188.379 181.297,177.841z" 
    Fill="Red" 
    SnapsToDevicePixels="True" 
    Stretch="Fill" 
    Visibility="{Binding Path=SortDirection, 
                        RelativeSource={RelativeSource TemplatedParent}, 
                        ConverterParameter=Decending, 
                        Converter={StaticResource sortDirectionToVisibilityConverter}}"> 
        <Path.RenderTransform> 
            <TransformGroup> 
                <TransformGroup.Children> 
                    <RotateTransform Angle="0" /> 
                    <ScaleTransform ScaleX="1" ScaleY="1" /> 
                </TransformGroup.Children> 
            </TransformGroup> 
        </Path.RenderTransform> 
    </Path> 
 
    <TextBlock Grid.Column="1" 
        Margin="0,-4,0,0" 
        VerticalAlignment="Center" 
        FontSize="10" 
        Foreground="{TemplateBinding Foreground}" 
        SnapsToDevicePixels="True" 
        Text="{TemplateBinding SortNumber}" 
        Visibility="{TemplateBinding SortNumberVisibility}" /> 
</Grid> 
</ Style> 
 
Screenshot: 
 
You can change the color of expander icon by change the Path ,Fill property of PART_ExpanderCellPath in GridExpanderControlStyle. 
 
<Style TargetType="{x:Type syncfusion:GridExpanderCellControl}"> 
        <Setter Property="Foreground" Value="Red" /> 
 
        <Path x:Name="PART_GridExpanderCellPath" 
    Width="{TemplateBinding Width}" 
    Height="{TemplateBinding Height}" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" 
   Data="F1M1464.78,374.21C1466.31,374.21,1466.94,375.538,1466.17,376.861L1435.89,429.439C1435.12,430. 
759,1433.87,430.823,1433.11, 
429.5L1402.82,376.827C1402.06,375.507,1402.69,374.21,1404.21,374.21L1464.78,374.21" 
    Fill="Red" 
    SnapsToDevicePixels="True" 
    Stretch="Fill" 
    Stroke="{TemplateBinding Foreground}" 
    UseLayoutRounding="False"> 
 
< /Style> 
 
Screenshot: 
 
We have attached the sample for your reference and you can download the same from the following location. 
 
Regards, 
Jayaleshwari N 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon