「Xuni」のXamarin.Forms向けコントロールセットを使ってデータを可視化してみた

気象庁の「最新の気象データ」をグリッドに表示してみよう（2）

データを気温の低い順に並び替えてみよう

　次に、データの並び替えをしてみましょう。FlexGrid標準の機能でヘッダー列をタップすれば並び替え順を昇順／降順で切り替えることができますが、コードからも行えます。同時に先頭列の固定と、列幅の自動調整もしてみましょう。

　GettingStarted.xaml.csのInitializeDataに次のように追記します。

async void InitializeData()
{
    var data = await HighestTemperature.Read();
    _collView = new XuniCollectionView<HighestTemperature>(data);
    grid.ItemsSource = _collView;

    // 追記ここから
    grid.FrozenColumns = 2; // 先頭列の固定
    await _collView.SortAsync(x => x.TodayHighestTemperature,
        SortDirection.Ascending); // 最高気温の昇順にソート
    grid.AutoSizeColumns(0, grid.Columns.Count - 1); // 列幅自動調整
}

　先頭列の固定はXAMLにFrozenColumns="2"と記述することもできます。

　このコードを実行すると、次の図のようになります。

図10　データの並び替えと先頭列固定、列幅自動調整の実行結果（iOS）

平年より気温が高い地域のセルを着色してみよう

　次は、セルの背景色を値に応じて変えてみましょう。

　先ほどと同じくGettingStarted.xaml.csのInitializeDataに次のように追記します。

public partial class GettingStarted : ContentPage
{
    ＜省略＞

    async void InitializeData()
    {
        var data = await HighestTemperature.Read();
        _collView = new XuniCollectionView<HighestTemperature>(data);
        grid.ItemsSource = _collView;

        grid.FrozenColumns = 2;
        await _collView.SortAsync(x => x.TodayHighestTemperature, SortDirection.Ascending);
        grid.AutoSizeColumns(0, grid.Columns.Count - 1);

// 追記ここから
        grid.CellFactory = new CustomCellFactory();
    }
}

class CustomCellFactory : GridCellFactory
{
    public override GridCellView CreateCell(GridCellType cellType, GridCellRange range)
    {
        var cell = base.CreateCell(cellType, range);
        if (cellType == GridCellType.Cell && range.Column == 8)
        {
            var cellValue = Grid[range.Row, range.Column] as float?;
            if (cellValue.HasValue)
            {
                cell.BackgroundColor = cellValue <= 0.0 ? Color.Aqua : Color.Pink;
            }
        }
        return cell;
    }

    public override void BindCellContent(GridCellType cellType, GridCellRange range, View cellContent)
    {
        var label = cellContent as Label;
        if (label != null && cellType == GridCellType.Cell && range.Column == 8)
        {
            var cellValue = Grid[range.Row, range.Column] as float?;
            if (cellValue.HasValue)
            {
                label.BackgroundColor = cellValue <= 0.0 ? Color.Aqua : Color.Pink;
            }
        }
    }    
}

　セルをカスタマイズする方法のひとつはGridCellFactoryを拡張することです。

　ここではGridCellFactoryを拡張してCustomCellFactoryクラスを作成し、列インデックスが8（平年差）の時に、その値が0以下だったらセル背景色を水色に、0より大きかったらピンク色に設定します。

　そしてCustomCellFactoryクラスをFlexGridのCellFactoryプロパティに設定します。

　このコードを実行すると次の図のようになります。

図11　セルの着色結果（Android）