Xamarin.Forms | ComponentOne
Controls / FlexGrid / Features / Custom Icon
In This Topic
    Custom Icon
    In This Topic

    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.

    Properties Description
    SortAscendingIconTemplate Allows you to set the template of sort icon for sorting values in ascending order.
    SortDescendingIconTemplate Allows you to set the template of sort icon for sorting values in descending order.
    GroupExpandedIconTemplate Allows you to set the template which is used to create the icon displayed when the group is expanded.
    GroupCollapsedIconTemplate Allows you to set the template which is used to create the icon displayed when the group is collapsed.
    EditIconTemplate Allows you to set the template which is used to create the icon displayed in the header when a row is being edited.
    NewRowIconTemplate Allows you to set the template which is used to create the icon displayed in the header of a new row.
    DetailCollapsedIconTemplate Allows you to set the template which is used to create the icon displayed when the detail is collapsed.
    DetailExpandedIconTemplate Allows you to set the template which is used to create the icon displayed when the detail is expanded.

    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.

    C#
    Copy Code
     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.

    Icon Image
    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:

    C#
    Copy 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.

    Icon Type Icon Class Name
    Bitmap/Image C1BitmapIcon class
    Font character C1FontIcon class
    Path C1PathIcon class (child class of C1VectorIcon class)

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

    In C#
    C#
    Copy Code
    grid.SortDescendingIconTemplate = new C1IconTemplate(() => { returnnew C1BitMapIcon{ Source = “arrow_down.png” }; });
    

    In XAML

    XAML
    Copy Code
    <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>