気象庁の「最新の気象データ」をグリッドに表示してみよう（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"と記述することもできます。
このコードを実行すると、次の図のようになります。
平年より気温が高い地域のセルを着色してみよう
次は、セルの背景色を値に応じて変えてみましょう。
先ほどと同じく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プロパティに設定します。
このコードを実行すると次の図のようになります。
