Xamarin.Forms リストビュー

【 Xamarin 記事一覧 】

1 グループ表示

ListViewは、グループ化して表示することが可能です。

グループ化するためには、プロパティIsGroupingEnabled にtrueをセットし、ItemsSourceに「配列の配列」を指定します。

「配列の配列」は、ObservableCollection型のクラスを使用すると簡単に作成することができます。

//１つのデータを表現するクラス
class Address {
    public string Name { get; set; }//名前
    public string Phone { get; set; }//電話番号
    public string Photo { get; set; }//画像
}

//１つのグループを表現するクラス
class Group : ObservableCollection<Address>{
    public string Title { get; set; }//グループ用のタイトル
    public Group (string title){
        Title = title;
    }
}

public class App {
    public static Page GetMainPage(){
            
       //リストビューの生成
       var listView = new ListView {
           IsGroupingEnabled = true,//グループ表示有効
           GroupDisplayBinding = new Binding("Title"),//グループのタイトル指定
       };

       //テンプレートの作成(ImageCell使用)
       var cell = new DataTemplate(typeof(ImageCell));
       cell.SetBinding(ImageCell.TextProperty, "Name");//上段のテキスト
       cell.SetBinding(ImageCell.DetailProperty, "Phone");//下段のテキスト
       cell.SetBinding(ImageCell.ImageSourceProperty, "Photo");//画像
       cell.SetValue(ImageCell.StyleProperty, TextCellStyle.Vertical);//縦配置
       listView.ItemTemplate = cell;//テンプレート指定

       //データの作成
       var ar = new List<Group>{
           new Group("GROUP1"){
               new Address{ Name="Taro", Phone = "090-xxx-xxxx",Photo="man.png"},
               new Address{ Name="Joro", Phone = "090-xxx-xxxx",Photo="man.png"},
               new Address{ Name="Saburo", Phone = "090-xxx-xxxx",Photo="man.png"}
           },
           new Group("GROUP2"){
               new Address{ Name="Hanako", Phone = "090-xxx-xxxx",Photo="woman.png"},
               new Address{ Name="Mayumi", Phone = "090-xxx-xxxx",Photo="woman.png"},
           }
       };
       listView.ItemsSource = ar;//データ指定

       return new ContentPage {
           Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
           Content = listView
       };
   }
}

行の高さ指定

プロパティRowHeightで、行の高さを指定できます。

また、プロパティHasUnevenRowsにtrueをセットすると、行ごとに高さを変えることができます。（HasUnevenRows=trueの場合、RowHeightは無効）
この際、各行の高さは、データテンプレートのOnBindingContextChangedをオーバーライドして指定します。

サンプルは、２行目だけの行の高さを変えたのものです。（2014.08.02現在、iOSでは、正常に動作していません）

[2014.08.06 追記] Xamarin.Forms 1.2.2.6243 でiOSでも正常動作することを確認しました。

class Data {
    public string Text{ get; set; }
}

public class App {
    public static Page GetMainPage(){
        //リストビューの生成
        var listView = new ListView();
        //行の高さを可変にする
        listView.HasUnevenRows = true;
        //データの作成
        var ar = new List<Data>{ 
            new Data{Text="Item1"},
            new Data{Text="Item2"},
            new Data{Text="Item3"},
            new Data{Text="Item4"},
            new Data{Text="Item5"},
            new Data{Text="Item6"},
            new Data{Text="Item7"},
            new Data{Text="Item8"}
        };
        listView.ItemsSource = ar;//データ指定
        listView.ItemTemplate = new DataTemplate(typeof (MyCell));//テンプレート指定
        return new ContentPage {
            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
            Content = listView
        };
    }
}

public class MyCell : ViewCell {
    public MyCell(){
        var text = new Label();
        text.SetBinding(Label.TextProperty, "Text");
        View = text;
    }
    protected override void OnBindingContextChanged(){
        base.OnBindingContextChanged();
        Height = 20;//列の高さ(デフォルト値)
        if (((Data)BindingContext).Text == "Item2") {
            Height = 50;//２行目だけ、列の高さを変更する
        } 
    }
}

【 Xamarin 記事一覧 】