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

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

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

Published at DZone with permission of David Negley, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}