GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

グリッドに表示したデータをグループ化する

はじめに

今回はComponentOne for Xamarinのコントロールの1つ、FlexGrid(フレックスグリッド)の機能を紹介します。

日頃からComponentOne製品をご利用いただいている方にはおなじみかと思いますが、FlexGridでデータをグリッド形式で一覧表示する場合、グループ化機能を利用することで指定した列に基づいたグループ表示が可能になります。

f:id:GrapeCity_dev:20180719145820p:plain:w600

f:id:GrapeCity_dev:20180719145947p:plain:w600

このグループ化機能ですがComponentOne for XamarinのFlexGridでもご利用いただけます。

グループ化の設定方法

ComponentOne for XamarinのFlexGridでは表示するデータを保持するオブジェクトとして同じComponentOne for Xamarinに含まれるコンポーネント「CollectionView」をデータバインドして利用できます。このCollectionViewに設定したデータをグループ化することでFlexGridでグループ表示が可能になります。

以前、以下の記事で紹介したサンプルをベースにグループ化を設定してみます。

元々のソースコードはこちらです。

設定前(MainPage.xaml.cs)

public MainPage()
{
    InitializeComponent();

    var postalcodevm = new PostalCodeViewModel();
    grid.ItemsSource = postalcodevm.PostalCodeList;

    // 先頭の2列は非表示
    grid.Columns[0].IsVisible = false;
    grid.Columns[1].IsVisible = false;
    // FlexGridに表示する列のヘッダーを指定
    grid.Columns[2].Header = "郵便番号";
    grid.Columns[3].Header = "都道府県";
    grid.Columns[4].Header = "市区町村";
    grid.Columns[5].Header = "地番";
    // 列幅を比率で指定するスターサイズ機能
    grid.Columns[2].Width = new GridLength(1, GridUnitType.Star);
    grid.Columns[3].Width = new GridLength(1.5, GridUnitType.Star);
    grid.Columns[4].Width = new GridLength(1.5, GridUnitType.Star);
    grid.Columns[5].Width = new GridLength(2, GridUnitType.Star);

    // 列ヘッダーのみを表示する
    grid.HeadersVisibility = C1.Xamarin.Forms.Grid.GridHeadersVisibility.Column;
}

グループ化を設定したコードがこちらです。C1CollectionViewGroupAsyncでグループ化する列を設定しています。その後FlexGridのItemSourceにCollectionViewを設定します。

設定後(MainPage.xaml.cs)

public MainPage()
{
    InitializeComponent();

    Load();
}

private async void Load()
{
    var postalcodevm = new PostalCodeViewModel();
    var _collectionView = new C1CollectionView<PostalCodeModel>(postalcodevm.PostalCodeList);

    // グループ化を設定
    await _collectionView.GroupAsync("City");
    grid.ItemsSource = _collectionView;

    // 先頭の2列は非表示
    grid.Columns[0].IsVisible = false;
    grid.Columns[1].IsVisible = false;
    // FlexGridに表示する列のヘッダーを指定
    grid.Columns[2].Header = "郵便番号";
    grid.Columns[3].Header = "都道府県";
    grid.Columns[4].Header = "市区町村";
    grid.Columns[5].Header = "地番";
    // 列幅を比率で指定するスターサイズ機能
    grid.Columns[2].Width = new GridLength(1, GridUnitType.Star);
    grid.Columns[3].Width = new GridLength(1.5, GridUnitType.Star);
    grid.Columns[4].Width = new GridLength(1.5, GridUnitType.Star);
    grid.Columns[5].Width = new GridLength(2, GridUnitType.Star);

    // 列ヘッダーのみを表示する
    grid.HeadersVisibility = C1.Xamarin.Forms.Grid.GridHeadersVisibility.Column;

    // グループヘッダーの書式設定
    grid.GroupHeaderFormat = "{value} ({count} 件)";
}

サンプルを実行してAndroid、iOS、UWPの各プラットフォームで確認してみます。「市区町村」でグループ化されていることが確認できますね!

Android

f:id:GrapeCity_dev:20180719172012p:plain

iOS

f:id:GrapeCity_dev:20180719172039p:plain

UWP

f:id:GrapeCity_dev:20180719172103p:plain

最後に

ComponentOne for Xamarinでは今回使用したFlexGridの他にもXamarin.Formsで使えるコントロールを揃えています。動作を確認できるサンプルはこちらです。是非お試しください!

ComponentOne デモアプリケーション | Developer Tools - グレープシティ株式会社