Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Show Live Updates to Your Xamarin Grids

DZone's Guide to

Show Live Updates to Your Xamarin Grids

Getting a responsive grid up and running with Xamarin isn't difficult. Here's some code you can use to create Xamarin grids that update on the fly.

· Mobile Zone ·
Free Resource

One common scenario for a datagrid in a software application is showing live updates to values inside the datagrid. For instance, a grid used to view stock prices might show frequent updates during trading hours. Or a grid used to edit customer data might be updated at runtime with changes from the database which are caused by another user.

Because displaying live updates is an integral feature to datagrids, the Infragistics Xamarin Grid will respond immediately to all data updates that raise the INotifyCollectionChanged.CollectionChanged event or the INotifyPropertyChanged.PropertyChanged event.

The sample in this blog demonstrates this in a simple way. The "Tick" method is invoked every 33 milliseconds, updating a numeric property to a random value on a random selection of 1,000 data items. As expected, the grid updates the numeric cells as soon as the values are changed in code.

private void Tick()
{
    const int toChange = 1000;       
    HashSet toChangeIndexes = new HashSet();
    bool stillAnimating = _data.Any((item) => item.YearToDateSalesHeat > 0);       
    if (!stillAnimating) 
    {
        _lastDataUpdate = DateTime.Now;
        for (var i = 0; i < toChange; i++)
        {
            int index = _rand.Next(_data.Count - 1);
            while (toChangeIndexes.Contains(index))
            {
                index = _rand.Next(_data.Count - 1);
            }
            toChangeIndexes.Add(index);
        }
    }
    for (var i = 0; i < _data.Count; i++)
    {
        var item = _data[i];
        if (toChangeIndexes.Contains(i)) 
        {
            item.YearToDateSales += _rand.Next(4); 
            item.YearToDateSalesHeat = 1; 
        }
        else 
        {
            if (item.YearToDateSalesHeat > 0) 
            {

                item.YearToDateSalesHeat -= .03; 
                if (item.YearToDateSalesHeat < 0)
                {
                    item.YearToDateSalesHeat = 0;
                }
            }
        }
    }      

    bool sortedBySales = grid.SortDescriptions.Any((sortDescription) => sortDescription.PropertyName == "YearToDateSales");
    if (sortedBySales && toChangeIndexes.Count > 0)
    {
        grid.ActualDataSource.QueueAutoRefresh();
    }
    Task.Delay(33).ContinueWith((t) =>
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            Tick();
        });
    });
}


Exploring further, this sample also demonstrates a good technique for contextual coloring of the numeric cells. Handling the numeric column's DataBound event in code, a color is selected, from white to red, based on a property of each data item, which represents how recently that item was updated.

private void yearToDateSalesColumn_DataBound(object sender, Infragistics.XamarinForms.Controls.Grids.DataBindingEventArgs args)
{

    var item = args.CellInfo.RowItem as IGSalesmanItem;
    if (item != null)
    {
        if (item.YearToDateSalesHeat > 0)
        {
            var p = item.YearToDateSalesHeat;
            var toA = 1.0;
            var fromA = 1.0;
            var toR = 1.0;
            var fromR = 1.0;
            var toG = 0.0;
            var fromG = 1.0;
            var toB = 0.0;
            var fromB = 1.0;              
            var a = fromA + (toA - fromA) * p;
            var r = fromR + (toR - fromR) * p;
            var g = fromG + (toG - fromG) * p;
            var b = fromB + (toB - fromB) * p;              
            var brush = new SolidColorBrush(Color.FromRgba(r, g, b, a));
            args.CellInfo.Background = brush;
        }
        else
        {
            args.CellInfo.Background = new SolidColorBrush(Color.White);
        }
    }
}


The end result is a beautiful, responsive grid with live updates and contextual coloring of cells, produced in a short time with a small amount of code. Here is the link to the sample application.

Topics:
mobile ,xamarin ,grids ,updates ,responsive design ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}