Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

気象庁の「最新の気象データ」をグリッドに表示してみよう(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は併用できない?ようなので、ここではコメントアウトしています)。

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

図12 グループ化の結果(iOS)
図12 グループ化の結果(iOS)

気温の高低を画像で表してみよう

 最後に、気温の値を数値ではなく画像で表してみましょう。

 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列しか表示されないようになります。

 そして、3つ目の<xuni:GridColumn><gauge:XuniLinearGauge>を使用して、セル内にゲージを表示します。Min="0" Max="30"がゲージの最小・最大値を示し、<gauge:XuniLinearGauge.Ranges>の設定で、「最高気温が0〜10度は水色、10〜20度は緑、20〜30度はピンク」と定義しています。

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

図13 ゲージを使った表現(Android)
図13 ゲージを使った表現(Android)

まとめ

 このように、FlexGridを使用すると、業務アプリケーションでよく見られる表形式の画面を容易に作成することができます。

 Xamarin.Formsに対応しているおかげで、共通のコードでAndroid・iOSで動作可能ですし、XAMLやデータバインディングもフルに活用することができます。

 本記事で作成したサンプルプログラムは こちらからダウンロードでき、Visual Studio for Mac/Visual Studio 2015、2017で動作します。

 Xuniは、FlexGridコントロール以外にも、カレンダー・チャート・オートコンプリート対応入力コントロール群などが含まれています。この記事でインストールしたサンプルプログラムには、これらのサンプルも含まれていますので、是非試してみてください。



  • ブックマーク
  • 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