New in WPF, UWP, and Xamarin: Universally Add Custom Icons to the XAML FlexGrids using C1Icon

Icons are a very subtle, yet important, part of any application. They directly communicate to your end user important information about your app, implying details like available actions and state of the control. Iconography is an important aspect of visual design patterns, and out-of-style icons can date your app.

Conversely, using icons from Microsoft’s Fluent design or Google’s Material design can make an older app feel more modern. A common request from our customers is the ability to customize icons within FlexGrid, and we’re going to begin offering that functionality in 2018v3 with the new C1Icon object for WPF, UWP, and Xamarin.

C1Icon is an abstract class that provides a series of different objects for displaying monochromatic icons that can easily be tinted and resized. The available options include C1FontIcon, the abstract base class C1VectorIcon (with child classes C1SVGIcon and C1PathIcon), and C1BitmapIcon. The API is flexible enough to allow some minor styling and support multiple sources.

About Icon Sources

You can use a variety of sources for icons (think font glyphs, images, or vectors like path or SVG). Each type has its own advantages and disadvantages, and arguments exist for using each under different circumstances. For example, using a Bitmap image works across all platforms (and might capture what you want perfectly), but the images require a tradeoff between image size, sharpness, and memory use.

For that reason, you might decide to use a font glyph for its automatic scaling and small size, but this locks you into what’s available for your font—and it also has to be packaged with your app. Vector images can potentially solve these problems, but SVGs aren’t universally supported across platforms. Support for SVGs is limited to WPF and UWP.

These tables summarize the advantages and disadvantages of icon types:

Using the C1Icon's custom icons in FlexGrid

FlexGrid provides several different methods for configuring C1Icon, and you can do so either in XAML or C#.

XAML platforms present some differences in how you can style the icons. For WPF and UWP, styling templates are available for the following icons:

• SortAscendingIconTemplate
• SordingDescendingIconTemplate
• ActiveFilterTemplateIconTemplate
• InactiveFilterTemplateIconTemplate

Xamarin has a slightly different set of templates available:

• SortAscendingIconTemplate
• SordingDescendingIconTemplate
• GroupExpandedIconTemplate
• GroupCollapsedIconTemplate
• EditIconTemplate
• NewRowIconTemplate
• DetailCollapsedIconTemplate
• DetailExpandedIconTemplate

It’s easy to configure the icons in XAML. You only need to specify which icon you want to configure and use an icon template with the icon type you prefer to use.

For example, you can style the sorting icons using a font arrow character:

            <c1:C1FlexGrid x:Name="grid" >
                <c1:C1FlexGrid.SortAscendingIconTemplate>
                    <c1:C1IconTemplate>
                        <DataTemplate>
                            <c1:C1FontIcon Text="↑" Foreground="Black" />
                        </DataTemplate>
                    </c1:C1IconTemplate>
                </c1:C1FlexGrid.SortAscendingIconTemplate>
                <c1:C1FlexGrid.SortDescendingIconTemplate>
                    <c1:C1IconTemplate>
                        <DataTemplate>
                            <c1:C1FontIcon Text="↓" Foreground="Black" />
                        </DataTemplate>
                    </c1:C1IconTemplate>
                </c1:C1FlexGrid.SortDescendingIconTemplate>
            </c1:C1FlexGrid>

If you prefer, you can easily use an image instead:

            <c1:C1FlexGrid x:Name="grid" >
                <c1:C1FlexGrid.SortAscendingIconTemplate>
                    <c1:C1IconTemplate>
                        <DataTemplate>
                            <c1:C1BitmapIcon Source="MyImageUp.png" />
                        </DataTemplate>
                    </c1:C1IconTemplate>
                </c1:C1FlexGrid.SortAscendingIconTemplate>
                <c1:C1FlexGrid.SortDescendingIconTemplate>
                    <c1:C1IconTemplate>
                        <DataTemplate>
                            <c1:C1BitmapIcon Source="MyImageDown.png" />
                        </DataTemplate>
                    </c1:C1IconTemplate>
                </c1:C1FlexGrid.SortDescendingIconTemplate>
            </c1:C1FlexGrid>

We also provide built-in templates for a few common icons like triangles, chevrons, and arrows. The templates automatically scale with the FlexGrid, and are also quite easy to use:

grid.SortAscendingIconTemplate = C1IconTemplate.TriangleNorth;

The CustomSortIcon sample demonstrates how you can configure this further, and it's part of the FlexGrid101 sample for each platform.

The flexible API allows you to easily customize your FlexGrid’s icons, and, for Xamarin especially, enables a much stronger Material style.

Future plans for C1Icon's custom icons

Since icons are predominant in so many controls, we're planning to implement C1Icon in other controls. As for FlexGrid, eventually C1Icon will be extended to include other items (like grouping icons) in WPF and UWP. C1Icon solves a very common problem, and we’ll be applying it in more areas going forward.

Documentation: WPF | UWP | Xamarin.Forms | Xamarin.iOS | Xamairn.Android |