FlexGrid Custom Cells

This post describes a key feature in ComponentOne's FlexGrid for Windows Phone, custom cells. Custom cells allow you to display anything you want in a grid cell, and they can be easily created in code or in XAML.

In XAML

The CellTemplate property is used to define a cell's content in XAML. In my previous post, I used this approach to display a HyperlinkButton in a FlexGrid column. In this case, the CellTemplate property works a lot like traditional template columns. Quick Example

<my:C1FlexGrid Name="c1FlexGrid1">  
    <my:C1FlexGrid.Columns>  
        <my:Column>  
            <my:Column.CellTemplate>  
                <DataTemplate>  
                    <TextBlock Text="{Binding FieldName}"/>  
                </DataTemplate>  
            </my:Column.CellTemplate>  
        </my:Column>  
    </my:C1FlexGrid.Columns>  
</my:C1FlexGrid>  

In code

Since creating data templates is not easy or fun to do in code, FlexGrid provides a simpler interface for doing the same thing. The CellFactory interface is used by the grid to create every cell shown in the grid programmatically. Like custom columns in typical datagrids, custom ICellFactory classes can be highly customized, or they can be general, reusable, configurable classes. Quick Example To create custom cells you have to create a class that implements the ICellFactory interface and assign this class to the grid's CellFactory property. For complete information on the interface, see the documentation. The code below uses a CellFactory to apply conditional formatting to the grid; low values will be red and high values will be green.

c1FlexGrid1.CellFactory = new ConditionalFormattingFactory();  

class ConditionalFormattingFactory : CellFactory  
{  
    // create brushes used to indicate low and high values  
    static Brush _brLowValue = new SolidColorBrush(Colors.Red);  
    static Brush _brHighValue = new SolidColorBrush(Colors.Green);  

    // overridden to apply the custom brushes based on the cell value  
    public override void ApplyCellStyles(C1FlexGrid grid, CellType cellType, CellRange range, Border bdr)  
    {  
        // we are interested only in data cells (no headers)  
        if (cellType == CellType.Cell)  
        {  
            // we are interested in double values only  
            var col = grid.Columns[range.Column];  
            if (col.DataType == typeof(double))  
            {  
                // get the cell value  
                var value = (double)grid[range.Row, col];  

                // apply formatting if value is out of range  
                if (value < 100 || value > 1000)  
                {  
                    var tb = bdr.Child as TextBlock;  
                    if (tb != null)  
                    {  
                        bdr.Background = value < 100 ? \_brLowValue : \_brHighValue;  
                    }  
                }  
            }  
        }  
    }  
}  

The attached sample below shows a more complex use of the CellFactory interface found in the popular financial sample we include with the Silverlight and WPF versions of FlexGrid. The sample shows a FlexGrid with real time data updates, flashing cells, and sparklines. The interesting thing here is that the sample is for Windows Phone 7 and uses the exact same code from Silverlight (minus some of the UI). The CellFactory in this sample does more than manipulate the appearance of a cell (as shown in the quick example above), it completely replaces the cell contents with a custom UserControl. The custom StockTicker control displays symbols and sparklines rather than just plain text. You can read more about the sample written for Silverlight here, and you can download it for the Windows Phone (7.1 OS) here: FlexGridPhone_Financial. Note: In Silverlight/WPF you can also specify custom editors using CellEditingTemplate or CreateCellEditor method. This feature is not available yet in Windows Phone and will be added in a future update.