気象庁の「最新の気象データ」をグリッドに表示してみよう（3）
地域でグループ化してみよう
更に、行の値を使ってグループ化を行い、グリッドを展開できるようにしてみましょう。
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);
// 追記ここから
await _collView.GroupAsync(x => x.Pref);
//grid.CellFactory = new CustomCellFactory();
}
_collView.GroupAsync(x => x.Pref)でデータの地域を対象にグループ化を行っています（グループ化とCellFactoryは併用できない？ようなので、ここではコメントアウトしています）。
このコードを実行すると、次のようになります。
気温の高低を画像で表してみよう
最後に、気温の値を数値ではなく画像で表してみましょう。
FlexGridには様々なGauge（ゲージ）が用意されているので、これを使用すると用意にグラフィカルな表現が可能になります。
ゲージの設定はXAMLで行ってみましょう。
まず、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);
//await _collView.GroupAsync(x => x.Pref);
//grid.CellFactory = new CustomCellFactory();
}
grid.ItemsSource = _collView;より下の処理をコメントアウトします。
次に、GettingStarted.xamlを次のように修正します。
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexGrid101.GettingStarted"
x:Name="page"
xmlns:gauge="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge" ←追記
xmlns:xuni="clr-namespace:Xuni.Forms.FlexGrid;assembly=Xuni.Forms.FlexGrid">
＜中略＞
<!-- FlexGridの定義を以下のように修正 -->
<xuni:FlexGrid x:Name="grid" Grid.Row="1" AutoGenerateColumns="false">
<xuni:FlexGrid.Columns>
<xuni:GridColumn Binding="Pref" Header="都道府県" Width="*" />
<xuni:GridColumn Binding="Point" Header="地点" Width="*" />
<xuni:GridColumn Binding="TodayHighestTemperature" Header="最高気温" Width="*">
<xuni:GridColumn.CellTemplate>
<DataTemplate>
<gauge:XuniLinearGauge IsAnimated="False" Value="{Binding TodayHighestTemperature}"
Min="0" Max="30" ShowText="Value" ShowRanges="False" WidthRequest="50" HeightRequest="50">
<gauge:XuniLinearGauge.Ranges>
<gauge:GaugeRange Min="0" Max="10" Color="Aqua" />
<gauge:GaugeRange Min="10" Max="20" Color="Green" />
<gauge:GaugeRange Min="20" Max="30" Color="Fuchsia" />
</gauge:XuniLinearGauge.Ranges>
</gauge:XuniLinearGauge>
</DataTemplate>
</xuni:GridColumn.CellTemplate>
</xuni:GridColumn>
</xuni:FlexGrid.Columns>
</xuni:FlexGrid>
</Grid>
</ContentPage>
まず、<xuni:FlexGrid.Columns>に<xuni:GridColumn>を3つ定義します。これとAutoGenerateColumns="false"を設定することによって、グリッドには定義した３列しか表示されないようになります。
そして、3つ目の<xuni:GridColumn>で<gauge:XuniLinearGauge>を使用して、セル内にゲージを表示します。Min="0" Max="30"がゲージの最小・最大値を示し、<gauge:XuniLinearGauge.Ranges>の設定で、「最高気温が0〜10度は水色、10〜20度は緑、20〜30度はピンク」と定義しています。
このコードを実行すると、次のようになります。
まとめ
このように、FlexGridを使用すると、業務アプリケーションでよく見られる表形式の画面を容易に作成することができます。
Xamarin.Formsに対応しているおかげで、共通のコードでAndroid・iOSで動作可能ですし、XAMLやデータバインディングもフルに活用することができます。
本記事で作成したサンプルプログラムは こちらからダウンロードでき、Visual Studio for Mac／Visual Studio 2015、2017で動作します。
Xuniは、FlexGridコントロール以外にも、カレンダー・チャート・オートコンプリート対応入力コントロール群などが含まれています。この記事でインストールしたサンプルプログラムには、これらのサンプルも含まれていますので、是非試してみてください。
