Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/06/01 14:00
目次

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

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

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

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

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)
図10 データの並び替えと先頭列固定、列幅自動調整の実行結果(iOS)

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

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

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

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)
図11 セルの着色結果(Android)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 奥山 裕紳(オクヤマ ヒロノブ)

     Microsoft MVP for Visual Studio and Development Technologies  ネットやコミュニティでは amay077(あめい) という名前で活動しています。  XamarinやC#ネタをブログに投稿したり、勉強会で発表したりしています。  愛知...

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(Xuni)
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5