FlexGrid displays various icons during its operations such as sorting, filtering etc. These icons can be changed using various icon templates provided in the FlexGrid control. These icon templates can be accessed through following properties.

You can change the icons set by these templates either to the built-in icons provided by the FlexGrid or to your own custom image, geometric figures, font etc as an icon.

FlexGrid also allows you to change the appearance of the different icons used in the control using the C1Icon class. The C1Icon class is an abstract class that provides a series of different objects that can be used for displaying monochromatic icons which can easily be tinted and resized. You can also change the position of these icons by setting the SortIconPosition property.

 grid.SortIconPosition = GridSortIconPosition.Left;

Using built-in Icons

To set the built-in icons for the abovementioned templates, you can set the following properties of the C1IconTemplate class.

• Edit
• Asterisk
• ArrowUp
• ArrowDown
• ChevronUp
• ChevronDown
• ChevronLeft
• ChevronRight
• TriangleNorth
• TriangleSouth
• TriangleEast
• TriangleWest
• TriangleSouthEast
• Star5

For instance, to change the default sort ascending icon to a built-in icon, for example, TriangleNorth, use the following code:

grid.SortAscendingIconTemplate = C1IconTemplate.TriangleNorth;

Using Custom Icons

FlexGrid also allows you to set your own custom image, font, or path as an icon through the respective classes.

For instance, to change the default sort descending icon to a custom image, use the following code:

grid.SortDescendingIconTemplate = new C1IconTemplate(() => { return 
new C1BitMapIcon{ Source = “arrow_down.png” }; });

In XAML

<c1:FlexGrid x:Name="grid">
        <c1:FlexGrid.SortAscendingIconTemplate>
                <core:C1IconTemplate>
                        <DataTemplate>
                                <core:C1BitmapIcon Source="arrow_up.png"/>
                        </DataTemplate>
                </core:C1IconTemplate>
        </c1:FlexGrid.SortAscendingIconTemplate>
</c1:FlexGrid>